Consejos para depurar JavaScript Parte III 6 Herramientas avanzadas para desarrolladores de Google Chrome

Noah Sager

<\/HEAD>Esta publicación del blog es la tercera de una serie de consejos y trucos para depurar JavaScript que te ayudarán en tu camino. Consulta JavaScript Debugging Tips Part I <\/A><\/STRONG><\/EM> y también JavaScript Debugging Tips Part II<\/A> <\/STRONG><\/EM> para nuestros segmentos anteriores.<\/EM>

En las dos publicaciones anteriores de JavaScript Debugging Tips en el blog de Esri Support, analizamos la pestaña Network y la pestaña Console como parte de las Google Chrome Developer Tools<\/A><\/STRONG>. Aunque la mayoría de los navegadores modernos tienen alguna forma de herramientas para desarrolladores, aquí usamos Chrome para nuestros ejemplos.

Nuestro objetivo para esta tercera publicación del blog en la serie es presentar consejos y trucos más avanzados para permitirte depurar y solucionar problemas de tu código JavaScript de manera más efectiva. Específicamente, nos centraremos en tres áreas: mensajes mejorados a la consola, mejores formas de establecer puntos de interrupción usando condiciones especificadas en tiempo de ejecución, y una forma más eficiente de avanzar paso a paso a través de los puntos de interrupción en la pestaña Sources con un método llamado blackboxing.Parte 1: Console.table<\/STRONG><\/SPAN>

Console.log es nuestra función principal para depuración, pero la salida de esta función puede ser un poco difícil de leer (especialmente cuando se visualizan muchos datos). Una forma de mejorar nuestros mensajes en el registro de la consola y ver los datos más fácilmente es mostrar una lista de objetos como una tabla, lo cual se logra usando la función console.table <\/STRONG>. Esta función toma un argumento obligatorio, que debe ser un array u objeto, y un parámetro adicional opcional. Cada elemento del array es una fila en la tabla.

Veamos el ejemplo Console Table<\/A><\/STRONG>.

1. Abre las Chrome Developer Tools usando las teclas rápidas (Windows: Control + Shift + I, y Mac: Command + Option + I), o navegando al panel superior derecho del navegador, haciendo clic en los tres puntos verticales grises y eligiendo "More tools" > "Developer tools".

2. Selecciona la pestaña console.

3. Haz clic en "Perform Query" en la aplicación de ejemplo. Esto realiza una tarea de consulta para ver todos los condados en Connecticut. El código usa console.table<\/STRONG> para imprimir los resultados en una tabla como se muestra a continuación.<\/A>

console.table<\/P><\/DIV>

Cada fila en la tabla muestra todos los atributos para un condado específico. A continuación, usamos console.log<\/STRONG> para comparar console.log y console.table. Esta función imprimirá una línea con un array de objetos.

<\/A>

console.log<\/P><\/DIV>

Una vez que expandimos el array, podemos ver los objetos en una lista.

<\/A>

console.log expandido<\/P><\/DIV>

Para ver los atributos, debemos expandir los objetos en la lista.

<\/A>

console.log expandido con atributos<\/P><\/DIV>Mientras que podemos acceder a los atributos de una característica cuando usamos console.log, podemos ver todos los atributos para todas las características a la vez usando console.table<\/>! La imagen a continuación muestra ambas funciones en la ventana de la consola.

<\/>A

"==".

<\/A>

Expresión de punto de interrupción<\/P><\/DIV>

5. Si ingresamos "test" para el "Contact:" y hacemos clic en "Update incident info", se alcanzará el punto de interrupción y la aplicación se pausará.

<\/A>

Condición cumplida<\/P><\/DIV>

Estos puntos de interrupción condicionales pueden ser útiles para probar cuando quieres asegurarte de que los datos se envían correctamente al servidor, o para el manejo de errores cuando quieres que la aplicación se pause para que puedas inspeccionar el(los) objeto(s) de interés en lugar de dejar que tu código de manejo de errores tome el control.Parte 3: Blackboxing<\/STRONG><\/SPAN>

Aunque establecer puntos de interrupción es una excelente manera de familiarizarse y recorrer tu código, este proceso ocasionalmente puede sacarte del archivo de interés y llevarte a otro archivo fuente o a una biblioteca JavaScript de terceros.

Por ejemplo, veamos un ejemplo.

1. Abre la muestra

Query SceneLayerView sample<\/A> <\/STRONG> para seguir (esto es similar a la muestra encontrada en developers.arcgis.com<\/A>).

2. Abre las Chrome Developer Tools, selecciona la pestaña Sources y haz clic izquierdo en la línea 49 para establecer un punto de interrupción.

3. Actualiza la página para que el depurador se pause en la línea 49. Desde aquí, aparece un mensaje "Paused in debugger" (Pausado en el depurador) (junto a un botón "Play" y un botón "Step Over"). Mira abajo para una captura de pantalla.

<\/A>

Pausado en la línea 49<\/P><\/DIV>

4. Si haces clic en el botón "Step Over" unas cinco veces, sales del archivo principal .html y entras al archivo init.js del ArcGIS API for JavaScript. Puedes explorar el archivo init.js, pero queremos centrarnos en el código que escribimos. Haz clic en el botón "Play" para volver a casa seguro.

<\/A>

Depurador en el archivo init.js<\/P><\/DIV>

Entra blackboxing para salvar el día. Blackboxing es un método para excluir archivos y bibliotecas del depurador, para que tu enfoque permanezca en tu(s) archivo(s) de interés. Veamos cómo podemos blackboxear la biblioteca ArcGIS API for JavaScript para que solo podamos avanzar paso a paso por el archivo principal de interés.

1. Con las Developer Tools abiertas, haz clic en los tres puntos verticales en el panel derecho extremo de la ventana y selecciona Settings.

<\/A>

Configuración de Developer Tool<\/P><\/DIV>

<\/A>

Configuración de Developer Tool<\/P><\/DIV>

2. En el lado izquierdo de la ventana, haz clic en "Blackboxing" para abrir los "Framework Blackbox Patterns."

Blackboxing

3. Haz clic en el botón “Add pattern…” e ingresa este patrón de framework: js.arcgis.com.*\.jsDepuración con el depurador de JavaScript (2017)Archivos fuente de JavaScript en BlackboxÚnete a nosotros la próxima vez mientras continuamos profundizando cada vez más en las Herramientas para Desarrolladores y aprendemos algunas lecciones valiosas. ¡Feliz depuración!</span>Artemis F. y Noah S. - Soporte SDK de Esri

AndresCastillo

Here is a blog I wrote that is along the same lines of teaching techniques on how to approach web development:

How to customize a web app using JavaScript, the DOM, Chrome DevTools, and Chrome's debugger
Blog Post created by Andres Castillo on Jul 24, 2019
https://community.esri.com/people/andrescastillo08/blog/2019/07/24/how-to-customize-an-app-using-javascript-the-dom-chrome-devtools-and-chromes-debugger