Referencia de depuración de JavaScript

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

Consulta Cómo comenzar a depurar JavaScript en las Herramientas para desarrolladores de Chrome para conocer los conceptos básicos de la depuración.

Cómo pausar 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.

Verificar valores cuando está 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 la consola para consultar las variables, las constantes y los objetos que se evaluaron.

Obtener una vista previa de las propiedades de clase o función cuando se coloca 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.

Paso por el código

Una vez que tu código esté en pausa, 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 estés detenido 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 Step over 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
}

Pausaste el A. Cuando presionas Step over, las Herramientas para desarrolladores ejecutan todo el código en la función que estás dando, que es B y C. Luego, Herramientas para desarrolladores se detiene en D.

Avanzar a la línea de código

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

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;
}

Pausaste el A. Si presionas Step into, Herramientas para desarrolladores ejecuta esta línea de código y, luego, hace una 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
}

Pausaste el A. Cuando presionas Step out, las Herramientas para desarrolladores ejecuta el resto del código en getName(), que es solo B en este ejemplo, y luego se pausa en C.

Ejecutar 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 avanzar por todas las líneas, pero 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 manera más rápida.

Haz clic con el botón derecho en la línea de código que te interese y selecciona Continue to here. Herramientas para desarrolladores ejecuta todo el código hasta ese momento y, luego, hace una pausa en esa línea.

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).

Forzar la ejecución de la 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 Threads en la captura de pantalla anterior se destaca en azul.

Por ejemplo, supongamos que estás detenido en un punto de interrupción en la secuencia de comandos principal y en la del service worker. 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 service worker en el panel Threads, podrás cambiar a ese contexto.

Recorre las expresiones separadas por comas

Si recorres las expresiones separadas por comas, podrás 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 pasos es idéntico:

• Entre el código reducido y el de autoría
• Cuando uses mapas de origen para depurar el código reducido en términos del código original. En otras palabras, cuando veas punto y coma, siempre podrás revisarlos incluso si se redujo la fuente real que estás depurando.

Ver y editar propiedades locales, globales y cerradas

Mientras estés detenido en una línea de código, usa el panel Alcance para ver y editar los valores de las propiedades y variables en los permisos local, de cierre y global.

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

El panel Alcance de la captura de pantalla anterior se describe en azul.

Cómo ver la pila de llamadas actual

Mientras 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 saltar a la línea de código donde se llamó a esa función. El ícono de flecha azul representa qué función está destacando Herramientas para desarrolladores en este momento.

El panel Call Stack en la captura de pantalla anterior se destaca en azul.

Reiniciar 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 funciones.

2. En el panel Pila de llamadas, haz clic con el botón derecho en una función y selecciona Reiniciar marco 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 marcos de ambas funciones de la siguiente manera:

1. Copia el código anterior en un fragmento nuevo y ejecútalo. La ejecución se detiene en el punto de interrupción de la línea de código debugger.
2. Ten en cuenta 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. Presiona F9 para revisar la instrucción de incremento de valor. 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 que desees.

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

El reinicio del marco no restablece los argumentos. En otras palabras, el reinicio no restablece el estado inicial en la llamada a función. En su lugar, simplemente mueve el puntero de ejecución al inicio de la función.

Por lo tanto, el valor del argumento actual persiste en la memoria después de reiniciar 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 se pueden ver (reflejar) 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.

Mostrar marcos que están en la lista de elementos ignorados

De forma predeterminada, el panel Pila de llamadas muestra solo los marcos que son relevantes para tu código y omite cualquier secuencia de comandos que se agregue a Configuración > Lista de elementos ignorados.

Para ver la pila de llamadas completa, incluidos los marcos de terceros, habilita Mostrar marcos que están en la lista de elementos ignorados en la sección Pila de llamadas.

Pruébalo 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 marcos en la lista de elementos ignorados y observa la lista relevante o completa de marcos de la pila de llamadas.

Cómo ver fotogramas asíncronos

Si el marco de trabajo que estás usando lo admite, las Herramientas para desarrolladores pueden realizar un seguimiento de las operaciones asincrónicas 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 asíncronos.

Copiar el seguimiento de pila

Haz clic con el botón derecho en cualquier lugar 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)

Cómo navegar por el árbol de archivos

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

Agrupa los archivos creados e 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 Fuentes > Página puede agrupar los archivos en dos categorías:

• Creado. Es similar 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.
• Implementado. 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 que puedas enfocarte solo en el código que crees, el panel Fuentes > Página inhabilita todas las secuencias de comandos o directorios que se agregaron a Configuración > Lista de elementos ignorados de forma predeterminada.

Para ocultar todas estas secuencias de comandos, selecciona Fuentes > Página > > Ocultar fuentes incluidas en 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 ingresas a las funciones de la secuencia de comandos cuando recorres el código.

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

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

A es una biblioteca de terceros de confianza. Si estás seguro de que el problema que depuras 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:

1. En Fuentes > Página, haz clic con el botón derecho en un directorio o un archivo de secuencia de comandos.
2. Selecciona Add directory/script to ignore list.

Si no ocultaste las fuentes incluidas en la lista de fuentes ignoradas, puedes seleccionarla en el árbol de archivos y, en el banner de advertencia , haz clic en Quitar de la lista ignorada o en 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. Abra 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.

Cómo ignorar una secuencia de comandos desde el 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 creas, almacenas y ejecutas en Herramientas para desarrolladores.

Consulta Cómo ejecutar 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 Watch para observar los valores de las expresiones personalizadas. Puedes observar cualquier expresión de JavaScript válida.

• Haz clic en Add Expression para crear una expresión supervisada nueva.
• Haz clic en Refresh para actualizar los valores de todas las expresiones existentes. Los valores se actualizan automáticamente mientras recorres 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 Page, Herramientas para desarrolladores 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 lugar de trabajo y guardar los cambios que realices en Herramientas para desarrolladores directamente en tus fuentes locales.

Cómo hacer que un archivo reducido sea legible

De forma predeterminada, el panel Sources imprime archivos reducidos con formato estilístico. Cuando se imprime con formato estilístico, 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 comprimido mientras se carga, haz clic en { } en la esquina inferior izquierda del Editor.

Ocultar 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, ve a 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 Sources.
2. Realiza los cambios en el panel Editor.

3. Presiona Command + S (Mac) o Ctrl + S (Windows y Linux) para guardar. Herramientas para desarrolladores parchea todo el archivo JS en el motor JavaScript de Chrome.

   

   El panel Editor en la captura de pantalla anterior se destaca en azul.

Cómo editar una función detenida en vivo

Mientras la ejecución está detenida, puedes editar la función actual y aplicar 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. Pausa 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 sobre este flujo de trabajo.

En este ejemplo, las variables addend1 y addend2 tienen un tipo string incorrecto al principio. Así, en lugar de sumar números, las cadenas se concatenan. Para solucionarlo, se agregan las funciones parseInt() durante la edición en tiempo real.

Buscar y reemplazar texto en una secuencia de comandos

Para buscar texto en una secuencia de comandos:

1. Abre el archivo en el panel Editor del panel Sources.
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 consulta distinga mayúsculas de 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:

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.

Inhabilitar JavaScript

Consulta Inhabilita JavaScript con las Herramientas para desarrolladores de Chrome.