Puntos de interrupción para pausar el código

Technical Writer, Chrome DevTools & Lighthouse

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. Puedes encontrar un tutorial práctico del proceso de depuración en Comenzar a depurar 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. Pero la configuración de puntos de interrupción de línea de código puede no ser eficiente, en especial si no se sabe exactamente dónde buscar o si se trabaja con una base de código de gran tamaño. 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	Se usa para pausar…
Línea de código	En una región de código exacta.
Línea de código condicional	En una región de código exacta, pero solo cuando hay otra condición que es verdadera.
DOM	En código que cambia o quita un nodo de DOM específico, o alguno de sus elementos secundarios.
XHR	Cuando una URL de XHR incluye un patrón de string.
Receptor de eventos	En código que se ejecuta después de que se activa un evento, como `click`.
Excepción	En una línea de código que genera una excepción detectada o no detectada.
Función	Cuando se llama a una función específica.

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

Los puntos de interrupción de línea de código se usan si se sabe cuál es la región de código exacta que se necesita 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 clic en la pestaña Sources.
Abre el archivo que incluye la línea de código donde deseas agregar la interrupción.
Ve a la línea de código.
A la izquierda de la línea de código se encuentra la columna del número de línea. Haz clic en ella. Aparecerá un ícono azul sobre la columna del número de línea.

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

Realiza una llamada a debugger desde el 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 el 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 si sabes cuál es la región de código exacta que necesitas investigar, pero deseas pausar solo si hay alguna otra condición que es verdadera.

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

Haz clic en la pestaña Sources.
Abre el archivo que incluye la línea de código donde deseas agregar la interrupción.
Ve a la línea de código.
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 secundario en ella.
Selecciona Add conditional breakpoint. Aparecerá un diálogo debajo de la línea de código.
Ingresa la condición en el diálogo.
Presiona Intro para activar el punto de interrupción. Aparecerá un ícono naranja encima de la columna del número de línea.

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

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

Utiliza el panel Breakpoints para inhabilitar o quitar puntos de interrupción de código de línea para una sola ubicación.

Marca la casilla de verificación que se encuentra junto a una entrada para inhabilitar ese punto de interrupción.
Haz clic con el botón secundario en una entrada para quitar ese punto de interrupción.
Haz clic con el botón secundario en cualquier lugar del panel Breakpoints para desactivar, inhabilitar o quitar todos los puntos de interrupción. Inhabilitar todos los puntos de interrupción es equivalente a desmarcar cada uno de ellos. La desactivación de todos los puntos de interrupción indica a DevTools que se deben ignorar todos los puntos de interrupción de línea de código, pero que también se debe conservar el estado de habilitado para que queden en el mismo estado que antes cuando se los reactive.

Puntos de interrupción desactivados en el panel Breakpoints.

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 clic en la pestaña Elements.
Ve al elemento en el que deseas establecer el punto de interrupción.
Haz clic con el botón secundario en el elemento.
Coloca el cursor sobre Break on y selecciona Subtree modifications, Attribute modifications o Node removal.

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

Tipos de puntos de interrupción de cambio de DOM

Modificaciones de subárboles: Se ejecuta 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 ejecuta cuando cambian los atributos de un nodo secundario ni cuando se realizan cambios en el nodo actualmente seleccionado.
Modificaciones de atributos: Se ejecuta cuando se agrega o se quita un atributo en el nodo actualmente seleccionado o cuando se cambia el valor de un atributo.
Eliminación de nodos: Se ejecuta cuando se quita el nodo actualmente seleccionado.

Puntos de interrupción XHR/Fetch

Usa un punto de interrupción XHR si deseas interrumpir cuando la URL de solicitud de una XHR incluye una string especificada. DevTools hace una pausa en la línea de código donde la XHR llama a send().

Por ejemplo, esto es útil cuando ves que la página solicita una URL incorrecta y deseas encontrar con rapidez el código fuente de AJAX o Fetch que causa dicha solicitud incorrecta.

Para definir un punto de interrupción XHR:

Haz clic en la pestaña Sources.
Expande el panel XHR Breakpoints.
Haz clic en Add breakpoint.
Ingresa la string donde deseas realizar la interrupción. DevTools hace una pausa cuando la string está presente en una URL de solicitud XHR.
Presiona Intro para confirmar.

Creación de un punto de interrupción XHR.

Puntos de interrupción de receptor de eventos

Usa los puntos de interrupción de receptor de eventos cuando desees hacer una pausa en el código del receptor 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 de mouse.

Haz clic en la pestaña Sources.
Expande el panel Event Listener Breakpoints. DevTools muestra una lista de categorías de eventos, como Animation.
Marca una de estas categorías para hacer una pausa siempre que se active un evento de esa categoría, o expande la categoría y marca un evento específico.

Creación de un punto de interrupción de receptor de eventos.

Puntos de interrupción de excepción

Usa puntos de interrupción de excepción cuando desees hacer una pausa en la línea de código que genera una excepción detectada o no detectada.

Haz clic en la pestaña Sources.
Haz clic en Pause on exceptions . Cuando se habilita, se pone de color azul.
(Opcional) Marca la casilla de verificación Pause On Caught Exceptions si también quieres hacer una pausa en las excepciones detectadas, además de las no detectadas.

Puntos de interrupción de 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 el código (como instrucción console.log()) o llamarla desde la consola de DevTools. debug() es equivalente a definir 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.

DevTools genera un ReferenceError si la función que deseas 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 la llamada a debug() se hace desde la consola de DevTools. La siguiente es una estrategia posible:

Define un punto de interrupción de línea de código en un lugar donde la función esté dentro del alcance.
Activa el punto de interrupción.
Llama a debug() en la consola de DevTools mientras el código esté en pausa en el punto de interrupción de línea de código.

Comentarios

Was this page helpful?

Yes

What was the best thing about this page?

It helped me complete my goal(s)