Consejos para depurar JavaScript Parte II 6 Google Chrome y la pestaF1a Consola

Noah Sager

<\/HEAD>Esta publicación del blog es la segunda de una serie de consejos y trucos para depurar JavaScript que te ayudarán en tu camino. Consulta Consejos para depurar JavaScript Parte I 6 Google Chrome y la pesta Red<\/A><\/STRONG><\/EM> para nuestro primer segmento.<\/EM>

La parte ms disfrutable de cualquier tarea de programaci es justo al principio, cuando te sientas con un montn de herramientas y recursos y comienzas a golpear fragmentos crudos de cigo. La parte ms difil llega cuando intentas lanzar la aplicaci3n, solo para ver c3mo ese cigo escrito con cuidado se deshace en varias noches tarde mirando una pantalla de computadora. Sin embargo, no todo est perdido, ya que tenemos una excelente recomendaci3n para ti, que es el tema de este blog: la pesta Console dentro de las Developer Tools de tu navegador favorito.

Si te sientes molesto o emocional, la pesta Console es la opci3n perfecta para ti. Quiz3n alguien en tu familia est pasando por un momento difcil y podra necesitar un poco de alegra. Considera la pesta Console de Google Chrome (opciones sin gluten disponibles). Los usuarios que gustan de la pesta Console tambin podran disfrutar del ArcGIS API for JavaScript.<\/A>

Obviamente no entiendo los homgrafos<\/P><\/DIV>

Como escribimos en la Parte I, acceder a las Developer Tools de Chrome es fcil usando teclas de acceso rpido (Control + Shift + I) o navegando a la esquina superior derecha del navegador, haciendo clic en el men hamburguesa y eligiendo "More Tools", luego "Developer tools".

Una vez que las Developer Tools estn abiertas (otras Developer Tools estn disponibles en otros navegadores), hay varias pestaas accesibles para ti. Aqu nos centraremos en la Console. Si quieres abrir directamente la pestaa Console en Chrome Developer Tools, usa este atajo de teclado: Control + Shift + J (la "J" significa jocular). Para ms consejos interesantes, consulta la documentacin oficial de Google sobre

Chrome DevTools: Using the console<\/A><\/STRONG>.

La Console se usa para dos propósitos: 1) mostrar informacin registrada desde el JavaScript de una aplicacin (usualmente durante el desarrollo), y 2) interrogar objetos y ejecutar JavaScript interactivamente. En este blog, veremos ambos tipos de ejemplos y elaboraremos algunos consejos adicionales que usamos en Soporte Tcnico.

Lo primero que podemos hacer es agregar algunas sentencias "console.log" dentro de nuestra aplicacin. Tomaremos un ejemplo modificado, alojado en GitHub, que puedes encontrar aqu: Aplicacin de ejemplo con Console<\/A><\/STRONG>. Si quieres, sigue junto a nosotros desde casa.

En las lneas 60-62, y nuevamente en la lnea 66, hemos agregado algunas sentencias "console.log" para mostrar informacin sobre nuestra Feature Layer. Nuestro caso de uso es que estamos creando una aplicacin web de mapeo y durante nuestras pruebas queremos asegurarnos que los datos que consumimos desde ArcGIS Online son los correctos para mostrar en el mapa. Para esto imprimimos algunos datos seleccionados sobre la Feature Layer: el ttulo de la capa y la URL de la capa. Como no conozco la sintaxis para la propiedad URL, uso "URL" y "url" como se ve abajo.

<\/A>

Sentencias console.log en JavaScript<\/P><\/DIV>

Aqu tienes una captura de pantalla del resultado de las sentencias "console.log". Vemos la informacin relevante que esperábamos. Adems, nota que el resultado para "featureLayer.URL" es "undefined". Esto se debe a que los elementos en la consola distinguen maylculas y minlsculas. La propiedad vllida es "featureLayer.url", y las propiedades invllidas no generan error sino que devuelven undefined. Esto puede ser algo complicado de detectar, pero ms adelante en este blog veremos algunos consejos para tratar este tipo de problemas.

<\/A>

Salida en consola JavaScript desde console.log<\/P><\/DIV>

Con la Console todava abierta, intentemos ingresar los mismos valores de propiedad desde el cdigo:

featureLayer.title<\/>featureLayer.URL<\/>featureLayer.url<\/><\/><\/><\/><\/><\/>Observa que todas<\/> estas propiedades ahora devuelven un error, en lugar de un valor real (o incluso "undefined"). Esto se debe a que las variables locales ya no estn en alcance despus de inicializarse la app, as{ que ni siquiera se reconoce el objeto "featureLayer".  aqu{ tienes una captura del resultado de estas nuevas sentencias en consola.

Salida en consola JavaScript despu{es de cargar la app pausado, podemos volver a la pestaña Console y tratar de interrogar las propiedades de featureLayer nuevamente. Aquí vemos que tenemos el alcance adecuado para la variable y podemos ver la salida: Pausado en debugger 2

¿Genial, verdad?

Veamos otra opción, similar a "debugger". Volviendo a la pestaña Sources, observa los números de línea a la izquierda del código. Si hacemos clic izquierdo en un número de línea, podemos establecer un breakpoint, que tendrá el mismo efecto exacto que escribir "debugger" en el código. Haz clic izquierdo en las líneas 56, 62 y 66 en la misma aplicación, luego actualiza la aplicación. Breakpoint 1

La aplicación se pausa inmediatamente en el primer breakpoint. Ahora, podríamos volver a la pestaña Console e inspeccionar variables y propiedades a nuestro antojo. No solo eso, al hacer clic en la flecha curva a la derecha del botón Play en la parte superior de la pantalla, podemos avanzar paso a paso por nuestra aplicación y observar con emoción cómo se ejecuta el código paso a paso. O bien, podemos hacer clic en el botón Play en la parte superior de la pantalla y dejar que la aplicación se ejecute hasta completarse o hasta el siguiente breakpoint. Breakpoint 2

Y otro clic en el botón Play nos lleva al siguiente breakpoint. Breakpoint 3

El objetivo de este blog es resaltar la utilidad y funcionalidad de la Console, pero también queremos señalar otro uso de establecer breakpoints aquí. Los breakpoints permiten al desarrollador ver el orden en que se ejecuta el código asíncrono, cómo se ejecutan las funciones y qué partes se omiten o fallan. Para más información sobre consejos para depurar aplicaciones JavaScript, aquí hay un par de recursos adicionales de los últimos años:Depuración avanzada con JavaScript (2009)Depuración de JavaScript con breakpoints en Chrome DevTools (2016)Consejos para depurar JavaScript Parte I (2014)
En esta entrega, aprendimos cómo acceder y usar la pestaña Console dentro de las herramientas para desarrolladores de Chrome para revelar las propiedades y valores de variables y objetos en nuestro código JavaScript. Esta información puede facilitar enormemente la depuración y codificación de una aplicación web. Esto concluye la parte dos de una serie multipartes sobre Consejos para depurar JavaScript. Únete a nosotros la próxima vez cuando profundicemos aún más en algunas Developer Tools, y todos recibamos aumentos. ¡Feliz depuración!Noah S. y John G. - Servicios de Soporte SDK

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