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.

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.

get-started.js
y otro en
la línea 32
- 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 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.

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.

org
en la URL
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.

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