Referencia de depuración de JavaScript

Kayce Basques

Sofia Emelianova

Descubre nuevos flujos de trabajo de depuración con esta referencia completa de las funciones de depuración de Chrome DevTools.

Consulta Comienza con la depuración de JavaScript en Chrome DevTools para aprender los conceptos básicos de la depuración.

Cómo pausar el código con puntos de interrupción

Establece un punto de interrupción para pausar el código en medio de la ejecución. Si quieres aprender a establecer puntos de interrupción, consulta Cómo pausar tu código con puntos de interrupción.

Cómo verificar los valores cuando están en pausa

Mientras la ejecución está en pausa, el depurador evalúa todas las variables, constantes y objetos dentro de la función actual hasta un punto de interrupción. El depurador muestra los valores actuales intercalados junto a las declaraciones correspondientes.

Puedes usar Console para consultar las variables, constantes y objetos evaluados.

Obtener una vista previa de las propiedades de clase o función con solo colocar el cursor sobre un elemento

Mientras la ejecución está en pausa, coloca el cursor sobre el nombre de una clase o función para obtener una vista previa de sus propiedades.

Cómo recorrer el código

Una vez que tu código esté pausado, repasa todo, una expresión a la vez, y analiza el flujo de control y los valores de las propiedades.

Omitir una línea de código

Cuando se detenga en una línea de código que contiene una función que no es relevante para el problema que estás depurando, haz clic en Omitir para ejecutar la función sin entrar en ella.

Por ejemplo, supongamos que estás depurando el siguiente código:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name); // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

Estás en pausa en A. Cuando presionas Omitir, DevTools ejecuta todo el código de la función que estás omitiendo, que es B y C. Luego, Herramientas para desarrolladores se detiene en D.

Cómo ingresar a una línea de código

Cuando te detengas en una línea de código que contenga una llamada a función relacionada con el problema que estás depurando, haz clic en Entrar en para investigar esa función con más detalle.

Por ejemplo, supongamos que estás depurando el siguiente código:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name);
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name;
}

Estás en pausa en A. Cuando presionas Step into, DevTools ejecuta esta línea de código y, luego, se pausa en B.

Salir de la línea de código

Cuando estés pausado dentro de una función que no está relacionada con el problema que estás depurando, haz clic en Step out para ejecutar el resto del código de la función.

