Tiempo necesario: 15 minutos.
A continuación les contamos cómo hacer debug paso a paso en Angular (2+) con Visual Studio Code. Este instructivo asume que el usuario ya tiene Visual Studio Code instalado en su PC y que cuenta con un proyecto de Angular instalado y funcionando:
- Instalar Debugger for Chrome
Lo primero es instalar la extensión Debugger for Chrome. Para esto ingresar a la opción Extensiones en la barra lateral izquierda, buscar la extensión y hacer clic en instalar.
- Abrir la opción Run o Depuración
Luego abrir la opción Run o Depuración en la barra lateral izquierda.
- Configurar el archivo launch.json (solo la primera vez)
Si es la primera vez que se ejecuta la depuración, es necesario crear un archivo launch.json con la configuración. Para esto hacer clic en el vínculo como se indica en la imagen.
- Seleccionar la configuración para Chrome
A continuación se mostrarán las opciones para crear el archivo de configuración. Seleccionar Chrome.
- Se creará y abrirá el archivo de configuracion
Automáticamente se creará y abrirá el archivo launch.json con la configuración por default. En este caso es necesario verificar que el parámetro «url» tenga bien configurado el puerto. Este puerto debe ser el mismo con el que se abre el navegador cuando se ejecuta el proyecto en local con el comando ng serve.
- Ajustar el puerto de para que coincida con angular
En la configuración estándar de angular y en la mayoría de las instalaciones que conozco, la aplicación funciona por el puerto 4200 (es decir, cuando se abre aparece en el navegador http://localhost:4200). En este caso reemplazamos el 8080 por 4200 en la configuración, como se ve en la imagen.
- Abrir la terminal y correr el proyecto
Antes de poder utilizar la depuración, es necesario correr el proyecto. Esto ya lo sabrán seguramente, pero sino, basta con abrir la terminal y ejecutar el comando ng serve.
- Iniciar el debug
Una vez se haya ejecutado el comando ng serve, se puede iniciar el depurador, haciendo clic en el triangulo verde como se muestra en la imagen.
- Ya puede poner puntos de interrupción y depurar a gusto
En este punto tendrán la descripción de las variables a la izquierda, la barra para pausar, continuar. A la izquierda tendrán las opciones para inspeccionar las variables, podrán poner puntos de interrupción haciendo click justo al lado de los números de las líneas del código y a la derecha tendrán la consola de depuración.
Es importante tener en cuenta que en las aplicaciones de Angular muchas veces es necesario recargar el navegador o navegar hasta determinado componente para poder llegar hasta determinado punto de interrupción.
Ahora sí, espero que les sirva y que puedan encontrar esos errores escurridizos en su proyecto.