Pausa tu código con puntos de interrupción

Usa puntos de interrupción para pausar tu código JavaScript. En esta guía, se explica cada tipo de punto de interrupción disponible en Herramientas para desarrolladores, así como cuándo usarlos y cómo configurar cada tipo. Para ver un instructivo interactivo del proceso de depuración, consulta Cómo comenzar a depurar JavaScript en las Herramientas para desarrolladores de Chrome.

Descripción general de cuándo usar cada tipo de punto de interrupción

El tipo de punto de interrupción más conocido es la línea de código. Sin embargo, la configuración de puntos de interrupción de línea de código puede resultar ineficiente, en especial si no sabes con exactitud dónde buscar o si trabajas con una base de código grande. Puedes ahorrar tiempo durante la depuración si sabes cómo y cuándo usar los otros tipos de interrupciones.

Tipo de punto de interrupción	Usa esta opción cuando quieras ...
Línea de código	Haz 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 alguna otra condición es verdadera.
Punto de registro	Registra un mensaje en la consola sin detener la ejecución.
DOM	Detén el código que cambia o quita un nodo del DOM específico, o sus elementos secundarios.
XHR	Pausa cuando una URL de XHR contiene 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	Pausa la línea de código que arroja una excepción detectada o no detectada.
Función	Pausa cada vez que se llama a una función específica.
Tipo de confianza	Detenga las infracciones relacionadas con Tipo de confianza.

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

Usa un punto de interrupción de línea de código cuando sepas la región de código exacta que debes investigar. Las Herramientas para desarrolladores siempre se pausan antes de ejecutar esta línea de código.

Para establecer un punto de interrupción de línea de código en Herramientas para desarrolladores, haz lo siguiente:

1. Haz clic en la pestaña Fuentes.
2. Abre el archivo que contiene la línea de código en la que quieres generar 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 el código para hacer una pausa en esa línea. Esto equivale a una interrupción de línea de código, con la excepción de que el punto de interrupción se establece en tu código, no en la IU de Herramientas para desarrolladores.

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 desees detener la ejecución, pero solo cuando alguna condición sea verdadera.

Esos puntos de interrupción son útiles cuando quieres omitir las pausas que son irrelevantes para tu caso, especialmente en un bucle.

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

1. Abre la pestaña Fuentes.
2. Abre el archivo que contiene la línea de código en la que quieres generar 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 la condición en el cuadro de diálogo.
7. Presiona Intro para activar el punto de interrupción. Aparece 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 de línea de código condicional que se activa solo cuando x supera 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 (puntos de registro) para registrar mensajes en Console sin pausar la ejecución ni saturar el código con llamadas a console.log().

Para configurar un punto de registro, haz lo siguiente:

1. Abre la pestaña Fuentes.
2. Abre el archivo que contiene la línea de código en la que quieres generar 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 cuadro de diálogo. Puedes usar la misma sintaxis que usarías para una llamada 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:

   // str = "test"
   // num = 3
   // 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 en la parte superior de 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 string y un valor de variable en la consola.

Editar puntos de interrupción de línea de código

Usa el panel Breakpoints para inhabilitar, editar o quitar los puntos de interrupción de línea de código.

Editar grupos de puntos de interrupción

En el panel Breakpoints, se agrupan los puntos de interrupción por archivo y se ordenan por número 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 al grupo o al punto de interrupción.
• Para quitar un grupo, coloca el cursor sobre él y haz clic en la .

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

Los grupos tienen menús contextuales. En el panel Breakpoints, haz clic con el botón derecho en un grupo y elige lo siguiente:

• Quitar todos los puntos de interrupción del archivo (grupo)
• Inhabilitar todos los puntos de interrupción en el archivo
• Habilitar 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).

Editar 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 el marcador que se encuentra junto al número de línea sea transparente.
• Coloca el cursor sobre un punto de interrupción y haz clic en para editarlo y en para quitarlo.

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

  

• Haz clic con el botón derecho en un punto de interrupción para ver el menú contextual y elige una de las 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.
  • Quitar punto de interrupción
  • Quita otros puntos de interrupción (en todos los archivos).
  • Quitar todos los puntos de interrupción (en todos los archivos)

Mira el video para ver en acción varios puntos de interrupción: inhabilitarlos, quitarlos, editar la condición, revelar la ubicación desde el menú y cambiar el tipo.

Puntos de interrupción de cambio de DOM

Usa un punto de interrupción de cambio de DOM cuando quieras pausar en el código que cambia un nodo del DOM o sus elementos secundarios.

Para establecer un punto de interrupción de cambio de DOM:

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 Interrupción y, luego, selecciona Modificaciones del subárbol, Modificaciones de atributos o Eliminación de nodos.

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

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

• Elementos > Panel de interrupciones de DOM.
• Fuentes > Panel lateral DOM Breakpoints.

Allí podrás hacer lo siguiente:

• Habilítalos o inhabilítalos con .
• Haz clic con el botón derecho y selecciona Quitar 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 seleccionado actualmente, o cuando se cambia el contenido de un elemento secundario. No se activa cuando se cambian los atributos del nodo secundario ni cuando se realizan cambios en el nodo seleccionado actualmente.
• Modificaciones de atributos: Se activan cuando se agrega o se quita un atributo en el nodo seleccionado actualmente, o cuando cambia el valor de un atributo.
• Eliminación de nodo: Se activa cuando se quita el nodo seleccionado actualmente.

Interrupciones de recuperación/XHR

Usa un punto de interrupción de recuperación/XHR cuando quieras interrumpir cuando la URL de solicitud de una XHR contenga una string especificada. Las Herramientas para desarrolladores hacen una pausa en la línea de código donde la XHR llama a send().

Esto puede ser útil, por ejemplo, cuando ves que tu página solicita una URL incorrecta y deseas encontrar rápidamente el código fuente AJAX o Fetch que causa la solicitud incorrecta.

Para establecer un punto de interrupción de recuperación/XHR:

1. Haz clic en la pestaña Fuentes.
2. Expande el panel XHR Breakpoints.
3. Haz clic en Agregar interrupción.
4. Ingresa la cadena en la que quieres realizar la interrupción. Herramientas para desarrolladores se detiene cuando esta cadena está presente en cualquier parte de la URL de una solicitud XHR.
5. Presiona Intro para confirmar.

En este ejemplo, se muestra cómo crear un punto de interrupción de recuperación/XHR en interrupciones 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 del 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 que se activa un evento. Puedes seleccionar eventos específicos, como click, o categorías de eventos, como todos los eventos del mouse.

1. Haz clic en la pestaña Fuentes.
2. Expande el panel Event Listener Breakpoints. Herramientas para desarrolladores muestra una lista de categorías de eventos, como Animation.
3. Marca una de estas categorías para pausar cada vez 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, Debugger se detiene en los eventos que ocurren en los trabajadores web o en los trabajos de cualquier tipo, incluidos los Worklets de almacenamiento compartido.

En este ejemplo, se muestra el elemento Debugger detenido en un evento setTimer que ocurrió en un service worker.

También puedes encontrar una lista de objetos de escucha de eventos en el panel Elements > Event Listeners.

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 en ambas excepciones de forma independiente en cualquier sesión de depuración que no sea Node.js.

En el panel Breakpoints de la pestaña Sources, habilita una de las siguientes opciones o ambas y, luego, ejecuta el código:

• Marca Pausar en excepciones no detectadas.

  

  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 llamadas asíncronas

Con una de las casillas de verificación detectadas y no detectadas activadas, el Debugger intenta hacer una pausa en las excepciones correspondientes en las llamadas síncronas y asíncronas. En el caso asíncrono, Debugger busca controladores de rechazo en las promesas para determinar cuándo detenerse.

Se detectaron excepciones y se ignoró el código.

Cuando la Lista de ignorados está activada, Debugger hace una pausa en las excepciones capturadas en marcos no ignorados o cuando pasan por ese marco en la pila de llamadas.

En el siguiente ejemplo, se muestra el elemento Debugger detenido en una excepción detectada que arroja el library.js ignorado y que pasa por 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), en la que functionName es la función que deseas depurar cuando quieras pausar 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 complicado si llamas a debug() desde la consola de Herramientas para desarrolladores. Esta es una estrategia:

1. Establece un punto de interrupción de línea de código en algún 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 tipo de confianza

La API de Trusted Type brinda protección contra las vulnerabilidades de seguridad conocidas como ataques de secuencia de comandos entre sitios (XSS).

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

• Marca Incumplimientos del receptor.

  

  En este ejemplo, la ejecución se detiene en un incumplimiento del receptor.

• Marca Incumplimientos de política.

  

  En este ejemplo, la ejecución se detiene debido a un incumplimiento de política. Las políticas de tipo de confianza se configuran con trustedTypes.createPolicy.

Puedes encontrar más información sobre cómo usar la API:

• Para ampliar tus objetivos de seguridad, consulta el artículo Evita las vulnerabilidades de secuencias de comandos entre sitios basadas en DOM con Trusted Types.
• Para realizar una depuración, consulta Cómo implementar la CSP y la depuración de Trusted Types en las Herramientas para desarrolladores de Chrome.