Por ejemplo, supongamos que estás depurando el siguiente código:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName();
  updateName(name); // C
}
function getName() {
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

Estás en pausa en A. Cuando presionas Salir, DevTools ejecuta el resto del código en getName(), que es solo B en este ejemplo, y luego se detiene en C.

Ejecuta todo el código hasta una línea determinada

Cuando depuras una función larga, es posible que haya mucho código que no esté relacionado con el problema que estás depurando.

Podrías revisar todas las líneas, pero eso puede ser tedioso. Podrías establecer un punto de interrupción de línea de código en la línea que te interesa y, luego, presionar Resume Script Execution, pero hay una forma más rápida.

Haz clic con el botón derecho en la línea de código que te interesa y selecciona Continuar hasta aquí. DevTools ejecuta todo el código hasta ese punto y, luego, se detiene en esa línea.

Cómo reanudar la ejecución de la secuencia de comandos

Para continuar con la ejecución de la secuencia de comandos después de una pausa, haz clic en Resume Script Execution . Herramientas para desarrolladores ejecuta la secuencia de comandos hasta el siguiente punto de interrupción (si corresponde).

Cómo forzar la ejecución de una secuencia de comandos

Para ignorar todos los puntos de interrupción y forzar a la secuencia de comandos a reanudar la ejecución, mantén presionado Resume ScriptExecution y selecciona Forzar ejecución de secuencia de comandos .

Cambia el contexto de la conversación

Cuando trabajes con trabajadores web o service workers, haz clic en un contexto que se muestre en el panel Threads para cambiar a ese contexto. El ícono de flecha azul representa el contexto que está seleccionado actualmente.

El panel Subprocesos de la captura de pantalla anterior está delineado en azul.

Por ejemplo, supongamos que te detuviste en una pausa en la secuencia de comandos principal y en la secuencia de comandos del servicio trabajador. Quieres ver las propiedades locales y globales del contexto del service worker, pero el panel Sources muestra el contexto de la secuencia de comandos principal. Si haces clic en la entrada del trabajador de servicio en el panel de subprocesos, podrás cambiar a ese contexto.

Cómo recorrer expresiones separadas por comas

El paso por expresiones separadas por comas te permite depurar el código reducido. Por ejemplo, considera el siguiente código:

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

Cuando se reduce, contiene una expresión foo(),foo(),42 separada por comas:

function foo(){}function bar(){return foo(),foo(),42}bar();

Debugger pasa por esas expresiones de la misma manera.

Por lo tanto, el comportamiento de los pasos es idéntico:

• Entre el código comprimido y el código creado.
• Cuando se usan mapas de origen para depurar el código reducido en términos del código original. En otras palabras, cuando veas puntos y coma, siempre podrás pasar por ellos, incluso si la fuente real que depuras está reducida.

Ver y editar propiedades locales, globales y cerradas

Cuando el código esté pausado en una línea, usa el panel Scope para ver y editar los valores de las propiedades y las variables en los alcances local, de cierre y global.

• Haz doble clic en un valor de propiedad para cambiarlo.
• Las propiedades no enumerables aparecen inhabilitadas.

El panel Alcance de la captura de pantalla anterior está delineado en azul.

Cómo ver la pila de llamadas actual

Cuando estés en pausa en una línea de código, usa el panel Pila de llamadas para ver la pila de llamadas que te llevó a este punto.

Haz clic en una entrada para ir a la línea de código en la que se llamó a esa función. El ícono de flecha azul representa la función que DevTools está destacando en ese momento.

El panel Call Stack de la captura de pantalla anterior está delineado en azul.

Reinicia una función (marco) en una pila de llamadas

Para observar el comportamiento de una función y volver a ejecutarla sin tener que reiniciar todo el flujo de depuración, puedes reiniciar la ejecución de una sola función cuando esta función está en pausa. En otras palabras, puedes reiniciar el marco de la función en la pila de llamadas.

Para reiniciar un fotograma:

1. Pausa la ejecución de la función en un punto de interrupción. El panel Pila de llamadas registra el orden de las llamadas a función.

2. En el panel Call Stack, haz clic con el botón derecho en una función y selecciona Restart frame en el menú desplegable.

   

Para comprender cómo funciona Restart frame, considera el siguiente código:

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

La función foo() toma 0 como argumento, lo registra y llama a la función bar(). La función bar(), a su vez, incrementa el argumento.

Intenta reiniciar los fotogramas de ambas funciones de la siguiente manera:

1. Copia el código anterior en un fragmento nuevo y ejecutarlo. La ejecución se detiene en el punto de interrupción de la línea de código debugger.
2. Observa que el depurador te muestra el valor actual junto a la declaración de la función: value = 1.
3. Reinicia el marco bar().
4. Para avanzar por la sentencia de incremento de valor, presiona F9. Observa que el valor actual aumenta: value = 2.
5. De manera opcional, en el panel Alcance, haz doble clic en el valor para editarlo y establecer el valor deseado.

6. Intenta reiniciar el marco bar() y avanzar por la sentencia de incremento varias veces más. El valor sigue aumentando.

El reinicio de fotogramas no restablece los argumentos. En otras palabras, el reinicio no restablece el estado inicial en la llamada a función. En cambio, simplemente mueve el puntero de ejecución al comienzo de la función.

Por lo tanto, el valor del argumento actual persiste en la memoria durante los reinicios de la misma función.

1. Ahora, reinicia el marco foo() en la pila de llamadas. Observa que el valor es 0 nuevamente.

En JavaScript, los cambios en los argumentos no son visibles (reflejos) fuera de la función. Las funciones anidadas reciben valores, no sus ubicaciones en la memoria. 1. Reanuda la ejecución de la secuencia de comandos (F8) para completar este instructivo.

Cómo mostrar los fotogramas que están en la lista de elementos ignorados

De forma predeterminada, el panel Call Stack muestra solo los fotogramas relevantes para tu código y omite las secuencias de comandos que se agregaron a Configuración > Lista de elementos ignorados.

Para ver la pila de llamadas completa, incluidos los fotogramas de terceros, habilita Show ignore-listed frames en la sección Call Stack.

Pruébala en esta página de demostración:

1. En el panel Fuentes, abre el archivo src > app > app.component.ts.
2. Establece un punto de interrupción en la función increment().
3. En la sección Pila de llamadas, marca o desmarca la casilla de verificación Mostrar fotogramas de la lista de elementos ignorados y observa la lista relevante o completa de fotogramas en la pila de llamadas.

Cómo ver fotogramas asíncronos

Si el framework que usas lo admite, DevTools puede hacer un seguimiento de las operaciones asíncronas vinculando ambas partes del código asíncrono.

En este caso, la Pila de llamadas muestra todo el historial de llamadas, incluidos los marcos de llamadas asincrónicas.

Cómo copiar el seguimiento de pila

Haz clic con el botón derecho en cualquier parte del panel Call Stack y selecciona Copy stack trace para copiar la pila de llamadas actual en el portapapeles.

A continuación, se muestra un ejemplo del resultado:

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

Navega por el árbol de archivos

Usa el panel Página para navegar por el árbol de archivos.

Grupo de archivos creados y, luego, implementados en el árbol de archivos

Cuando se desarrollan aplicaciones web con frameworks (por ejemplo, React o Angular), puede ser difícil navegar por las fuentes debido a los archivos reducidos que generan las herramientas de compilación (por ejemplo, webpack o Vite).

Para ayudarte a navegar por las fuentes, el panel Sources > Page puede agrupar los archivos en dos categorías:

• Autor. Son similares a los archivos fuente que ves en tu IDE. Herramientas para desarrolladores genera estos archivos en función de los mapas de origen proporcionados por tus herramientas de compilación.
• Implementada. Son los archivos reales que lee el navegador. Por lo general, estos archivos están reducidos.

Para habilitar la agrupación, habilita la opción > Agrupar archivos por escrito/implementado en el menú de tres puntos en la parte superior del árbol de archivos.

Ocultar las fuentes incluidas en la lista de elementos ignorados del árbol de archivos

Para ayudarte a enfocarte solo en el código que creas, el panel Sources > Page inhabilita de forma predeterminada todas las secuencias de comandos o directorios que se agregaron a Settings > Ignore List.

Para ocultar todas esas secuencias de comandos, selecciona Fuentes > Página > > Ocultar fuentes de la lista de elementos ignorados .

Ignorar una secuencia de comandos o un patrón de secuencias de comandos

Ignora una secuencia de comandos para omitirla durante la depuración. Cuando se ignora, una secuencia de comandos se oculta en el panel Pila de llamadas y nunca se entra en sus funciones cuando se recorre el código.

Por ejemplo, supón que estás recorriendo este código:

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

A es una biblioteca de terceros de confianza. Si tienes la certeza de que el problema que estás depurando no está relacionado con la biblioteca de terceros, tiene sentido ignorar la secuencia de comandos.

Ignora una secuencia de comandos o un directorio del árbol de archivos

Para ignorar una secuencia de comandos individual o un directorio completo, sigue estos pasos:

1. En Sources > Page, haz clic con el botón derecho en un directorio o un archivo de secuencia de comandos.
2. Selecciona Agregar directorio o secuencia de comandos a la lista de elementos ignorados.

Si no ocultaste las fuentes de la lista de elementos ignorados, puedes seleccionar una de ellas en el árbol de archivos y, en el banner de advertencia , hacer clic en Quitar de la lista de elementos ignorados o Configurar.

De lo contrario, puedes quitar los directorios y las secuencias de comandos ocultos e ignorados de la lista en Configuración > Lista de elementos ignorados.

Cómo ignorar una secuencia de comandos desde el panel Editor

Para ignorar una secuencia de comandos del panel Editor, sigue estos pasos:

1. Abre el archivo.
2. Haz clic con el botón derecho en cualquier lugar.
3. Selecciona Agregar secuencia de comandos a la lista de elementos ignorados.

Puedes quitar una secuencia de comandos de la lista de elementos ignorados en Configuración > Lista de elementos ignorados.

Ignora una secuencia de comandos del panel de pila de llamadas

Para ignorar una secuencia de comandos del panel Pila de llamadas, sigue estos pasos:

1. Haz clic con el botón derecho en una función de la secuencia de comandos.
2. Selecciona Agregar secuencia de comandos a la lista de elementos ignorados.

Puedes quitar una secuencia de comandos de la lista de elementos ignorados en Configuración > Lista de elementos ignorados.

Cómo ignorar una secuencia de comandos desde Configuración

Consulta Configuración > Lista de elementos ignorados.

Ejecuta fragmentos de código de depuración desde cualquier página

Si notas que ejecutas el mismo código de depuración en la consola una y otra vez, considera usar los fragmentos. Los fragmentos son secuencias de comandos ejecutables que escribes, almacenas y ejecutas en DevTools.

Consulta Ejecuta fragmentos de código desde cualquier página para obtener más información.

Observa los valores de las expresiones personalizadas de JavaScript

Usa el panel de observación para ver los valores de las expresiones personalizadas. Puedes observar cualquier expresión de JavaScript válida.

• Haz clic en Agregar expresión para crear una nueva expresión de vigilancia.
• Haz clic en Actualizar para actualizar los valores de todas las expresiones existentes. Los valores se actualizan automáticamente mientras se recorre el código.
• Coloca el cursor sobre una expresión y haz clic en Delete Expression para borrarla.

Cómo inspeccionar y editar secuencias de comandos

Cuando abres una secuencia de comandos en el panel Página, DevTools te muestra su contenido en el panel Editor. En el panel Editor, puedes explorar y editar tu código.

Además, puedes anular el contenido de forma local o crear un espacio de trabajo y guardar los cambios que realices en DevTools directamente en tus fuentes locales.

Haz que un archivo reducido sea legible

De forma predeterminada, el panel Sources imprime los archivos reducidos con formato estilístico. Cuando se imprime de forma legible, el Editor puede mostrar una sola línea de código larga en varias líneas, con - para indicar que es la continuación de la línea.

Para ver el archivo reducido tal como se cargó, haz clic en { } en la esquina inferior izquierda del Editor.

Oculta bloques de código

Para plegar un bloque de código, coloca el cursor sobre el número de línea en la columna izquierda y haz clic en Contraer.

Para desplegar el bloque de código, haz clic en la {...} que se encuentra a su lado.

Para configurar este comportamiento, consulta Configuración > Preferencias > Fuentes.

Cómo editar una secuencia de comandos

Cuando corriges un error, a menudo quieres probar algunos cambios en tu código JavaScript. No necesitas realizar los cambios en un navegador externo y, luego, volver a cargar la página. Puedes editar tu secuencia de comandos en Herramientas para desarrolladores.

Para editar una secuencia de comandos, sigue estos pasos:

1. Abre el archivo en el panel Editor del panel Fuentes.
2. Realiza los cambios en el panel Editor.

3. Presiona Command + S (Mac) o Ctrl + S (Windows y Linux) para guardar. DevTools aplica parches a todo el archivo JS en el motor de JavaScript de Chrome.

   

   El panel Editor de la captura de pantalla anterior está delineado en azul.

Cómo editar una función pausada en vivo

Mientras la ejecución está en pausa, puedes editar la función actual y aplicar los cambios en vivo con las siguientes limitaciones:

• Solo puedes editar la función de más arriba en la Pila de llamadas.
• No debe haber llamadas recursivas a la misma función más abajo en la pila.

Para editar en tiempo real una función, sigue estos pasos:

1. Detener la ejecución con un punto de interrupción
2. Edita la función detenida.
3. Presiona Comando o Control + S para aplicar los cambios. El depurador reinicia la función automáticamente.
4. Continúa con la ejecución.

Mira el siguiente video para aprender a usar este flujo de trabajo.

En este ejemplo, las variables addend1 y addend2 tienen un tipo string incorrecto al principio. Por lo tanto, en lugar de agregar números, las cadenas se concatenan. Para solucionarlo, las funciones parseInt() se agregan durante la edición en vivo.

Busca y reemplaza texto en una secuencia de comandos

Para buscar texto en una secuencia de comandos, haz lo siguiente:

1. Abre el archivo en el panel Editor del panel Fuentes.
2. Para abrir una barra de búsqueda integrada, presiona Comando + F (Mac) o Ctrl + F (Windows y Linux).
3. En la barra, ingresa tu consulta. De manera opcional, puedes hacer lo siguiente:
   • Haz clic en Coincidir mayúsculas y minúsculas para que tu búsqueda distinga entre mayúsculas y minúsculas.
   • Haz clic en Usar expresión regular para buscar con una expresión regex.
4. Presiona Intro. Para ir al resultado de la búsqueda anterior o siguiente, presiona el botón hacia arriba o hacia abajo.

Para reemplazar el texto que encontraste, haz lo siguiente:

1. En la barra de búsqueda, haz clic en el botón Replace.
2. Escribe el texto con el que deseas reemplazar y, luego, haz clic en Reemplazar o Reemplazar todo.

Inhabilita JavaScript

Consulta Cómo inhabilitar JavaScript con las Herramientas para desarrolladores de Chrome.