Depurando un proyecto de Angular

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

12.03.2022 a las 17:08

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...

Saludos 😉

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría

fjmduran.com v0.1.2