Descubre nuevos flujos de trabajo de depuración con esta referencia integral de la depuración de Herramientas para desarrolladores de Chrome atributos.
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 se detiene en una línea de código que contiene una función que no es relevante para el problema en cuestión depuración, 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 se estableció.
estás entrando, que son B
y C
. Luego, Herramientas para desarrolladores se detiene en D
.
Avanzar a la línea de código
Cuando se detiene en una línea de código que contiene una llamada a función que está relacionada con el problema en cuestión depuración, haz clic en Step into para investigar esa función un poco más lejos.
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
. Cuando se presiona Ingresar en, 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 en pausa dentro de una función que no está relacionada con el problema que estás depurando, haz clic en Paso fuera para ejecutar el resto el 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 detiene en C
.
Ejecutar todo el código hasta una línea determinada
Cuando depuras una función larga, puede haber mucho código que no esté relacionado con el problema en cuestión la depuración.
Podrías avanzar por todas las líneas, pero puede ser tedioso. Podrías establecer una línea de código punto de interrupción en la línea que te interesa y, luego, presiona Resume Script Execution , pero existe 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. DevTools 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 con la ejecución de la secuencia de comandos después de una pausa, haga clic en Resume Script Execution. DevTools ejecuta la secuencia de comandos hasta el siguiente punto de interrupción (si lo hay).
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 Reanudar secuencia de comandos. Ejecución 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 cambia 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 el servicio de la secuencia de comandos del worker. Quieres ver las propiedades locales y globales para el contexto del service worker, pero el panel Sources muestra el contexto principal de la secuencia de comandos. Si haces clic en la entrada del service worker 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 locales, de cierre y globales.
- 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 detenida en una línea de código, usa el panel Pila de llamadas para ver la pila que te llevó a esto 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 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:
- 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.
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:
- 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
. - Ten en cuenta que el depurador te muestra el valor actual junto a la declaración de la función:
value = 1
. - Reinicia el marco
bar()
. - Presiona
F9
para revisar la instrucción de incremento de valor. Observa que el valor actual aumenta:value = 2
. - De manera opcional, en el panel Alcance, haz doble clic en el valor para editarlo y establecerlo.
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.
- Ahora, reinicia el marco
foo()
en la pila de llamadas. Observa que el valor es0
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:
- En el panel Sources, abre
src
. >app
>app.component.ts
. - Establece un punto de interrupción en la función
increment()
. - 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 llamada actual. de la pila 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, en el menú Fuentes > El panel 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 > Agrupa los archivos por creado/implementado en 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 botón Fuentes > El panel Página muestra en gris todas las secuencias de comandos o directorios que se agregaron a Configuración > Lista de elementos ignorados de forma predeterminada.
Para ocultar estas secuencias de comandos por completo, selecciona Fuentes > Página > Ocultar las 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 oscurecidos en el panel Pila de llamadas, y nunca ingresas a las funciones de la secuencia de comandos cuando avanzas a través de tu 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 estás depurando
no está relacionado con la biblioteca de terceros, entonces 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:
- En Fuentes > Page, haz clic con el botón derecho en un directorio o un archivo de secuencia de comandos.
- 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 las secuencias de comandos y los directorios 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:
- Abre el archivo.
- Haz clic con el botón derecho en cualquier lugar.
- 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.
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:
- 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.
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 ver cualquier JavaScript válido expresión.
- Haz clic en Add Expression. para crear una nueva expresión de supervisión.
- 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 Borrar expresión. para borrarlo.
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 espacio de trabajo y guardar los cambios realizados 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, 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 para realizar los cambios en un navegador externo y, luego, vuelve 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 Comando + S (Mac) o Ctrl + S (Windows y Linux) para y guardar los cambios. 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:
- Pausa la ejecución con un punto de interrupción.
- Edita la función detenida.
- Presiona Comando o Control + S para aplicar los cambios. El depurador reinicia la función automáticamente.
- 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:
- 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 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.
- 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:
- En la barra de búsqueda, haz clic en el botón Reemplazar.
- 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.