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 que puedas pausar el código durante su ejecución. Para obtener información sobre cómo establecer puntos de interrupción, consulta Cómo pausar tu código con puntos de interrupción.
Comprobar los valores cuando se detiene
Mientras la ejecución está pausada, 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, las constantes y los objetos evaluados.
Obtén una vista previa de las propiedades de la clase o función cuando colocas el cursor sobre ellas
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.
Analiza el código
Una vez que tu código esté en pausa, revísalo de a una expresión a la vez para investigar el flujo de control y los valores de las propiedades durante el proceso.
Omitir una línea de código
Cuando hagas la pausa 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
}
Se detuvo el A. Cuando presionas Step over, Herramientas para desarrolladores ejecuta todo el código de la función por la que estás recorriendo, que es B y C. Luego, Herramientas para desarrolladores se pausarán en D.
Entrar a la línea de código
Cuando hagas una pausa en una línea de código que contiene una llamada a función relacionada con el problema que estás depurando, haz clic en Step into
para investigar más 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;
}
Se detuvo el A. Cuando presionas Step into, Herramientas para desarrolladores ejecuta esta línea de código y, luego, se pausa en B.
Salir de la línea de código
Cuando estés detenido en 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
}
Se detuvo el A. Cuando presionas Step out, Herramientas para desarrolladores ejecuta el resto del código en getName(), que en este ejemplo es solo B, y, luego, se pausa en C.
Cómo ejecutar todo el código hasta una línea determinada
Cuando depuras una función larga, es posible que haya una gran cantidad de código que no esté relacionado con el problema que estás depurando.
Podrías recorrer todas las líneas, pero eso puede ser tedioso. Podrías establecer una interrupción de línea de código en la línea que te interese y presionar Resume Script Execution
, pero existe 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í. Herramientas para desarrolladores ejecuta todo el código hasta ese punto y, luego, se detiene en esa línea.
Reanudar la ejecución de la secuencia de comandos
Para continuar 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 la reanudación de la ejecución de tu secuencia de comandos, mantén presionado Resume ScriptExecution 
y, luego, 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 aparezca en el panel Threads para cambiar a ese contexto. El ícono de flecha azul representa el contexto seleccionado actualmente.
El panel Threads de la captura de pantalla anterior se muestra con un contorno azul.
Por ejemplo, supongamos que estás detenido en un punto de interrupción tanto en la secuencia de comandos principal como en la del service worker. Deseas ver las propiedades locales y globales para el 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.
Cómo pasar por expresiones separadas por comas
Pasar por expresiones separadas por comas te permite depurar 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();
El Debugger recorre esas expresiones de la misma manera.
Por lo tanto, el comportamiento del paso es idéntico:
- Entre el código reducido y de autoría
- Cuando uses mapas de fuentes para depurar el código reducido en términos del código original En otras palabras, cuando ves el punto y coma, siempre es probable que busques recorrerlos, incluso si la fuente real que estás depurando está reducida.
Mira y edita propiedades locales, globales y cerradas
Mientras la línea de código esté detenida, usa el panel Alcance para ver y editar los valores de las propiedades y variables en los alcances local, de cierre y global.
- Haz doble clic en el valor de una propiedad para cambiarlo.
- Las propiedades que no son numerables se muestran inhabilitadas.
El panel Scope en la captura de pantalla anterior se muestra en color azul.
Cómo ver la pila de llamadas actual
Mientras la app está detenida en una línea de código, usa el panel Call Stack 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 la función que Herramientas para desarrolladores está destacando actualmente.
El panel Call Stack en la captura de pantalla anterior se muestra en azul.
Cómo 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 esté en pausa. En otras palabras, puedes reiniciar el marco de la función en la pila de llamadas.
Para reiniciar un fotograma, haz lo siguiente:
- Pausa la ejecución de la función en un punto de interrupción. El panel Call Stack registra el orden de las llamadas a función.
En el panel Call Stack, haz clic con el botón derecho en una función y selecciona Restartframe en el menú desplegable.
Para comprender cómo funciona el marco de reinicio, 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(). A su vez, la función bar() incrementa el argumento.
Intenta reiniciar los marcos de ambas funciones de la siguiente manera:
- Copia el código anterior en un fragmento nuevo y ejecútalo. La ejecución se detiene en el punto de interrupción de línea de código
debugger. - Observa que el depurador te muestra el valor actual junto a la declaración de la función:
value = 1.
- Reinicia el marco
bar().
- Para avanzar por la sentencia de incremento de valor, presiona
F9.
Observa que el valor actual aumenta: value = 2. - De manera opcional, en el panel Alcance, haz doble clic en el valor para editarlo y configura el valor deseado.
Intenta reiniciar el marco
bar()y avanzar por 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 cambio, solo mueve el puntero de ejecución al inicio de la función.
Por lo tanto, el valor del argumento actual persiste en la memoria durante los reinicios de la misma función.
- Ahora, reinicia el marco
foo()en la Pila de llamadas.
Observa que el valor es 0nuevamente.
En JavaScript, los cambios en los argumentos no son visibles (reflejados) 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 los marcos que están en la lista de elementos ignorados
De forma predeterminada, el panel Call Stack muestra solo los marcos que son relevantes para tu código y omite las secuencias de comandos agregadas a 
Settings > Ignore List.
Para ver la pila de llamadas completa, incluidos los marcos de terceros, habilita Mostrar marcos de la lista de elementos ignorados en la sección Pila de llamadas.
Pruébalo en esta página de demostración:
- En el panel Fuentes, abre el archivo
src>app>app.component.ts. - Establece un punto de interrupción en la función
increment(). - En la sección Call Stack, marca o desmarca la casilla de verificación Show ignore-List frameworks y observa la lista relevante o completa de fotogramas en la pila de llamadas.
Cómo ver fotogramas asíncronos
Si el framework que estás usando es compatible, Herramientas para desarrolladores 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 asíncronas.
Copiar 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 Page 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 resultar difícil navegar por las fuentes debido a los archivos reducidos que generan las herramientas de compilación (por ejemplo, webpack o Vite).
Para ayudarlo a navegar por las fuentes, el panel Fuentes > Página puede agrupar los archivos en dos categorías:
de autor. Es similar a los archivos de origen que ves en tu IDE. Herramientas para desarrolladores genera estos archivos según los mapas de origen que proporcionan tus herramientas de compilación.
Implementado. Los archivos reales que lee el navegador. Por lo general, estos archivos están reducidos.
Para habilitar la agrupación, habilita la opción 
> Group files by Authored/Deployed 
del menú de tres puntos ubicado en la parte superior del árbol de archivos.
Cómo ocultar en el árbol de archivos las fuentes que están en la lista de elementos ignorados
Para que puedas enfocarte solo en el código que creaste, el panel Fuentes > Página inhabilita todas las secuencias de comandos o directorios agregados a 
Configuración > Lista de omisión de forma predeterminada.
Para ocultar estas secuencias de comandos por completo, selecciona Fuentes > Página > 
> Ocultar las 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 Call Stack y nunca entras a las funciones de la secuencia de comandos cuando recorres el código.
Por ejemplo, supongamos que estás revisando 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, entonces tiene sentido ignorar la secuencia de comandos.
Cómo ignorar 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:
- En Sources > Page, haz clic con el botón derecho en un directorio o un archivo de secuencia de comandos.
- Selecciona Agregar directorio/secuencia de comandos a la lista de elementos ignorados.
Si no ocultaste las fuentes incluidas en la lista de elementos ignorados, puedes seleccionarla en el árbol de archivos y, en el banner de advertencia 
, hacer 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.
Omite una secuencia de comandos desde el panel Editor
Para ignorar una secuencia de comandos desde el panel del Editor, haz lo siguiente:
- Abra el archivo.
- Haz clic con el botón derecho en cualquier parte.
- Selecciona Agregar secuencia de comandos a la lista de elementos ignorados.
Para quitar una secuencia de comandos de la lista de elementos ignorados, ve a 
Configuración > Lista de elementos ignorados.
Omite una secuencia de comandos del panel Pila de llamadas
Para ignorar una secuencia de comandos desde el panel Call Stack, sigue estos pasos:
- Haz clic con el botón derecho en una función de la secuencia de comandos.
- Selecciona Agregar secuencia de comandos a la lista de elementos ignorados.
Para quitar una secuencia de comandos de la lista de elementos ignorados, ve a 
Configuración > Lista de elementos ignorados.
Ignora 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 ejecutas el mismo código de depuración una y otra vez en Console, considera usar Fragmentos. Los fragmentos son secuencias de comandos ejecutables que puedes crear, almacenar y ejecutar 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 válida de JavaScript.
- Haz clic en Add Expression
para crear una expresión de supervisión nueva. - Haz clic en Actualizar
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.
Inspecciona y edita secuencias de comandos
Cuando abres una secuencia de comandos en el panel Page, Herramientas para desarrolladores 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 Herramientas para desarrolladores directamente en tus fuentes locales.
Haz que un archivo reducido sea legible
De forma predeterminada, el panel Sources imprime los archivos reducidos. Cuando está impreso, 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 tal como se cargó, haz clic en { } en la esquina inferior izquierda del Editor.
Plegar bloques de código
Para doblar un bloque de código, coloca el cursor sobre el número de línea de la columna izquierda y haz clic en 
Contraer.
Para desplegar el bloque de código, haz clic en la {...} junto a él.
Para configurar este comportamiento, consulta 
Configuración > Preferencias > Fuentes.
Cómo editar una secuencia de comandos
Cuando corrijas un error, a menudo querrás probar algunos cambios en tu código JavaScript. No es necesario que realices los cambios en un navegador externo y, luego, vuelvas a cargar la página. Puedes editar tu secuencia de comandos en Herramientas para desarrolladores.
Para editar una secuencia de comandos, sigue estos pasos:
- Abre el archivo en el panel Editor del panel Sources.
- Realiza los cambios en el panel Editor.
Presiona Command + S (Mac) o Ctrl + S (Windows y Linux) para guardar los cambios. Herramientas para desarrolladores aplica un parche a todo el archivo JS en el motor JavaScript de Chrome.
El panel Editor de la captura de pantalla anterior se muestra con un contorno azul.
Edita en vivo una función detenida
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 superior 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:
- Pausa la ejecución con un punto de interrupción.
- Edita la función detenida.
- Presiona Command / Control + S para aplicar los cambios. El depurador reinicia la función automáticamente.
- Continúa la ejecución.
Mira el siguiente video para conocer este flujo de trabajo.
En este ejemplo, las variables addend1 y addend2 tienen inicialmente un tipo string incorrecto. Por lo tanto, en lugar de sumar números, se concatenan las cadenas. Para solucionarlo, se agregan las funciones parseInt() durante la edición en vivo.
Buscar y reemplazar texto en una secuencia de comandos
Para buscar texto en una secuencia de comandos:
- Abre el archivo en el panel Editor del panel Sources.
- Para abrir una barra de búsqueda integrada, presiona Comando + F (Mac) o Ctrl + F (Windows y Linux).
- En la barra, ingresa tu búsqueda.
De forma opcional, puedes hacer lo siguiente:
- Haz clic en
Match Case para que tu consulta distinga entre mayúsculas y minúsculas. - Haz clic en
Usar expresión regular para buscar usando una expresión RegEx.
- Haz clic en
- Presione Intro. Para ir al resultado de la búsqueda anterior o siguiente, presiona el botón de arriba o abajo.
Para reemplazar el texto que encontraste, sigue estos pasos:
- En la barra de búsqueda, haz clic en el botón
Replace (Reemplazar).
- Escriba el texto que desea reemplazar y, luego, haga clic en Reemplazar o Reemplazar todo.
Inhabilitar JavaScript
Consulte Cómo inhabilitar JavaScript con las Herramientas para desarrolladores de Chrome.