Aprenda a depurar JavaScript utilizando el depurador DevTools del navegador
La depuración es una de esas habilidades que son fundamentales para la actividad de un programador.
A veces hacemos nuestro mejor trabajo, pero el programa no funciona correctamente, por ejemplo, se bloquea, es lento o imprime información incorrecta.
¿Qué haces cuando un programa que escribiste no se comporta como esperabas?
Empieza a depurarlo.
Averiguar dónde podría estar el error
El primer paso es siempre observar qué está sucediendo y tratar de determinar de dónde proviene el problema. ¿Es un problema del entorno? ¿Es un problema de la entrada que le diste al programa? ¿Es un fallo puntual debido a un uso excesivo de memoria? ¿O sucede cada vez que lo ejecutas?
Toda esa información es clave para empezar a avanzar en la dirección correcta a la hora de resolver un problema.
Una vez que tengas algún tipo de idea de dónde proviene el error, puedes comenzar a verificar esa parte específica del código.
Leer el código
La forma más sencilla de depurar, al menos en términos de herramientas, es leer el código que escribiste. En voz alta. Hay algo mágico en escuchar nuestra propia voz que no sucede cuando lees en silencio.
Muchas veces encontré problemas de esta manera.
Usando la consola
Si leer el código no le revela nada, el siguiente paso lógico es comenzar a agregar algunas líneas a su código que puedan arrojar algo de luz.
En el código frontend de JavaScript, lo que normalmente harás es usar alert()
y console.log
(y sus geniales amigos).
Considere esta línea:
const a = calculateA()const b = calculateB()const result = a + b
De alguna manera el resultado no se calcula correctamente, por lo que puedes comenzar sumando alert(a)
y alert(b)
antes de calcular el resultado, y el navegador abrirá dos paneles de alerta cuando ejecute el código.
const a = calculateA()const b = calculateB()alert(a)alert(b)const result = a + b
Esto funciona bien si lo que estás pasando alert()
es una cadena o un número. Tan pronto como tienes una matriz o un objeto, las cosas comienzan a complicarse demasiado alert()
y puedes usar la API de consola . Comenzando con console.log()
:
const a = calculateA()const b = calculateB()console.log(a)console.log(b)const result = a + b
El valor se imprime en la consola de JavaScript de las herramientas para desarrolladores del navegador. Para mayor comodidad, explico la depuración en Chrome DevTools aquí, pero los conceptos generales se aplican a todos los navegadores, con algunas diferencias en términos de funciones admitidas.
Vea la descripción detallada de Chrome DevTools
Las herramientas de desarrollo de Chrome
El resultado de las console.log()
llamadas se imprime en la consola de JavaScript. Se trata de una herramienta más o menos común en todos los navegadores:
La herramienta es muy potente y te permite imprimir objetos complejos o matrices y puedes inspeccionar cada propiedad de ellos.
En la publicación de la API de la consola puedes ver todas las opciones y detalles de cómo trabajar con ella, por lo que no explicaré todos los detalles aquí.
El depurador
El depurador es la herramienta más poderosa en las herramientas para desarrolladores del navegador y se encuentra en el panel Fuentes :
La parte superior de la pantalla muestra el navegador de archivos.
Puedes seleccionar cualquier archivo e inspeccionarlo a la derecha. Esto es muy importante para establecer puntos de interrupción, como veremos más adelante.
La parte inferior es el depurador real.
Puntos de interrupción
Cuando el navegador carga una página, el código JavaScript se ejecuta hasta que se alcanza un punto de interrupción.
En este punto se detiene la ejecución y puedes inspeccionar todo acerca de tu programa en ejecución.
Puede comprobar los valores de las variables y reanudar la ejecución del programa una línea a la vez. Significado de los nombres
Pero primero, ¿qué es un punto de interrupción? En su forma más simple, un punto de interrupción es una breakpoint
instrucción que se coloca en el código. Cuando el navegador la encuentra, se detiene.
Esta es una buena opción durante el desarrollo. Otra opción es abrir el archivo en el panel Fuentes y hacer clic en el número de la línea en la que desea agregar un punto de interrupción:
Al hacer clic nuevamente en el punto de interrupción, se eliminará.
Después de agregar un punto de interrupción, puede volver a cargar la página y el código se detendrá en ese punto de ejecución cuando encuentre el punto de interrupción.
A medida que agrega el punto de interrupción, puede ver en el panel Puntos de interrupción que form.js
la línea 7
contiene el punto de interrupción. Puede ver todos los puntos de interrupción allí y deshabilitarlos temporalmente.
También existen otros tipos de puntos de interrupción:
- Puntos de interrupción de búsqueda/XHR : se activan cuando se envía cualquier solicitud de red
- Puntos de interrupción DOM : se activan cuando cambia un elemento DOM
- Puntos de interrupción del detector de eventos : se activan cuando ocurre algún evento, como un clic del mouse
Alcance
En este ejemplo, establecí un punto de interrupción dentro de un detector de eventos, por lo que tuve que enviar un formulario para activarlo:
Ahora se imprimen todas las variables que están en el ámbito, con sus respectivos valores. Puedes editar esas variables haciendo doble clic en ellas.
Observar variables y expresiones
Justo al lado del panel Alcance se encuentra el panel Vigilancia .
Tiene un +
botón que puedes usar para agregar cualquier expresión. Por ejemplo, si agregas , name
se imprimirá el name
valor de la variable Flavio
. En el ejemplo, puedes agregar name.toUpperCase()
y se imprimirá FLAVIO
:
Reanudar la ejecución
Ahora todos los scripts están detenidos porque el punto de interrupción detuvo la ejecución.
Hay un conjunto de botones encima del banner “Pausado en punto de interrupción” que le permiten alterar este estado.
El primero es de color azul. Al hacer clic en él se reanuda la ejecución normal del script.
El segundo botón es pasar a otra línea y reanuda la ejecución hasta la siguiente línea y se detiene nuevamente.
El siguiente botón realiza un paso en la operación: entra en la función que se está ejecutando, lo que le permite acceder a los detalles de la misma.
Salir es lo opuesto: vuelve a la función externa que llama a ésta.
Éstas son las principales formas de controlar el flujo durante la depuración.
Editar scripts
Desde esta pantalla de herramientas de desarrollo puedes editar cualquier script, incluso cuando la ejecución del script está detenida. Solo edita el archivo y presiona cmd-S en Mac o ctrl-S en Windows/Linux.
Por supuesto, los cambios no se conservan en el disco a menos que trabajes localmente y configures espacios de trabajo en devtools, un tema más avanzado.
Inspeccionar la pila de llamadas
La pila de llamadas es ideal para ver cuántos niveles de funciones has avanzado en el código JavaScript. También te permite ascender en la pila haciendo clic en cada nombre de función:
Guiones de caja negra
Muchas veces trabajas con bibliotecas en las que no quieres “intervenir”, confías en ellas y no quieres ver su código en la pila de llamadas, por ejemplo. Como en el caso anterior para validator.min.js
, que utilizo para la validación de correo electrónico.
Confío en que funcione bien, así que puedo hacer clic derecho en la pila de llamadas y presionar Script de Blackbox . A partir de ese momento, es imposible ingresar a este código de script y puedes trabajar felizmente solo en tu propio código de aplicación.
Utilice las herramientas de desarrollo del navegador para depurar Node.js
Dado que Node.js está construido sobre el mismo motor de Chrome, v8 , puedes vincular los dos y usar Chrome DevTools para inspeccionar la ejecución de aplicaciones Node.js.
Abre tu terminal y ejecuta
node --inspect
Luego, en Chrome, escribe esta URL: about://inspect
.
Haga clic en el enlace Abrir DevTools dedicado para Node junto al destino Node y tendrá acceso a Node.js en DevTools del navegador:
Asegúrate de hacer clic en eso y no en el enlace de inspección que aparece a continuación, ya que la herramienta se reconecta automáticamente a la instancia de Node.js cuando la reiniciamos, ¡muy útil!
Tips para principiantes de JavaScript
Tal vez te puede interesar:
- Cómo generar un número aleatorio entre dos números en JavaScript
- Cómo esperar el evento DOM listo en JavaScript simple
- Cómo determinar si una fecha es hoy en JavaScript
- Cómo contar el número de propiedades en un objeto JavaScript
La guía definitiva para depurar JavaScript
Averiguar dónde podría estar el errorLeer el códigoUsando la consolaLas herramientas de desarrollo de ChromeEl depuradorPuntos de interrupciónAlcanceObserv
programar
es
https://aprendeprogramando.es/static/images/programar-la-guia-definitiva-para-depurar-javascript-1897-0.jpg
2024-10-29
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente