Pausa tu código con puntos de interrupción

Kayce Basques

Sofia Emelianova

Usa puntos de interrupción para pausar el código JavaScript. En esta guía, se explican los distintos tipos de puntos de interrupción disponibles en DevTools, cómo usarlos y cómo configurarlos. Para ver un instructivo interactivo del proceso de depuración, consulta Comienza con la depuración de JavaScript en Chrome DevTools.

Descripción general del uso de cada tipo de punto de interrupción

El tipo más conocido de punto de interrupción es el de línea de código. Pero la configuración de puntos de interrupción de línea de código puede no ser eficiente, en especial si no se sabe exactamente dónde buscar o si se trabaja con una base de código de gran tamaño. Se puede ahorrar tiempo durante la depuración si se sabe cómo y cuándo usar los demás tipos de puntos de interrupción.

Tipo de punto de interrupción	Úsalo cuando quieras hacer lo siguiente:
Línea de código	Hacer una pausa en una región de código exacta
Línea de código condicional	Pausa en una región de código exacta, pero solo cuando hay otra condición que es verdadera.
Logpoint	Registra un mensaje en Console sin pausar la ejecución.
DOM	Haz una pausa en el código que cambia o quita un nodo de DOM específico, o alguno de sus elementos secundarios.
XHR	Pausa cuando una URL de XHR incluye un patrón de cadena.
Objeto de escucha de eventos	Pausa en el código que se ejecuta después de que se activa un evento, como click.
Excepción	Haz una pausa en la línea de código que genera una excepción detectada o no detectada.
Función	Pausa cada vez que se llame a una función específica.
Tipo de confianza	Se detiene en los incumplimientos de Tipo de confianza.

Puntos de interrupción de línea de código

Los puntos de interrupción de línea de código se usan si se sabe cuál es la región de código exacta que se necesita investigar. DevTools siempre hace una pausa antes de que se ejecute esta línea de código.

Para definir un punto de interrupción de línea de código en DevTools, haz lo siguiente:

1. Haz clic en el panel Fuentes.
2. Abre el archivo que contiene la línea de código en la que deseas agregar la interrupción.
3. Ve a la línea de código.
4. A la izquierda de la línea de código se encuentra la columna del número de línea. Haz clic en él. Aparecerá un ícono azul sobre la columna del número de línea.

En este ejemplo, se muestra un punto de interrupción de línea de código establecido en la línea 29.

Puntos de interrupción de línea de código en el código

Llama a debugger desde tu código para hacer una pausa en esa línea. Esto es equivalente a un punto de interrupción de línea de código, excepto que el punto de interrupción se define en tu código, no en la IU de DevTools.

console.log('a');
console.log('b');
debugger;
console.log('c');

Puntos de interrupción de línea de código condicionales

Usa un punto de interrupción de línea de código condicional cuando quieras detener la ejecución, pero solo cuando se cumpla una condición.

Estos puntos de interrupción son útiles cuando deseas omitir pausas que no son relevantes para tu caso, especialmente en un bucle.

Para definir un punto de interrupción de línea de código condicional, haz lo siguiente:

1. Abre el panel Sources.
2. Abre el archivo que contiene la línea de código en la que deseas agregar la interrupción.
3. Ve a la línea de código.
4. A la izquierda de la línea de código se encuentra la columna del número de línea. Haz clic con el botón derecho en ella.
5. Selecciona Agregar punto de interrupción condicional. Aparecerá un diálogo debajo de la línea de código.
6. Ingresa tu condición en el diálogo.
7. Presiona Intro para activar el punto de interrupción. Aparecerá un ícono naranja con un signo de interrogación sobre la columna del número de línea.

En este ejemplo, se muestra un punto de interrupción condicional de línea de código que se activó solo cuando x superó 10 en un bucle en la iteración i=6.

Registra los puntos de interrupción de línea de código

Usa puntos de interrupción de línea de código de registro (logpoints) para registrar mensajes en la consola sin pausar la ejecución ni desordenar tu código con llamadas a console.log().

Para establecer un punto de registro, sigue estos pasos:

1. Abre el panel Sources.
2. Abre el archivo que contiene la línea de código en la que deseas agregar la interrupción.
3. Ve a la línea de código.
4. A la izquierda de la línea de código se encuentra la columna del número de línea. Haz clic con el botón derecho en ella.
5. Selecciona Agregar punto de registro. Aparecerá un diálogo debajo de la línea de código.

