Cómo pausar el código con puntos de interrupción en Microsoft Edge DevTools

10/19/2020
Tiempo de lectura: 8 minutos

Usa puntos de interrupción para pausar el código de JavaScript. En esta guía se explica cada tipo de punto de interrupción que está disponible en DevTools, así como Cuándo usar y cómo establecer cada tipo. Para obtener un tutorial práctico del proceso de depuración, vaya a Introducción a la depuración de JavaScript en Microsoft Edge DevTools.

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 resultar ineficaces para establecerlos, sobre todo si no sabe exactamente dónde mirar o si está trabajando con un código base grande. Puede ahorrar tiempo al depurar si conoce cómo y Cuándo usar los otros tipos de puntos de interrupción.

Tipo de punto de interrupción	Use esto cuando quiera hacer una pausa...
Línea de código	En una región exacta del código.
Línea de código condicional	En una región exacta de código, pero solo cuando alguna otra condición sea verdadera.
DOM	En el código que cambia o quita un nodo DOM específico o los elementos secundarios.
XHR	Cuando una dirección URL de XHR contiene un patrón de cadena.
Detector de eventos	En el código que se ejecuta después de que se ejecute un evento, como, por ejemplo `click` ,.
Excepción	En la línea de código que produce una excepción detectada o no detectada.
Función	Siempre que se ejecute un comando, una función o un método específico.

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

Use un punto de interrupción de línea de código cuando Conozca la región exacta de 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:

Haga clic en la pestaña orígenes .
Abra el archivo que contiene la línea de código en la que desea interrumpir.
Ir a la línea de código.
A la izquierda de la línea de código se encuentra la columna de número de línea. Haz clic en él. Aparece un icono rojo junto a la columna número de línea.

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

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

Ejecuta el debugger método desde tu código para hacer una pausa en esa línea. Es equivalente a un punto de interrupción de línea de código, excepto en 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 condicional

Use un punto de interrupción de línea de código condicional cuando Conozca la región exacta de código que necesita investigar, pero solo desea pausarla cuando se cumpla otra condición.

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

Haga clic en la pestaña orígenes .
Abra el archivo que contiene la línea de código en la que desea interrumpir.
Ir a la línea de código.
A la izquierda de la línea de código se encuentra la columna de número de línea. Haga clic con el botón secundario en el número de línea.
Elija Agregar punto de interrupción condicional. Aparece un cuadro de diálogo debajo de la línea de código.
Escriba la condición en el cuadro de diálogo.
Seleccione Enter esta para activar el punto de interrupción. Un icono junto a la columna de números 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 sola ubicación.

Active la casilla situada junto a una entrada para deshabilitar el punto de interrupción.
Haga clic con el botón secundario en una entrada para quitar ese punto de interrupción.
Haga clic con el botón secundario en cualquier parte del panel puntos de interrupción 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 es equivalente a desactivarlo. Desactivar todos los puntos de interrupción indica a DevTools que pase por alto todos los puntos de interrupción de línea de código, pero también debe mantener el estado habilitado para que cada uno esté en el mismo estado que antes cuando reactive cada uno.

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

DOM cambiar puntos de interrupción

Use un punto de interrupción de cambio de 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 de DOM:

Haga clic en la pestaña elementos .
Desplazarse por el elemento en el que desea establecer el punto de interrupción.
Haga clic con el botón secundario en el elemento.
Desplace el puntero sobre interrumpiry, a continuación, elija modificaciones de subárbol, modificaciones de atributoso eliminación de nodos.

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

Tipos de puntos de interrupción de cambio de DOM

Modificaciones en el subárbol. Se desencadena cuando se quita o agrega un elemento secundario del nodo que se encuentra seleccionado, o se cambia el contenido de un elemento secundario. No se desencadena en cambios en los atributos del nodo secundario o en los cambios realizados en el nodo seleccionado actualmente.
Modificaciones de atributos: se desencadena cuando se agrega o se 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.

XHR/capturar puntos de interrupción

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

Nota

Esta característica también funciona con las solicitudes de API de captura .

Un ejemplo de cuándo resulta útil es cuando ve que la página está solicitando una dirección URL incorrecta y desea buscar rápidamente los códigos de origen de AJAX o fetch que causan la solicitud incorrecta.

Para establecer un punto de interrupción de XHR:

Haga clic en la pestaña orígenes .
Expanda el panel de puntos de interrupción XHR .
Elija Agregar punto de interrupción.
Escriba la cadena en la que desea interrumpir. DevTools se detiene cuando esta cadena está presente en cualquier lugar de una dirección URL de solicitud de XHR.
Seleccione Enter para confirmar.

Crear un punto de interrupción de XHR

Puntos de interrupción de escucha de eventos

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

Haga clic en la pestaña orígenes .
Expanda el panel de puntos de interrupción de escucha de eventos . DevTools muestra una lista de categorías de eventos, como la animación.
Active una de estas categorías para pausar cada vez que se desencadene un evento de la categoría o expanda la categoría y compruebe un evento específico.

Crear un punto de interrupción de detector de eventos

Puntos de interrupción de excepción

Use puntos de interrupción de excepción cuando desee hacer una pausa en la línea de código que produce una excepción detectada o no detectada.

Haga clic en la pestaña orígenes .
Elija pausar en excepciones \ ( ). El icono se vuelve azul al habilitarlo.

El botón pausar en las excepciones
Opcional. Active la casilla pausar las excepciones capturadas si también desea pausar las excepciones detectadas, además de las no capturadas.

Pausado en una excepción no detectada

Puntos de interrupción de función

Ejecute el debug(method) método, donde method es el comando, la función o el método que desea depurar, cuando desee pausarlo siempre que se ejecute una función específica. Puede insertar debug() el código (como una console.log() instrucción) o ejecutar el método desde la consola de DevTools. 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();

Asegurarse de que la función de destino está en el ámbito

DevTools inicia una 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.

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

Establezca un punto de interrupción de línea de código en el lugar donde se encuentra la función en el ámbito.
Desencadenar el punto de interrupción.
Ejecuta el debug() método en la consola de DevTools mientras el código está en pausa en el punto de interrupción de línea de código.

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
Tweet a @EdgeDevTools.
Enviar una sugerencia a la webque queremos.
Para archivar errores sobre este artículo, use la siguiente sección de comentarios .