Consejos para Depurar JavaScript Parte I – Google Chrome y la pestaña Network

Noah Sager

<\/HEAD>

Esta publicación del blog es la primera de una serie de consejos y trucos de depuración para ayudarte en tu camino. <\/EM>

Es una jungla allá afuera. Y te guste o no, también es una jungla dentro de tu aplicación. Trabajar con los errores no es tan simple como revisar lentamente líneas de código; se necesitan herramientas dedicadas y una curiosidad sincera. En la jungla, la mamá gorila tiene poco más en qué confiar que su coraje y su astucia. Pero como desarrollador web, tienes una variedad de herramientas a tu disposición.  Hoy, vamos a echar un vistazo a la pestaña Network dentro de las Developer Tools de Google Chrome.

Acceder a las Chrome Developer Tools es fácil usando las teclas rápidas (Control + Shift + I) o navegando a la parte superior derecha del navegador, haciendo clic en las tres líneas horizontales grises, luego eligiendo "Tools", luego "Developer tools".<\/A>

A diferencia de la mamá gorila, Chrome Developer Tools se preocupa por ti y tus aplicaciones. Le gustas. Piensa que eres un desarrollador realmente bueno. Pero necesitas hacer algo de trabajo. Es algo así como Esri Support. Nos gustas. Queremos ayudarte, y estaremos ahí cuando des el primer paso.

Mientras las developer tools están abiertas, puedes limpiar la caché del navegador simplemente haciendo clic y manteniendo presionado el botón de recarga.  Esta acción te presenta tres opciones diferentes: Normal Reload<\/STRONG>, Hard Reload<\/STRONG>, y Empty Cache and Hard Reload<\/STRONG>. Estas opciones te ayudan a asegurar que los cambios en tu código se reflejen en el navegador. De lo contrario, la aplicación puede cargar el código antiguo desde la caché del navegador. Cuando me siento triste, un par de Hard Reloads siempre funciona. Si es cerca del final del día, puede que quieras vaciar primero la caché. <\/A>

Ahora que has limpiado la caché y recargado tu aplicación, podemos continuar.  Como las developer tools en otros navegadores principales, como Firebug<\/A>, y herramientas independientes como Fiddler<\/A>, la pestaña Network en Chrome registra solicitudes individuales generadas desde la pestaña actualmente abierta en el navegador.  Típicamente, se cargan varios recursos cuando se actualiza una página y se ejecutan solicitudes adicionales mientras el usuario interactúa con la página.

La pestaña Network es mi favorita personal. Siempre abro esta pestaña antes de ejecutar cualquier aplicación de prueba. Aquí podemos enfocarnos en inspeccionar el tráfico web para descubrir cómo la aplicación interactúa con servicios en línea. Si hay un servicio de impresión en la aplicación, puedes obtener el webmap como JSON en la pestaña network, y comparar sus parámetros contra el REST API para ver si el JSON es válido. También podrías ver todos los recursos que consume la aplicación, y dónde están ubicados esos recursos.

Si algo ha salido visiblemente mal en la aplicación, lo primero que hay que buscar son solicitudes que hayan fallado completamente.  Los errores más comunes son un 403, indicando que no tienes permiso para acceder al recurso, y 404, que significa que no se puede encontrar el recurso.  En mi propia experiencia, los errores 404 son causados más a menudo por un error tipográfico que introduje cuando escribí la ubicación de un servicio, porque escribo código como una mamá gorila.<\/P>

<\/A><\/P>

Esta captura de pantalla muestra la pestaña Network abierta con un error 404 (Not Found) en el tráfico de red respecto a un archivo .css faltante en el servidor llamado localhost (puse el .css en la carpeta equivocada)<\/EM><\/P>
En esta entrega, aprendimos cómo acceder y usar la pestaña Network dentro de las Chrome Developer tools para revelar las solicitudes individuales lanzadas por una aplicación, y su éxito o fracaso. Esta información puede facilitar enormemente la depuración de una aplicación cuando hay poca otra información sobre errores disponible al indicar al desarrollador qué está ocurriendo detrás de escena y en qué áreas del código poner atención. Esto concluye la primera parte de una serie multipartes sobre Consejos para Depurar JavaScript. Únete a nosotros la próxima vez cuando profundicemos aún más en la pestaña Network con un ejemplo del mundo real. ¡Feliz depuración!<\/P><\/BODY><\/HTML>

AndresCastillo

Noah Sager‌

It was amazing meeting you at the UC!

You are even cooler than your blogs already make you look.

I hope you don't mind.......I want to share a blog I wrote since it 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