6. Ingresa el mensaje de registro en el diálogo. Puedes usar la misma sintaxis que usarías con una llamada a console.log(message).

   Por ejemplo, puedes registrar lo siguiente:

   "A string " + num, str.length > 1, str.toUpperCase(), obj
   

   En este caso, el mensaje registrado es el siguiente:

   // str = "test"
   // num = 42
   // obj = {attr: "x"}
   A string 42 true TEST {attr: 'x'}
   

7. Presiona Intro para activar el punto de interrupción. Aparecerá un ícono rosa con dos puntos sobre la columna del número de línea.

En este ejemplo, se muestra un punto de registro en la línea 30 que registra una cadena y un valor de variable en la Consola.

Edita los puntos de interrupción de línea de código

Usa la sección Breakpoints para inhabilitar, editar o quitar puntos de interrupción de línea de código.

Edita grupos de puntos de interrupción

La sección Puntos de interrupción agrupa los puntos de interrupción por archivo y los ordena por números de línea y columna. Puedes hacer lo siguiente con los grupos:

• Para contraer o expandir un grupo, haz clic en su nombre.
• Para habilitar o inhabilitar un grupo o un punto de interrupción de forma individual, haz clic en junto a ellos.
• Para quitar un grupo, coloca el cursor sobre él y haz clic en .

En este video, se muestra cómo contraer grupos y habilitar o inhabilitar puntos de interrupción uno por uno o por grupos. Cuando inhabilitas un punto de interrupción, el panel Sources hace que su marcador junto al número de línea sea transparente.

Los grupos tienen menús contextuales. En la sección Puntos de interrupción, haz clic con el botón derecho en un grupo y elige una de las siguientes opciones:

• Quita todos los puntos de interrupción del archivo (grupo).
• Inhabilita todos los puntos de interrupción en el archivo.
• Habilita todos los puntos de interrupción en el archivo.
• Quita todos los puntos de interrupción (en todos los archivos).
• Quita otros puntos de interrupción (en otros grupos).

Edita los puntos de interrupción

Para editar un punto de interrupción, haz lo siguiente:

• Haz clic en junto a un punto de interrupción para habilitarlo o inhabilitarlo. Cuando inhabilitas un punto de interrupción, el panel Sources hace que su marcador junto al número de línea sea transparente.
• Coloca el cursor sobre una pausa y haz clic en para editarlo y en para quitarlo.

• Cuando edites un punto de interrupción, cambia su tipo en la lista desplegable del editor intercalado.

  

• Haz clic con el botón derecho en un punto de interrupción para ver su menú contextual y elige una de las siguientes opciones:

  

  • Mostrar ubicación
  • Edita la condición o el punto de registro.
  • Habilita todos los puntos de interrupción.
  • Inhabilita todos los puntos de interrupción.
  • Quita el punto de interrupción.
  • Quita los demás puntos de interrupción (en todos los archivos).
  • Quita todos los puntos de interrupción (en todos los archivos).

Mira el video para ver varias ediciones de puntos de interrupción en acción: inhabilita, quita, edita la condición, revela la ubicación desde el menú y cambia el tipo.

Omitir puntos de interrupción con "Nunca detener aquí"

Usa un punto de interrupción de línea de código Never pause here para omitir las pausas que se producirían por otros motivos. Esto puede ser útil cuando activaste los puntos de interrupción de excepción, pero el depurador sigue deteniéndose en una excepción particularmente ruidosa que no te interesa depurar.

Para silenciar una ubicación de descanso, sigue estos pasos:

1. En el panel Sources, abre el archivo de origen y busca la línea en la que no quieres hacer una pausa.
2. Haz clic con el botón derecho en el número de línea de la columna de números de línea a la izquierda, junto a la sentencia que causa la pausa.
3. En el menú desplegable, selecciona Nunca pausar aquí. Aparecerá un punto de interrupción naranja (condicional) junto a la línea.

También puedes silenciar la interrupción mientras la ejecución está en pausa. Mira el siguiente video para conocer el flujo de trabajo.

Con Nunca hacer una pausa aquí, puedes silenciar las instrucciones del depurador y todos los demás tipos de puntos de interrupción, excepto los puntos de interrupción de línea de código y los puntos de interrupción del objeto de escucha de eventos.

