Cómo depurar JavaScript

Kayce Basques

Sofia Emelianova

En este instructivo, aprenderás el flujo de trabajo básico para depurar cualquier problema de JavaScript en Herramientas para desarrolladores. Continúa leyendo o mira la versión en video de este instructivo.

Reproduce el error.

El primer paso para la depuración siempre es encontrar una serie de acciones que reproduzcan un error de manera coherente.

1. Abre esta demostración en una pestaña nueva.
2. Ingresa 5 en el cuadro Número 1.
3. Ingresa 1 en el cuadro Número 2.
4. Haz clic en Add Number 1 and Number 2. La etiqueta debajo del botón dice 5 + 1 = 51. El resultado debería ser 6. Este es el error que vas a corregir.

En este ejemplo, el resultado de 5 + 1 es 51. Debería ser 6.

Familiarízate con la IU del panel Sources

Las Herramientas para desarrolladores proporcionan muchas herramientas diferentes para distintas tareas, como cambiar el CSS, generar perfiles del rendimiento de la carga de la página y supervisar las solicitudes de red. En el panel Fuentes, depuras JavaScript.

1. Abre Herramientas para desarrolladores y navega al panel Fuentes.

   

El panel Fuentes (Sources) tiene tres secciones:

1. La pestaña Page con el árbol de archivos. Aquí se incluyen todos los archivos que solicita la página.
2. La sección Editor de código Después de seleccionar un archivo en la pestaña Página, el contenido de ese archivo se muestra aquí.

3. La sección Debugger Diversas herramientas para inspeccionar el JavaScript de la página.

   Si la ventana de Herramientas para desarrolladores es ancha, de manera predeterminada, el elemento Debugger se encuentra a la derecha del Editor de código. En este caso, las pestañas Alcance y Mirar unen Interrupciones, Pila de llamadas y otras como secciones que se pueden contraer.

Pausa el código con un punto de interrupción

Un método común para depurar un problema como este es insertar muchas instrucciones console.log() en el código para inspeccionar los valores a medida que se ejecuta la secuencia de comandos. Por ejemplo:

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

El método console.log() puede realizar el trabajo, pero los puntos de interrupción pueden hacerlo más rápido. Un punto de interrupción te permite pausar el código en medio de la ejecución y examinar todos los valores en ese momento. Los puntos de interrupción tienen algunas ventajas sobre el método console.log():

• Con console.log(), debes abrir manualmente el código fuente, buscar el código relevante, insertar las sentencias console.log() y, luego, volver a cargar la página para ver los mensajes en Console. Con los puntos de interrupción, puedes pausar en el código relevante sin siquiera saber cómo está estructurado.
• En las sentencias console.log(), debes especificar de forma explícita cada valor que deseas inspeccionar. Con los puntos de interrupción, Herramientas para desarrolladores te muestra los valores de todas las variables en ese momento. A veces, hay variables que afectan a tu código que ni siquiera conoces.

En resumen, los puntos de interrupción pueden ayudarte a encontrar y corregir errores más rápido que con el método console.log().

Si retrocedes y piensas en cómo funciona la app, puedes suponer que la suma incorrecta (5 + 1 = 51) se calcula en el objeto de escucha de eventos click asociado al botón Add Number 1 and Number 2. Por lo tanto, te recomendamos que pauses el código cerca del momento en que se ejecuta el objeto de escucha click. Los Event Listener Breakpoints te permiten hacer exactamente eso:

1. En la sección Debugger, haz clic en Event Listener Breakpoints para expandir la sección. Las Herramientas para desarrolladores muestran una lista de categorías de eventos expandibles, como Animación y Portapapeles.
2. Junto a la categoría de evento Mouse, haz clic en arrow_right Expandir. Las Herramientas para desarrolladores muestran una lista de eventos del mouse, como clic y mousedown. Cada evento tiene una casilla de verificación junto a él.

3. Marca la casilla de verificación de clic. Las Herramientas para desarrolladores ahora están configuradas para que se pausen automáticamente cuando se ejecute cualquier objeto de escucha de eventos click.

   

