Pausar el código con puntos de interrupción

Use puntos de interrupción para pausar el código JavaScript. En este artículo se explica cada tipo de punto de interrupción disponible en DevTools, así como cuándo usar y cómo establecer cada tipo.

Para obtener un tutorial introductorio con una página web existente, vaya a Introducción a la depuración de JavaScript.

Información general sobre 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. Pero los puntos de interrupción de línea de código pueden ser ineficientes para establecer, especialmente si no sabe exactamente dónde buscar o si está trabajando con una base de código grande. Puede ahorrar tiempo al depurar al saber cómo y cuándo usar los otros tipos de puntos de interrupción.

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

Use un punto de interrupción de línea de código cuando sepa la región exacta del código que necesita investigar. DevTools siempre se 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 DevTools:

1. Elija la herramienta Orígenes.

2. Abra el archivo que contiene la línea de código en la que desea interrumpir.

3. Vaya a la línea de código.

4. A la izquierda de la línea de código se encuentra la columna de número de línea. Elija. Aparece un icono rojo junto a la columna de número de línea.

   

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

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

Ejecute el debugger método desde el código para pausar en esa línea. Esto equivale a un punto deinterrupción de línea de código , excepto que el punto de interrupción se establece en el código, no en la interfaz de usuario de DevTools.

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

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

Use un punto de interrupción de línea de código condicional cuando sepa la región exacta del código que necesita investigar, pero desea pausar solo cuando se cumple alguna otra condición.

Para establecer un punto de interrupción de línea de código condicional:

1. Elija la herramienta Orígenes.

2. Abra el archivo que contiene la línea de código en la que desea interrumpir.

3. Vaya a la línea de código.

4. A la izquierda de la línea de código se encuentra la columna de número de línea. Mantenga el mouse en el número de línea y abra el menú contextual (haga clic con el botón secundario).

5. Elija Agregar punto de interrupción condicional. Se muestra un cuadro de diálogo debajo de la línea de código.

6. Escriba la condición en el cuadro de diálogo.

7. Seleccione Enter para activar el punto de interrupción. Icono junto a la columna de número de línea.

   

   Punto de interrupción de línea de código condicional

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

Use el panel Puntos de interrupción para deshabilitar o quitar puntos de interrupción de línea de código de una única ubicación.

• Active la casilla junto a una entrada para deshabilitar ese punto de interrupción.

• Mantenga el mouse sobre una entrada y abra el menú contextual (haga clic con el botón secundario) para quitar ese punto de interrupción.

• Mantenga el mouse en cualquier lugar del panel Puntos de interrupción y abra el menú contextual (haga clic con el botón secundario) para desactivar todos los puntos de interrupción, deshabilitar todos los puntos de interrupción o quitar todos los puntos de interrupción. Deshabilitar todos los puntos de interrupción equivale a desactivar cada uno. La desactivación de todos los puntos de interrupción indica a DevTools que ignore todos los puntos de interrupción de línea de código, pero que también mantenga el estado habilitado para que cada uno esté en el mismo estado que antes al reactivar cada uno.

  

  Puntos de interrupción desactivados en el panel Puntos de interrupción

Puntos de interrupción de cambios dom

Use un punto de interrupción de cambio dom cuando desee pausar el código que cambia un nodo DOM o los elementos secundarios.

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

1. Elija la herramienta Elementos.

2. Vaya al elemento en el que desea establecer el punto de interrupción.

3. Mantenga el mouse sobre el elemento y abra el menú contextual (haga clic con el botón secundario).

4. Mantenga el mouse en Interrumpir , luego elija Modificaciones de subárbol, Modificaciones de atributoo Eliminación de nodos.

   

   Menú contextual para crear un punto de interrupción de cambio dom

Tipos de puntos de interrupción de cambios dom

• Modificaciones de subárbol. Se desencadena 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 desencadena en los cambios de atributo de nodo secundario ni en los cambios realizados en el nodo seleccionado actualmente.
• Modificaciones de atributos: se desencadenan cuando se agrega o quita un atributo en el nodo seleccionado actualmente, o cuando cambia un valor de atributo.
• Eliminación de nodos: se desencadena cuando se quita el nodo seleccionado actualmente.

Puntos de interrupción XHR/Fetch

Use un punto de interrupción XHR cuando desee interrumpir cuando la dirección URL de solicitud de un XHR contenga una cadena especificada. DevTools se detiene en la línea de código donde XHR ejecuta el send() método.

Un ejemplo de cuándo esto es útil es cuando la página web solicita una dirección URL incorrecta y desea encontrar rápidamente el código fuente AJAX o Fetch que está provocando la solicitud incorrecta.

Para establecer un punto de interrupción XHR:

1. Elija la herramienta Orígenes.

2. Expanda el panel Puntos de interrupción XHR.

3. Elija Agregar punto de interrupción.

4. Escriba la cadena en la que desea romper. DevTools se detiene cuando esta cadena está presente en cualquier lugar de una dirección URL de solicitud XHR.

5. Seleccione Enter para confirmar.

   

   Crear un punto de interrupción XHR

Puntos de interrupción de escucha de eventos

Use puntos de interrupción de escucha de eventos cuando desee pausar el código de escucha de eventos que se ejecuta después de que se desencadena un evento. Puede seleccionar eventos específicos, como , o click categorías de eventos, como todos los eventos del mouse.

1. Elija la herramienta Orígenes.

2. Expanda el panel Puntos de interrupción de escucha de eventos. DevTools muestra una lista de categorías de eventos, como Animation.

3. Comprueba una de estas categorías para pausar cada vez que se desencadena cualquier evento de esa categoría, o expande la categoría y comprueba un evento específico.

   

   Crear un punto de interrupción de escucha de eventos

Puntos de interrupción de excepción

Use puntos de interrupción de excepción cuando desee pausar en la línea de código que inicia una excepción capturada o no capturada.

1. Elija la herramienta Orígenes.

2. Elija Pausar en excepciones ( ). El icono se vuelve azul cuando está habilitado.

   

   Botón Pausar en excepciones

3. Opcional. Active la casilla Pausar en excepciones capturadas si también desea pausar las excepciones capturadas, además de las no capturadas.

   

   Pausada en una excepción no detectada

Puntos de interrupción de funciones

Ejecute el método, donde está el comando, la función o el método que desea depurar, cuando desee pausar cada vez que se ejecute debug(method) method una función específica. Puede insertar en debug() el código (como una console.log() instrucción) o ejecutar el método 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úrese de que la función de destino está en el ámbito

DevTools inicia un ReferenceError si la función que desea depurar no está en el ámbito.

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

Asegurarse de que la función de destino está en el ámbito es complicado si está ejecutando el debug() método desde la consola de DevTools. Esta es una estrategia:

1. Establezca un punto de interrupción de línea de código en algún lugar donde la función esté en el ámbito.
2. Desencadene el punto de interrupción.
3. Ejecute el debug() método en la Consola de DevTools mientras el código aún está en pausa en el punto de interrupción de línea de código.

Consulte también

• Usar las características del depurador: usar la interfaz de usuario del depurador en la herramienta Orígenes.
• Introducción a la depuración de JavaScript en Microsoft Edge DevTools: un tutorial introductorio con una página web existente.
• Introducción a la herramienta Sources: el depurador forma parte de la herramienta Orígenes, que incluye un editor de JavaScript.

Este trabajo se publica bajo una licencia de Atribución 4.0 Internacional de Creative Commons.