Es posible que Never pause here falle en una línea con varias instrucciones si la instrucción que no debe detenerse es diferente de la que causa la detención. En el código asignado a la fuente, no todas las ubicaciones de los puntos de interrupción corresponden a la sentencia original que causa la interrupción.

Punto clave: Los puntos de interrupción de línea de código anula otros motivos de interrupción que se originan en la misma sentencia. Esto significa que, para evitar la detención, también puedes usar puntos de registro y puntos de interrupción condicionales cuya condición se evalúa como falsa. De hecho, un punto de interrupción Nunca detener aquí es solo un punto de interrupción condicional con una condición false.

Puntos de interrupción de cambio de DOM

Usa un punto de interrupción de cambio de DOM cuando desees hacer una pausa en el código que cambie un nodo del DOM o alguno de sus elementos secundarios.

Para definir un punto de interrupción de cambio de DOM, haz lo siguiente:

1. Haz clic en la pestaña Elementos.
2. Ve al elemento en el que deseas establecer el punto de interrupción.
3. Haz clic con el botón derecho en el elemento.
4. Coloca el cursor sobre Break on y, luego, selecciona Subtree modifications, Attribute modifications o Node removal.

En este ejemplo, se muestra el menú contextual para crear un punto de interrupción de cambio de DOM.

Puedes encontrar una lista de puntos de interrupción de cambio de DOM en los siguientes lugares:

• Elementos > Panel Puntos de interrupción del DOM.
• Sources > DOM Breakpoints (panel lateral).

Allí, puedes hacer lo siguiente:

• Habilita o inhabilita los servicios con .
• Haz clic con el botón derecho > Quitar o Mostrar en el DOM.

Tipos de puntos de interrupción de cambio de DOM

• Modificaciones del subárbol. Se activa cuando se quita o se agrega un elemento secundario del nodo actualmente seleccionado, o cuando se modifica el contenido de un elemento secundario. No se activa cuando cambian los atributos de un nodo secundario ni cuando se realizan cambios en el nodo actualmente seleccionado.
• Modificación de atributos: Se activa cuando se agrega o quita un atributo en el nodo actualmente seleccionado, o cuando cambia el valor de un atributo.
• Eliminación de nodos: Se activa cuando se quita el nodo actualmente seleccionado.

Puntos de interrupción de recuperación/XHR

Usa un punto de interrupción de recuperación/XHR si deseas interrumpir cuando la URL de solicitud de una XHR contiene una cadena especificada. DevTools hace una pausa en la línea de código donde la XHR llama a send().

Un ejemplo de cuándo esto es útil es cuando ves que tu página solicita una URL incorrecta y quieres encontrar rápidamente el código fuente de AJAX o Fetch que está causando la solicitud incorrecta.

Para establecer un punto de interrupción de recuperación/XHR, haz lo siguiente:

1. Haz clic en el panel Fuentes.
2. Expande el panel XHR Breakpoints.
3. Haz clic en Agregar punto de interrupción.
4. Ingresa la cadena en la que deseas realizar la interrupción. DevTools hace una pausa cuando esta cadena está presente en cualquier parte de la URL de solicitud de una XHR.
5. Presiona Intro para confirmar.

En este ejemplo, se muestra cómo crear un punto de interrupción de recuperación/XHR en Puntos de interrupción de recuperación/XHR para cualquier solicitud que contenga org en la URL.

Puntos de interrupción del objeto de escucha de eventos

Usa los puntos de interrupción de objeto de escucha de eventos cuando desees hacer una pausa en el código del objeto de escucha de eventos que se ejecuta después de la activación de un evento. Puedes seleccionar eventos específicos, como click, o categorías de eventos, como todos los eventos del mouse.

1. Haz clic en el panel Fuentes.
2. Expande el panel Event Listener Breakpoints. DevTools muestra una lista de categorías de eventos, como Animation.
3. Marca una de estas categorías para hacer una pausa siempre que se active un evento de esa categoría, o expande la categoría y marca un evento específico.

En este ejemplo, se muestra cómo crear un punto de interrupción de objeto de escucha de eventos para deviceorientation.

Además, el depurador se detiene en los eventos que ocurren en trabajadores web o worklets de cualquier tipo, incluidas las worklets de almacenamiento compartido.

