Pausa tu código con puntos de interrupción

Kayce Basques
Kayce Basques
Sofia Emelianova
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ódigoDetenerse en una región de código exacta
Línea de código condicionalRealiza una pausa en una región de código exacta, pero solo cuando haya otra condición que sea verdadera.
Punto de registroRegistra un mensaje en la consola sin pausar la ejecución.
DOMHaz una pausa en el código que cambia o quita un nodo de DOM específico, o alguno de sus elementos secundarios.
XHRPausa cuando una URL de XHR incluye un patrón de cadena.
Objeto de escucha de eventosHaz una pausa en el código que se ejecuta después de que se activa un evento, como click.
ExcepciónHaz una pausa en la línea de código que genera una excepción detectada o no detectada.
FunciónPausa cada vez que se llame a una función específica.
Trusted TypeSe 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.

Un punto de interrupción de línea de código.

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.

Es un punto de interrupción de línea de código condicional.

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.

Es un punto de registro que registra una cadena y un valor de variable en la Consola.

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 Casilla de verificación. junto a ellos.
  • Para quitar un grupo, coloca el cursor sobre él y haz clic en la Casi..

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:

Es el menú contextual de un grupo.

  • 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 Casilla de verificación. 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 Editar. para editarla y en Casi. para quitarla.
  • Cuando edites un punto de interrupción, cambia su tipo en la lista desplegable del editor intercalado.

    Cambiar el tipo de punto de interrupción

  • 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:

    Menú contextual de un punto de interrupción.

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

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.

Menú contextual para la creación de un punto de interrupción de cambio de DOM.

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.

Listas de puntos de interrupción del DOM en los paneles Elements y Sources.

Allí, puedes hacer lo siguiente:

  • Habilita o inhabilita los servicios con Casilla de verificación.
  • 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 Agrega 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.

Crear un punto de interrupción XHR/fetch.

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.

Creación de un punto de interrupción de objeto de escucha de eventos.

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.

Debugger pausó un evento de service worker.

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.

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

  • Marca Casilla de verificación. Detenerse cuando no se detecten excepciones.

    Se detiene en una excepción no detectada cuando se habilita la casilla de verificación correspondiente.

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

  • Marca Casilla de verificación Pausar en excepciones detectadas.

    Se detiene en una excepción detectada cuando se habilita la casilla de verificación correspondiente.

    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.

Se detuvo en una excepción detectada que pasa por un marco no ignorado en la pila de llamadas.

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

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 Casilla de verificación..

    Se detuvo en un incumplimiento de sink cuando se habilita la casilla de verificación correspondiente.

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

  • Marca Casilla de verificación. Incumplimientos de política.

    Se pausa en un incumplimiento de política cuando se habilita la casilla de verificación correspondiente.

    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: