Como desarrolladores, dedicamos mucho tiempo de codificación a corregir errores. La depuración nos ayuda a encontrar y eliminar errores en el desarrollo de software. Pero a veces, encontrar un error lleva más tiempo que solucionarlo. En esos casos, necesitamos aprender algunas formas de depurar nuestras aplicaciones.

Recuerda que si tu quieres leer más acerca de esté puedes visitar mi blog

Imaginemos que eres un desarrollador de Angular trabajando en una aplicación web interactiva, intentando determinar por qué un componente en particular no se comporta como se espera.

Hoy vamos a aprender algunas formas de ahorrar tiempo depurando nuestras aplicaciones de Angular utilizando ng.global, Angular DevTools y VSCode.

Accediendo a los nodos del DOM

Cuando depuramos, a menudo necesitamos seleccionar un elemento específico para inspeccionarlo o modificarlo. En lugar de navegar laboriosamente a través del Modelo de Objetos del Documento (DOM) o escribir selectores de consulta complejos, puedes utilizar la herramienta Chrome Picker.

Selecciona el elemento utilizando la herramienta de selección y se almacenará en el objeto global $0.

Angular ng.global

Angular ofrece una serie de funciones de depuración útiles en su espacio de nombres global ng. Estas funciones, disponibles cuando ejecutas tu aplicación en modo de desarrollo, proporcionan información valiosa sobre el estado actual de la aplicación.

Lee más sobre ngGlobal

Uso de las funciones de depuración de Ng

Las funciones de depuración de Angular nos ayudan a manipular las instancias de nuestros componentes, realizar cambios y más. Aquí tienes un resumen breve de estas funciones y cómo puedes utilizarlas:

ng.getComponent

Recupera la instancia del componente asociado a un elemento DOM específico.

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

ng.applyChanges

Esta función marca un componente para su verificación y realiza una detección de cambios sincrona en la aplicación a la que pertenece el componente.

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

ng.getContext

Recupera el contexto de la vista incrustada si el elemento forma parte de una (como dentro de ngIf o ngFor). De lo contrario, recupera la instancia del componente cuya vista es propietaria del elemento.

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

ng.getDirectiveMetadata

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

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

Utilizar eficazmente estas funciones de depuración puede agilizar la identificación y resolución de problemas en tus aplicaciones de Angular, asegurando una experiencia de usuario más fluida y un proceso de depuración eficiente.

Recomiendo consultar la documentación oficial de Angular para obtener más información sobre esta característica.

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

Angular DevTools: una potente extensión de depuración

Angular DevTools es una extensión del navegador para Chrome y Firefox, diseñada para mejorar las capacidades de depuración y performance de las aplicaciones de Angular. Funciona mejor con Angular v12 o posterior, siempre que la aplicación se compile con la opción de configuración de optimización desactivada ({optimization: false}).

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

• Componentes: Esta pestaña te permite profundizar en los componentes y directivas de tu aplicación, lo que te permite previsualizar o ajustar sus estados.
• Profiler: Esta pestaña te permite realizar un perfilado de tu aplicación, lo que te ayuda a detectar cuellos de botella de rendimiento durante la ejecución de la detección de cambios.

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

Depuración con Angular DevTools

Angular DevTools te ayuda a examinar rápidamente el diseño de tu aplicación, mostrando un árbol de componentes y directivas. Puedes verificar cada parte, sus detalles e información con el mouse o los atajos de teclado.

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

Analizando tu aplicación

La pestaña de Profiler en Angular DevTools registra cómo Angular detecta los cambios y proporciona información útil sobre los eventos. Puedes ver estos datos en un gráfico de barras claro, que muestra cada parte y su actividad durante cada paso.

La pestaña de Profiler te ayuda a ver cómo Angular encuentra los cambios y proporciona detalles útiles sobre los eventos. Muestra un gráfico de barras simple con la actividad de cada parte en cada paso. También tiene una vista  que muestra el lugar de cada elemento en el árbol de visualización y el tiempo utilizado para encontrar cambios.

Si quieres obtener más información, consulta el video oficial del equipo de Google.

Extensión de Chrome de Angular DevTool

Depurando con VSCode

Además de las herramientas de depuración nativas de Angular, Visual Studio Code (VS Code) también ofrece un sólido soporte para la depuración de aplicaciones de Angular. Veamos cómo podemos aprovechar el poder de VS Code para depurar nuestro código de Angular en el lado del cliente.

Establecer un punto de interrupción

Para empezar, establezcamos un punto de interrupción en nuestro archivo app.component.ts. Simplemente haz clic en el margen a la izquierda de los números de línea donde deseas establecer el punto de interrupción. Verás aparecer un círculo rojo; este es tu punto de interrupción.

Configurar el depurador

Ahora es el momento de configurar el depurador. Primero, ve a la vista de Ejecución y Depuración (Ctrl+Shift+D) y haz clic en el botón de configuración para crear un archivo de configuración de depurador launch.json.

En la lista desplegable Seleccionar depurador, elige ng-serve. Esta acción crea un archivo launch.json en una nueva carpeta .vscode de tu proyecto, que incluye una configuración para iniciar tu sitio web.

Para comenzar la depuración y abrir un nuevo navegador, presiona F5 o haz clic en la flecha verde. El punto de interrupción no funcionará hasta que actualices la página web, porque el código se ejecuta antes de que el depurador se conecte. Después de actualizar, el punto de interrupción debería funcionar.

En este punto, puedes avanzar paso a paso a través del código usando (F10), inspeccionar variables como AppComponent o ProductService y observar la pila de llamadas de tu aplicación de Angular en el lado del cliente.

Con estas características en tu conjunto de herramientas, la depuración de código de Angular en VS Code se vuelve mucho más simple y eficiente.

Conclusión

En conclusión, hemos explorado la depuración de Angular, hemos examinado la extensión Angular DevTools de Chrome y hemos analizado las características de depuración de Visual Studio Code, proporcionándote las herramientas y técnicas para una experiencia de codificación más fluida y eficiente.