En este ejemplo, se muestra el depurador detenido en un evento setTimer que ocurrió en un trabajador de servicio.

También puedes encontrar una lista de objetos de escucha de eventos en el panel Elementos > Objetos de escucha de eventos.

Puntos de interrupción de excepción

Usa puntos de interrupción de excepción cuando desees hacer una pausa en la línea de código que genera una excepción detectada o no detectada. Puedes pausar ambas excepciones de forma independiente en cualquier sesión de depuración que no sea Node.js.

Punto clave: Actualmente, en una sesión de depuración de Node.js, puedes pausar las excepciones detectadas solo si también pausas las que no se detectaron. Consulta el error #1382762 de Chromium para obtener más información.

En la sección Puntos de interrupción del panel Fuentes, habilita una de las siguientes opciones o ambas y, luego, ejecuta el código:

• Marca Detenerse cuando no se detecten excepciones.

  

  En este ejemplo, la ejecución se detiene en una excepción no detectada.

• Marca Detenerse cuando se detecten excepciones.

  

  En este ejemplo, la ejecución se detiene en una excepción detectada.

Excepciones en las llamadas asíncronas

Con las casillas de verificación de errores capturados y no capturados activadas, el depurador intenta pausar las excepciones correspondientes en las llamadas síncronas y asíncronas. En el caso asíncrono, el depurador busca controladores de rechazo en promesas para determinar cuándo detenerse.

Excepciones detectadas y código ignorado

Con la Lista de elementos ignorados activada, el depurador se detiene en las excepciones detectadas en marcos no ignorados o que pasan por un marco de este tipo en la pila de llamadas.

En el siguiente ejemplo, se muestra el depurador detenido en una excepción detectada que arroja el library.js ignorado que pasa por el mycode.js no ignorado.

Para obtener más información sobre el comportamiento del depurador en casos extremos, prueba una colección de situaciones en esta página de demostración.

Puntos de interrupción de la función

Llama a debug(functionName), donde functionName es la función que quieres depurar, cuando desees hacer una pausa cada vez que se llame a una función específica. Puedes insertar debug() en tu código (como una instrucción console.log()) o llamarla desde la consola de DevTools. debug() equivale a establecer un punto de interrupción de línea de código en la primera línea de la función.

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

Asegúrate de que la función objetivo esté dentro del alcance

DevTools genera un ReferenceError si la función que deseas depurar no está dentro del alcance.

(function () {
  function hey() {
    console.log('hey');
  }
  function yo() {
    console.log('yo');
  }
  debug(yo); // This works.
  yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.

Asegurarse de que la función objetivo esté dentro del alcance puede ser difícil si llamas a debug() desde la consola de DevTools. Esta es una estrategia:

1. Establece un punto de interrupción de línea de código en un lugar donde la función esté dentro del alcance.
2. Activa el punto de interrupción.
3. Llama a debug() en la consola de DevTools mientras el código esté en pausa en el punto de interrupción de línea de código.

Puntos de interrupción de Trusted Types

La API de Trusted Type proporciona protección contra exploits de seguridad conocidos como ataques de secuencia de comandos entre sitios (XSS).

Término clave: La escritura de secuencias de comandos entre sitios basada en DOM ocurre cuando los datos de una fuente controlada por el usuario (como el nombre de usuario o la URL de redireccionamiento tomada del fragmento de URL) llegan a un sumidero, que es una función como eval() o un set de propiedades como .innerHTML, que puede ejecutar código JavaScript arbitrario.

En la sección Puntos de interrupción del panel Fuentes, ve a la sección Puntos de interrupción de incumplimiento de CSP y habilita una de las siguientes opciones o ambas. Luego, ejecuta el código:

• Consulta los Incumplimientos del receptor de .

  

  En este ejemplo, la ejecución se detiene en un incumplimiento de sink.

• Marca Incumplimientos de política.

  

  En este ejemplo, la ejecución se detiene en un incumplimiento de política. Las políticas de Trusted Types se configuran con trustedTypes.createPolicy.

Puedes encontrar más información para usar la API en los siguientes recursos:

• Para mejorar tus objetivos de seguridad, consulta Cómo evitar vulnerabilidades de secuencias de comandos entre sitios basadas en DOM con Trusted Types.
• Para depurar, consulta Implementación de la CSP y la depuración de Trusted Types en Herramientas para desarrolladores de Chrome.