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. Sin embargo, la configuración de los puntos de interrupción de línea de código puede ser ineficiente, en especial si no sabes exactamente dónde buscar o si trabajas con una base de código grande. 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	Detenerse en una región de código exacta
Línea de código condicional	Realiza una pausa en una región de código exacta, pero solo cuando haya otra condición que sea verdadera.
Punto de registro	Registra un mensaje en la consola 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	Haz una 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.
Trusted Type	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 cuando se sabe la región de código exacta que necesitas 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 tu 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 Fuentes.
2. Abre el archivo que contiene la línea de código en la que deseas realizar la divisió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 la condición en el diálogo.
7. Presiona Intro para activar el punto de interrupción. Aparece un ícono naranja con un signo de interrogación en la parte superior de la columna del número de línea.

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

Registrar 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 configurar un punto de registro, haz lo siguiente:

1. Abre el panel Sources.
2. Abre el archivo que contiene la línea de código en la que deseas realizar la divisió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 tu mensaje de registro en el cuadro de 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 Puntos de interrupción 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 la .

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.
• Quitar todos los puntos de interrupción (en todos los archivos)
• Quita otros puntos de interrupción (en otros grupos).

Edita 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 editarla y en para quitarla.

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

Omite los puntos de interrupción con la opción “Nunca pausar 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 pausa, haz lo siguiente:

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 en la columna del número de línea a la izquierda, junto a la instrucción que causa la interrupción.
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 Never pause here, puedes silenciar las declaraciones del depurador y cualquier otro tipo de punto de interrupción, excepto los puntos de interrupción de línea de código y los interrupciones de los objetos 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 anulan 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.
• Fuentes > Interrupciones del DOM.

Allí, puedes hacer lo siguiente:

• Habilita o inhabilita los servicios con .
• Haz clic con el botón derecho > Eliminar o Revelar 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 del nodo secundario ni cuando se realizan cambios en el nodo seleccionado actualmente.
• 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. Herramientas para desarrolladores se detiene cuando esta cadena está presente en cualquier parte de la URL de solicitud de 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 detener la publicación cada vez que se active un evento de esa categoría, o bien expande la categoría y verifica 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 detiene los eventos que ocurren en trabajadores web o worklets de cualquier tipo, incluidos los Worklets del 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 quieras hacer una pausa en la línea de código que arroja 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 detalles.

En la sección Breakpoints del panel Sources, 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 Pausar en excepciones detectadas.

  

  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 detenerse en las excepciones correspondientes en las llamadas síncronas y asíncronas. En este caso asíncrono, Debugger busca controladores de rechazo en las promesas para determinar cuándo detenerse.

Se ignoró el código y se encontraron excepciones capturadas

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 de Debugger 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 sentencia console.log()) o llamarlo desde la consola de Herramientas para desarrolladores. 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

Las Herramientas para desarrolladores arrojan una ReferenceError si la función que quieres 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 Herramientas para desarrolladores mientras el código aún está pausado en el punto de interrupción de línea de código.

Puntos de interrupción de Trusted Types

La API de Trusted Type brinda protección contra vulnerabilidades de seguridad conocidas como ataques de secuencias 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 sobre cómo usar la API en los siguientes vínculos:

• Para profundizar tus objetivos de seguridad, consulta Cómo evitar las 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.