4. De regreso en la demostración, vuelve a hacer clic en Add Number 1 and Number 2. Las Herramientas para desarrolladores pausan la demostración y destacan una línea de código en el panel Fuentes. Las Herramientas para desarrolladores deben pausarse en esta línea de código:

   function onClick() {
   

   Si hiciste la pausa en una línea de código diferente, presiona Reanudar Reanudar ejecución de la secuencia de comandos hasta hacer la pausa en la línea correcta.

Los puntos de interrupción de objeto de escucha de eventos son solo uno de los muchos tipos de puntos de interrupción disponibles en Herramientas para desarrolladores. Vale la pena explorar todos los tipos diferentes, ya que cada uno te ayuda a depurar diferentes situaciones lo más rápido posible. Consulta Puntos de interrupción para pausar el código para obtener información sobre cuándo y cómo usar cada tipo.

Revisa el código

Una causa común de errores es que una secuencia de comandos se ejecute en el orden incorrecto. Analizar el código te permite analizar su ejecución, una línea a la vez, y determinar exactamente dónde se está ejecutando en un orden diferente del esperado. Probar ahora:

1. En el panel Sources de Herramientas para desarrolladores, haz clic en step_into Step into next function call para recorrer la ejecución de la función onClick(), una línea a la vez. Herramientas para desarrolladores destaca la siguiente línea de código:

   if (inputsAreEmpty()) {
   

2. Haz clic en step_over Step over next function call.

   Las Herramientas para desarrolladores ejecutan inputsAreEmpty() sin recorrerla. Observa cómo Herramientas para desarrolladores omite algunas líneas de código. Esto se debe a que inputsAreEmpty() se evaluó como falso, por lo que no se ejecutó el bloque de código de la sentencia if.

Esa es la idea básica de recorrer el código. Si observas el código en get-started.js, podrás ver que el error probablemente esté en algún lugar de la función updateLabel(). En lugar de recorrer cada línea de código, puedes usar otro tipo de punto de interrupción para pausar el código más cerca de la ubicación probable del error.

Cómo establecer un punto de interrupción de línea de código

Los puntos de interrupción de línea de código son el tipo más común. Cuando tengas una línea de código específica en la que quieras pausar, usa un punto de interrupción de línea de código:

1. Observa la última línea de código en updateLabel():

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. A la izquierda del código puedes ver el número de línea correspondiente a esta línea de código en particular, que es 32. Haz clic en 32. Las Herramientas para desarrolladores colocan un ícono azul sobre 32. Esto significa que hay un punto de interrupción de línea de código en esta línea. Las Herramientas para desarrolladores ahora siempre hacen una pausa antes de que se ejecute esta línea de código.

3. Haz clic en Reanudar Reanudar ejecución de la secuencia de comandos. La secuencia de comandos se sigue ejecutando hasta llegar a la línea 32. En las líneas 29, 30 y 31, Herramientas para desarrolladores muestra los valores de addend1, addend2 y sum intercalados junto a sus declaraciones.

En este ejemplo, Herramientas para desarrolladores hace una pausa en el punto de interrupción de línea de código en la línea 32.

Verifica los valores de las variables

Los valores de addend1, addend2 y sum parecen sospechosos. Están entre comillas, lo que significa que son cadenas. Esta es una buena hipótesis para explicar la causa del error. Ahora es el momento de recopilar más información. Herramientas para desarrolladores brinda muchas herramientas para examinar valores de variables.

Método 1: Inspecciona el alcance

Cuando estás pausado en una línea de código, la pestaña Scope te muestra qué variables locales y globales se definen en este momento de la ejecución, junto con el valor de cada variable. También muestra variables de cierre, cuando corresponde. Cuando no estás haciendo una pausa en una línea de código, la pestaña Alcance está vacía.

Haz doble clic en el valor de la variable para editarlo.

Método 2: Expresiones de observación

La pestaña Watch te permite supervisar los valores de las variables a lo largo del tiempo. Watch no se limita solo a las variables. Puedes almacenar cualquier expresión válida de JavaScript en la pestaña Watch.

Probar ahora:

1. Haz clic en la pestaña Mirar.
2. Haz clic en add Agregar expresión de observación.
3. Tipo typeof sum.
4. Presiona Intro. Las Herramientas para desarrolladores muestran typeof sum: "string". El valor que aparece a la derecha de los dos puntos es el resultado de la expresión.

En esta captura de pantalla, se muestra la pestaña Watch (en la parte inferior derecha) después de crear la expresión de observación typeof sum.

Como sospechamos, sum se evalúa como una cadena, cuando debería ser un número. Acabas de confirmar que esa es la causa del error.

Método 3: La consola

Además de ver los mensajes de console.log(), también puedes usar la consola para evaluar instrucciones arbitrarias de JavaScript. En términos de depuración, puedes usar la consola para probar posibles correcciones de errores. Probar ahora:

1. Si no tienes abierto el panel lateral de la consola, presiona Escape para abrirlo. Se abrirá en la parte inferior de la ventana de Herramientas para desarrolladores.
2. En la consola, escribe parseInt(addend1) + parseInt(addend2). Esta sentencia funciona porque estás pausado en una línea de código en la que addend1 y addend2 están dentro del alcance.
3. Presiona Intro. Herramientas para desarrolladores evalúa la sentencia y, luego, imprime 6, que es el resultado que esperas que produzca la demostración.

En esta captura de pantalla, se muestra el panel lateral Console después de evaluar parseInt(addend1) + parseInt(addend2).

Aplicar una corrección

Encontraste una solución para el error. Todo lo que queda es probar la corrección. Para ello, edita el código y vuelve a ejecutar la demostración. No necesitas salir de Herramientas para desarrolladores para aplicar la corrección. Puedes editar el código JavaScript directamente en la IU de Herramientas para desarrolladores. Probar ahora:

1. Haz clic en Reanudar Reanudar ejecución de la secuencia de comandos.
2. En el editor de código, reemplaza la línea 31, var sum = addend1 + addend2, por var sum = parseInt(addend1) + parseInt(addend2).
3. Presiona Comando + S (Mac) o Control + S (Windows y Linux) para guardar los cambios.
4. Haz clic en label_off Desactivar interrupciones. Su color cambia a azul para indicar que está activo. Mientras esté configurado este parámetro, Herramientas para desarrolladores ignorará los puntos de interrupción que hayas establecido.
5. Prueba la demostración con diferentes valores. Ahora los cálculos se realizan de manera correcta.

Próximos pasos

En este instructivo, solo se mostraron dos formas de establecer puntos de interrupción. Herramientas para desarrolladores ofrece muchas otras maneras, como las siguientes:

• Puntos de interrupción condicionales que solo se activan cuando la condición que proporciones sea verdadera
• Puntos de interrupción en excepciones detectadas y no detectadas
• Puntos de interrupción XHR que se activan cuando la URL solicitada coincide con una subcadena que proporciones

Consulta Puntos de interrupción para pausar el código para obtener información sobre cuándo y cómo usar cada tipo.

Hay algunos controles para recorrer el código que no se explicaron en este instructivo. Consulta Cómo pasar por encima de la línea de código para obtener más información.