Depurar (debug) un proyecto de Angular en 2 minutos

El autor posee los derechos de la imagen. Los iconos han sido extraídos desde sus respectivas páginas web.

Depurar aplicaciones web puede ser un tanto complejo, especialmente cuando trabajas con frameworks complejos como en este caso Angular. Sin embargo, con los conocimientos necesarios, este proceso puede ser más manejable y eficiente. En este artículo, veremos los pasos requeridos para configurar y utilizar las herramientas de depuración de VSCode en un proyecto de Angular.

¿Qué es Angular?

Angular es un framework de desarrollo frontend creado y mantenido por Google. Utilizando TypeScript, permite a los desarrolladores construir aplicaciones web dinámicas y escalables; con características como enlace de datos bidireccional, inyección de dependencias y enrutamiento. Angular facilita la creación de componentes reutilizables y la gestión eficiente de aplicaciones complejas. Su arquitectura modular y su sólido ecosistema de herramientas lo convierten en una opción popular para proyectos de cualquier tamaño.

¿Cómo podemos depurar nuestro proyecto?

Primero tendremos que tener un proyecto de Angular ya creado.
Una vez que tengamos el proyecto abierto iremos a la opción de Run and Debug encontrada en la barra lateral del Visual Studio Code. Dentro de este, justo a la derecha del seleccionador de dónde queremos debugar nuestro proyecto, presionaremos al botón con el icono del engranaje. Esto abrirá un fichero llamado launch.json y una vez abierto copiaremos el siguiente fragmento de código en él:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "url": "<http://localhost:4200/>",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "meteor://💻app/*": "${workspaceFolder}/*",
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack://?:*/*": "${workspaceFolder}/*"
      }
    },
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: test",
      "url": "<http://localhost:9876/debug.html>",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "./src/*": "${workspaceFolder}/src/*"
      }
    },
    {
      "name": "ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "args": ["${workspaceFolder}/e2e/protractor.conf.js"]
    }
  ]
}

A continuación abriremos el archivo package.json de nuestro proyecto y cambiaremos el valor del siguiente comando:

"start": "ng serve --host=127.0.0.1"

Para finalizar estableceremos un punto de anclaje (breakpoint) donde queramos depurar el código y ejecutaremos en nuestro terminal el comando npm run start.

Una vez inicializado el proyecto iremos al apartado Run and Debug del Visual Studio Code y lo inicializaremos también dándole al Play abriéndose de esta forma Google Chrome.
Si en algún momento, en el terminal nos pregunta si queremos inicializar la depuración en otro puerto le especificaremos que no ya que queremos depurar aquello que está en el puerto ejecutado.

Conclusiones

Dominar la depuración en Angular con VSCode es una habilidad valiosa para cualquier desarrollador. No solo optimiza el proceso de desarrollo, sino que también contribuye a la creación de aplicaciones más robustas y fiables. Espero que esta guía te haya sido útil y te animo a seguir explorando y perfeccionando tus habilidades de depuración.