Depurando un proyecto de Angular

Ve más allá del siempre confiable console.log

Todos comenzamos depurando nuestro código con console.log, pero llega un momento en el que se nos queda corto y necesitamos pasar al siguiente nivel.

En este artículo te voy a mostrar cómo depurar con Visual Studio Code un proyecto de Angular 🅰

Al turrón 🚀

1. Ve a la pantalla de depuración de VS Code (Ctr+Shift+D)

   

2. Crea un archivo launch.json

   
3. Selecciona Chrome como entorno

4. Al fichero launch.json que se genera automáticamente le tienes que añadir el campo de url y especificarle el puerto que se abre cuando ejecutas en local tu proyecto de Angular ng serve -o. Normalmente es el puerto 4200.

   

5. Inicia tu proyecto en local ng serve

6. Una vez iniciado el proyecto podrás depurarlo pulsando en el play

   

7. Ya puedes añadir puntos de rupturas (breakpoints), pausar el proyecto, ver el valor de las variables globales...

   

Hasta luego 🖖