Como desarrolladores, pasamos gran parte de nuestro tiempo de programación corrigiendo errores. La depuración nos ayuda a encontrar y eliminar fallos en el desarrollo de software, pero a veces encontrar un error toma más tiempo que solucionarlo. En esos momentos es cuando necesitamos aprender mejores formas de depurar nuestras aplicaciones.

Imagina que eres un desarrollador de Angular trabajando en una aplicación web interactiva e intentas identificar con exactitud por qué un componente específico no se comporta como esperas.

Hoy vamos a aprender varias formas de ahorrar tiempo al depurar nuestras aplicaciones de Angular usando ng.global, Angular DevTools y VS Code.

Acceder a nodos del DOM de forma eficiente

Al depurar, con frecuencia necesitas seleccionar un elemento específico para inspeccionarlo o modificarlo. En lugar de navegar manualmente por todo el Document Object Model (DOM) o escribir selectores complejos en la consola, puedes usar la herramienta de selección (Picker Tool) de Chrome.

Selecciona el elemento con el selector de la consola y este quedará guardado en la variable global $0.

Angular ng.global

Angular ofrece una serie de funciones de depuración muy útiles dentro de su espacio de nombres global ng. Estas funciones están disponibles cuando ejecutas tu aplicación en modo de desarrollo y te permiten inspeccionar el estado actual de la aplicación.

Lee más sobre ngGlobal

Usar las funciones de depuración de ng

Las funciones de depuración de Angular nos ayudan a interactuar con las instancias de nuestros componentes, aplicar cambios y mucho más. A continuación, te comparto un resumen de estas funciones y cómo puedes utilizarlas:

ng.getComponent

Obtiene la instancia del componente asociada a un elemento específico del DOM.

const component = ng.getComponent($0);
console.log(component);

ng.applyChanges

Esta función marca un componente para verificación y ejecuta la detección de cambios de forma sincrónica en la aplicación a la que pertenece dicho componente.

const component = $0;
ng.applyChanges(component);

ng.getContext

Obtiene el contexto de la vista incrustada si el elemento forma parte de una (por ejemplo, dentro de ngIf o ngFor). De lo contrario, devuelve la instancia del componente cuya vista contiene el elemento.

const context = ng.getContext($0);
console.log(context);

ng.getDirectiveMetadata

Devuelve los metadatos de depuración para una directiva o instancia de componente en particular. Recibe una instancia de directiva o componente y devuelve sus metadatos correspondientes.

const metadata = ng.getDirectiveMetadata($0);
console.log(metadata);

Usar estas funciones de depuración de manera efectiva te permite identificar y resolver problemas con mayor rapidez en tus aplicaciones de Angular, logrando un proceso de depuración más ágil.

Te recomiendo consultar la documentación oficial de Angular para conocer más sobre esta característica.

Lee más en https://v13.angular.io/api/core/global

Angular DevTools: Una extensión potente para depurar

Angular DevTools es una extensión de navegador para Chrome y Firefox, pensada para mejorar la depuración y el análisis de rendimiento en aplicaciones de Angular. Funciona mejor a partir de Angular v12, siempre que la aplicación esté compilada con la opción de optimización desactivada ({optimization:false}).

La extensión DevTools se encuentra en la pestaña Angular dentro de las herramientas de desarrollo de tu navegador, con dos pestañas adicionales al abrirla:

• Components: Esta pestaña te permite inspeccionar los componentes y directivas de tu aplicación, dándote la posibilidad de previsualizar o modificar su estado.

• Profiler: Esta pestaña te permite analizar el rendimiento de tu aplicación, ayudándote a detectar cuellos de botella durante la ejecución de la detección de cambios.

Además, muestra la versión de Angular y el último commit hash de la extensión.

Depurar con Angular DevTools

Angular DevTools te ayuda a revisar la estructura de tu aplicación rápidamente, mostrando un árbol de componentes y directivas. Puedes inspeccionar cada elemento, sus detalles y su información con el ratón o con atajos de teclado.

Puedes actualizar los valores de las propiedades directamente desde la vista de propiedades y acceder a los componentes o directivas seleccionados.

Analizar el rendimiento de tu aplicación

La pestaña Profiler en Angular DevTools registra cómo detecta los cambios Angular y ofrece información muy útil sobre cada evento. Puedes revisar estos datos en un gráfico de barras claro, que muestra cada componente y su actividad en cada paso.

La pestaña Profiler te ayuda a entender cómo procesa los cambios Angular y te brinda detalles valiosos de los eventos. Presenta un gráfico de barras sencillo con la actividad de cada elemento en cada ciclo. También incluye una vista tipo flame graph (gráfico de llamas), que muestra la posición de cada elemento en el árbol visual y el tiempo empleado en la detección de cambios.

Si quieres aprender más, te recomiendo revisar el video oficial del equipo de Google.

Angular DevTool Chrome Extension

Depurar con VS Code

Más allá de las herramientas nativas de depuración en Angular, Visual Studio Code (VS Code) también ofrece un soporte muy completo para depurar aplicaciones de Angular. Veamos cómo podemos usar VS Code para depurar nuestro código de cliente en Angular.

Configurar un punto de interrupción (Breakpoint)

Para comenzar, vamos a colocar un breakpoint en nuestro archivo app.component.ts. Simplemente haz clic en el margen izquierdo junto a los números de línea donde quieras detener la ejecución. Verás aparecer un círculo rojo: ese es tu breakpoint.

Configurar el depurador

Ahora configuramos el depurador. Primero, ve a la vista de Run and Debug (Ctrl+Shift+D) y haz clic en el botón del engranaje; esto creará el archivo de configuración launch.json.

En la lista desplegable para seleccionar el depurador, elige ng-serve. Esto creará el archivo launch.json dentro de una nueva carpeta .vscode en tu proyecto, incluyendo la configuración para lanzar tu sitio web.

Para iniciar la depuración y abrir un nuevo navegador, presiona F5 o haz clic en la flecha verde. El breakpoint no se detendrá de inmediato hasta que recargues la página web, ya que el código corre antes de que el depurador termine de conectarse. Tras recargar la página, el punto de interrupción funcionará correctamente.

En este punto, puedes avanzar paso a paso por el código usando F10, inspeccionar variables como AppComponent o ProductService, y revisar la pila de llamadas (call stack) de tu aplicación de Angular.

Con estas herramientas en tu flujo de trabajo diario, depurar código de Angular en VS Code se vuelve mucho más simple y eficiente.

Conclusión

Para terminar, hemos revisado cómo depurar en Angular a través de las funciones globales de ng, la extensión Angular DevTools y las funciones de depuración integradas en Visual Studio Code. Con estas técnicas en tu repertorio, tendrás todo lo necesario para resolver errores de forma más rápida y disfrutar de una experiencia de desarrollo mucho más fluida.