Referencia de depuración de JavaScript

Kayce Basques

Sofia Emelianova

Descubre nuevos flujos de trabajo de depuración con esta referencia integral de la depuración de Herramientas para desarrolladores de Chrome atributos.

Consulta Comienza con la depuración de JavaScript en Chrome DevTools para aprender 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 en medio de su ejecución. Para obtener información sobre cómo establecer puntos de interrupción, consulta Cómo pausar el 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 Console para consultar las variables, constantes y objetos evaluados.

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 el código esté en pausa, examínalo, una expresión a la vez, y analiza el flujo de control y los valores de la propiedad a lo largo del proceso.

Omitir la 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, 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 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, haz clic en Resume Script Execution. DevTools ejecuta la secuencia de comandos hasta el siguiente punto de interrupción, si lo hay.

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 presionada la opción Resume Script Execution y, luego, selecciona Force script execution .

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

Cómo ver y editar propiedades locales, de cierre y globales

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

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 a la que 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.

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 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 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. Para revisar la declaración 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 establecerlo.

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

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 marcos de terceros, habilita Mostrar marcos que están en la lista de elementos ignorados en la sección Pila de llamadas.

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

1. En el panel Sources, abre 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 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 asíncronos.

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.

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. Son similares a los archivos fuente que ves en tu IDE. DevTools genera estos archivos en función de los mapas de origen que proporcionan 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 > Agrupa los archivos por creado/implementado la opción en el menú de tres puntos en la parte superior del árbol de archivos.

Oculta las fuentes de 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 todas estas secuencias de comandos, selecciona Fuentes > Página > Ocultar las fuentes incluidas en la lista de elementos ignorados .

Ignora 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 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, 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 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:

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.

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:

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 te encuentras ejecutando el mismo código de depuración en Console una y otra vez, considera usar fragmentos. Los fragmentos son secuencias de comandos ejecutables que escribes, almacenas y ejecutas en DevTools.

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 de observación para ver los valores de las expresiones personalizadas. Puedes ver cualquier JavaScript válido expresión.

• 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 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 los 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 contraer 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 {...} junto a él.

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 es necesario que realices los cambios en un navegador externo y, luego, vuelvas a cargar la página. Puedes editar tu secuencia de comandos 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 Comando + S (Mac) o Ctrl + S (Windows, 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 detenida 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 más alta en la pila de llamadas.
• No debe haber llamadas recursivas a la misma función más abajo en la pila.

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

1. Detener la ejecución con un punto de interrupción
2. Edita la función detenida.
3. Presiona Comando/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 inicialmente un tipo string incorrecto. Así, en lugar de sumar 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:

1. En la barra de búsqueda, haz clic en el botón Reemplazar.
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.