Comenzar a depurar JavaScript en Chrome DevTools

En este instructivo se describe el flujo de trabajo básico para depurar problemas de JavaScript en DevTools. Sigue leyendo o mira la versión en video del instructivo, a continuación.

Paso 1: Reproduce el error

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

  1. Haz clic en Open Demo. La demostración se abre en una nueva pestaña.

  2. Ingresa 5 en el cuadro de texto Number 1.

  3. Ingresa 1 en el cuadro de texto Number 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.

    El resultado de 5 + 1 es 51. Debería ser 6.
    Figura 1. El resultado de 5 + 1 es 51. Debería ser 6.

Paso 2: Familiarízate con la IU del panel Sources

DevTools proporciona muchas herramientas diferentes para distintas tareas, como cambio de CSS, generación de perfiles de rendimiento de carga de páginas y supervisión de solicitudes de red. El panel Sources es donde depuras JavaScript.

  1. Para abrir DevTools, presiona Command+Option+I (Mac) o Ctrl+Mayús+I (Windows, Linux). Este acceso directo abre el panel Console.

    El panel Console.
    Figura 2. El panel Console

  2. Haz clic en la pestaña Sources.

    El panel Sources.
    Figura 3. El panel Sources

La IU del panel Sources tiene 3 partes:

Las 3 partes de la IU del panel Sources.
Figura 4. Las 3 partes de la IU del panel Sources
  1. Panel File Navigator. Aquí se muestran todos los archivos que solicita la página.
  2. Panel Code Editor. Después de seleccionar un archivo en el panel File Navigator, el contenido del archivo se muestra aquí.
  3. Panel JavaScript Debugging. Diversas herramientas para inspeccionar el JavaScript de la página. Si la ventana de DevTools es ancha, este panel aparece a la derecha del panel Code Editor.

Paso 3: 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 de 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 de console.log() es útil, pero los puntos de interrupción pueden ser más rápidos. Un punto de interrupción te permite pausar el código durante la ejecución y examinar todos los valores en ese momento específico. Los puntos de interrupción tienen algunas ventajas por sobre el método de console.log():

  • Con console.log(), debes abrir manualmente el código fuente, encontrar el código relevante, insertar las instrucciones de console.log() y volver a cargar la página para ver los mensajes en la consola. Con los puntos de interrupción, puedes realizar una pausa en el código relevante sin siquiera saber cómo está estructurado.
  • En las instrucciones de console.log() debes especificar explícitamente cada valor que deseas inspeccionar. Con los puntos de interrupción, DevTools te muestra los valores de todas las variables en ese momento específico. A veces hay variables que afectan el código que ni siquiera sabes que existen.

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

Si piensas cómo funciona la app, puedes darte cuenta intuitivamente que se calcula la suma incorrecta (5 + 1 = 51) en el receptor de eventos click que está asociado con el botón Add Number 1 and Number 2. Por lo tanto, es probable que te convenga pausar el código aproximadamente en el momento de la ejecución del receptor click. Event Listener Breakpoints te permite hacer exactamente eso:

  1. En el panel JavaScript Debugging, haz clic en Event Listener Breakpoints para expandir la sección. DevTools muestra una lista de categorías de eventos expandibles, como Animation y Clipboard.
  2. Junto a la categoría de evento Mouse, haz clic en Expand ícono
   Expand. DevTools muestra una lista de eventos de mouse, como click y mousedown. Cada evento tiene una casilla de verificación a su lado.
  3. Marca la casilla de verificación click. DevTools ahora está configurado para hacer una pausa automáticamente cuando se ejecute cualquier receptor de eventos click.

    La casilla de verificación click está habilitada.
    Figura 5. La casilla de verificación click está habilitada

  4. De regreso en la demostración, vuelve a hacer clic en Add Number 1 and Number 2. DevTools pausa la demostración y destaca una línea de código en el panel Sources. DevTools se debe pausar en esta línea de código:

    function onClick() {

    Si hiciste la pausa en una línea de código distinta, presiona Resume Script Execution Resume
 Script Execution hasta que el código quede pausado en la línea correcta.

Los puntos de interrupción de receptor de eventos son uno de varios tipos de puntos de interrupción disponibles en DevTools. Es útil memorizar todos los tipos que existen porque cada uno te ayudará a depurar distintas situaciones con la mayor rapidez posible. Consulta Puntos de interrupción para pausas en el código para obtener información sobre cuándo y cómo usar cada tipo.

Paso 4: Recorre el código

Una causa común de errores es que la secuencia de comandos se ejecute en el orden incorrecto. Si recorres el código, podrás seguir la ejecución, línea por línea, y conocer exactamente qué parte se ejecuta en un orden distinto del esperado. Inténtalo ahora:

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

    if (inputsAreEmpty()) {

  2. Haz clic en Step over next function call Step over next function
   call. DevTools ejecuta inputsAreEmpty() sin recorrerla. Observa que DevTools saltea unas líneas de código. Es porque inputsAreEmpty() se evaluó como false; por lo tanto, el bloque de código de la sentencia if no se ejecutó.

Estas son las nociones básicas para recorrer el código. Si observas el código de get-started.js, podrás ver que el error se encuentra, probablemente, 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.

Paso 5: Establece un punto de interrupción de línea de código

El tipo de punto de interrupción más común es el de línea de código. Cuando encuentres una determinada línea de código 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 de updateLabel():

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

  2. A la izquierda del código puedes ver el número de línea de esta línea de código específica, que es 32. Haz clic en 32. DevTools coloca un ícono azul sobre 32. Esto significa que la línea tiene un punto de interrupción de línea de código. DevTools ahora siempre hace una pausa antes de que se ejecute esta línea de código.

  3. Haz clic en Resume script execution Resume script
   execution. La secuencia de comandos se sigue ejecutando hasta llegar a la línea 32. En las líneas 29, 30 y 31, DevTools muestra los valores de addend1, addend2 y sum a la derecha del punto y coma de cada línea.

    DevTools pausa en el punto de interrupción de línea de código en la línea 32.
    Figura 6. DevTools pausa en el punto de interrupción de línea de código en la línea 32

Paso 6: Verifica los valores de las variables

Los valores de addend1, addend2 y sum se ven sospechosos. Están entre comillas, lo que significa que son strings. Esta es una buena hipótesis para explicar la causa del error. Ahora debes recopilar más información. DevTools proporciona muchas herramientas para examinar valores de variables.

Método 1: El panel Scope

Cuando el código está pausado en una línea, el panel Scope te muestra las variables locales y globales actualmente definidas, junto con el valor de cada variable. También muestra variables de cierre, cuando corresponde. Haz doble clic en un valor de variable para editarlo. Cuando el código no está pausado en una línea, el panel Scope está vacío.

Panel Scope.
Figura 7. Panel Scope

Método 2: Expresiones supervisadas

La pestaña Watch te permite supervisar los valores de las variables a lo largo del tiempo. Como su nombre lo indica, las expresiones supervisadas no se limitan a las variables. En una expresión supervisada, puedes almacenar cualquier expresión válida de JavaScript. Inténtalo ahora:

  1. Haz clic en la pestaña Watch.
  2. Haz clic en Add Expression Add Expression.
  3. Escribe typeof sum.
  4. Presiona Intro. DevTools muestra typeof sum: "string". El valor a la derecha de los dos puntos es el resultado de la expresión supervisada.

    Panel de expresiones supervisadas.
    Figura 8. Panel de expresiones supervisadas (abajo a la derecha) después de crear la expresión supervisada typeof sum. Si la ventana de DevTools es grande, el panel de expresiones supervisadas se encontrará a la derecha, arriba del panel Event Listener Breakpoints.

Como sospechábamos, sum se evalúa como una string en lugar de un número. Has confirmado que esta 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 correcciones potenciales de errores. Inténtalo ahora:

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

    El panel lateral Console después de evaluar parseInt(addend1) + parseInt(addend2).
    Figura 9. El panel lateral Console después de evaluar parseInt(addend1) + parseInt(addend2).

Paso 7: Soluciona el problema

Encontraste una solución para el error. Lo único que falta es probar la solución. Para hacerlo, edita el código y vuelve a ejecutar la demostración. No hace falta salir de DevTools para insertar la solución. Puedes editar el código JavaScript directamente en la IU de DevTools. Inténtalo ahora:

  1. Haz clic en Resume script execution Resume script
   execution.
  2. En Code Editor, reemplaza la línea 31, var sum = addend1 + addend2, con var sum = parseInt(addend1) + parseInt(addend2).
  3. Presiona Command+S (Mac) o Ctrl+S (Windows, Linux) para guardar el cambio.
  4. Haz clic en Deactivate breakpoints Deactivate
   breakpoints. Cambia a azul para indicar que está activo. Mientras esté configurado así, DevTools ignorará los puntos de interrupción que hayas establecido.
  5. Prueba la demostración con distintos valores. Ahora los cálculos se realizan de manera correcta.

Advertencia: Este flujo de trabajo solo corrige el código que se ejecuta en tu navegador. No corregirá el código para todos los usuarios que visiten tu página. Para eso, debes corregir el código que está en los servidores.

Próximos pasos

¡Felicitaciones! Puedes aprovechar al máximo Chrome DevTools cuando depuras JavaScript. Las herramientas y los métodos que aprendiste en este instructivo pueden ahorrarte muchísimas horas.

En este instructivo, solo se mostraron dos formas de colocar puntos de interrupción. DevTools ofrece muchas otras formas, 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 pausas en 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 Step over line of code (Omitir línea de código) para obtener más información.

Comentarios

Was this page helpful?