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 explica cada tipo de punto de interrupción disponibles en Herramientas para desarrolladores, así como también cuándo usar y cómo configurar cada tipo. Para ver un instructivo interactivo del proceso de depuración, consulta Comienza 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 el de línea de código. Pero los puntos de interrupción de línea de código pueden ser de configurar, especialmente si no se sabe exactamente dónde buscar o si se trabaja con en una base de código grande. Para ahorrar tiempo al depurar, puede saber cómo y cuándo usar las otras tipos de puntos de interrupción.

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. Herramientas para desarrolladores siempre hace una pausa antes de que se ejecute esta línea de código.

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

1. Haz clic en 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 en él. Aparece un ícono azul 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 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 equivale a una línea de código punto de interrupción, excepto que está establecido 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 quieras detener la ejecución, pero solo cuando alguna condición sea verdadera.

Esos puntos de interrupción son útiles cuando deseas omitir 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:

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 tu 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 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 (puntos de registro) para registrar mensajes en Console sin pausar la ejecución ni saturar tu código con llamadas de console.log().

Para configurar un punto de registro, 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 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 lo harí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. Aparece 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 Console.

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

Editar grupos de puntos de interrupción

En la sección 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, además de 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 junto al número de línea sea transparente.

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

• Quita 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)
• Quitar 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 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 en 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.
  • Habilitar todos los puntos de interrupción
  • Inhabilitar todos los puntos de interrupción
  • Quitar punto de interrupción.
  • Quitar 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 varias ediciones de puntos de interrupción en acción: inhabilitar, quitar, editar condición, revelar la ubicación desde el menú y cambiar el tipo.

Omite los puntos de interrupción con la opción “Nunca pausar aquí”

Usa el punto de interrupción de línea de código Nunca pausar aquí para omitir las pausas que ocurrirían por otros motivos. Esto puede ser útil cuando activaste los puntos de interrupción de excepción, pero el depurador se detiene 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 Fuentes, abre el archivo fuente y busca la línea en la que no deseas realizar una interrupción.
2. Haz clic con el botón derecho en el número de línea en la columna de 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í. Aparece un punto de interrupción naranja (condicional) junto a la línea.

También puedes silenciar el punto de 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.

Nunca detener aquí puede fallar en una línea con varias sentencias si la instrucción que no debe detenerse es diferente de la instrucción que causa la pausa. En el código asignado de origen, no todas las ubicaciones de puntos de interrupción corresponden a la sentencia original que causa la interrupción.

Puntos de interrupción del cambio de DOM

Usa un punto de interrupción de cambio de DOM cuando quieras hacer una pausa en el código que cambia un nodo del DOM o su hijos o hijas.

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

1. Haz clic en la pestaña Elements.
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 Interrumpir en y, luego, selecciona Modificaciones de subárboles, 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 cambios de DOM en:

• Elements > Panel Puntos de interrupción del DOM
• Fuentes > Panel lateral Interrupciones del DOM.

Allí podrás:

• Habilítalas o inhabilitarlas con .
• Hacer clic con el botón derecho > Puedes eliminarlos o revelarlos en el DOM.

Tipos de puntos de interrupción de cambio de DOM

• Modificaciones del subárbol. Se activa cuando se quita un elemento secundario del nodo seleccionado actualmente o se agregan o se cambia el contenido de un elemento secundario. No se activa cuando cambian los atributos del nodo secundario. sobre cualquier cambio en el nodo actualmente seleccionado.
• Modificaciones de atributos: Se activan cuando se agrega o quita un atributo en el un nodo seleccionado actualmente o cuando cambia el valor de un atributo.
• Eliminación de nodos: Se activa cuando se quita el nodo seleccionado actualmente.

Interrupciones de recuperación/XHR

Usa un punto de interrupción de XHR/recuperación cuando quieras interrumpir cuando la URL de solicitud de una XHR contenga un una cadena vacía. Herramientas para desarrolladores se detiene en la línea de código donde la XHR llama a send().

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

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

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 está presente esta cadena en cualquier lugar 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 XHR/recuperación en XHR/fetch Breakpoints 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 quieras hacer una pausa en el código del objeto de escucha que se ejecuta después de un evento activado. 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. Las Herramientas para desarrolladores muestran una lista de categorías de eventos, como como Animation.
3. Marca una de estas categorías para hacer una pausa cada vez que se active un evento de esa categoría, o bien expande la opción la categoría y verifica un evento específico.

En este ejemplo, se muestra cómo crear un punto de interrupción del 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 Debugger que se detuvo en un evento setTimer que ocurrió en un service worker.

También puedes encontrar una lista de objetos de escucha de eventos en Elements > Panel 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 un código excepción no detectada. Puedes pausar ambas excepciones de forma independiente en cualquier sesión de depuración que no sea Node.js.

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

• Marca Pausar en excepciones no detectadas.

  

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

• Marca Pausar en excepciones detectadas.

  

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

Excepciones en llamadas asíncronas

Cuando las casillas de verificación detectadas y no detectadas están activadas, el Debugger intenta pausar 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

Cuando la lista de elementos ignorados está activada, el depurador detiene las excepciones capturadas en fotogramas no omitidos o que pasan por ese marco en la pila de llamadas.

En el siguiente ejemplo, se muestra el Debugger que se pausó en una excepción detectada que arroja el library.js ignorado 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 hacer una pausa cuando se llama a una función específica. Puedes insertar debug() en tu código (como un console.log()) o llámalo desde la consola de Herramientas para desarrolladores. debug() es equivalente 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 las Herramientas para desarrolladores de Cloud. 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 tu línea de código. punto de interrupción.

Puntos de interrupción del tipo de confianza

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

En la sección Breakpoints del panel Sources, ve a la sección CSP Violation Breakpoints y habilita una de las siguientes opciones o ambas. Luego, ejecuta el código:

• Marca Infracciones del receptor.

  

  En este ejemplo, la ejecución se pausa debido a una infracción del receptor.

• Revisa 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 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 realizar una depuración, visita Cómo implementar la CSP y la depuración de Trusted Types en Herramientas para desarrolladores de Chrome.