Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Puntos de interrupción para pausar el código

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ónSe 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:

  1. Haz clic en la pestaña Sources.
  2. Abre el archivo que incluye la línea de código donde 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 ella. Aparecerá un ícono azul sobre la columna del número de línea.
Un punto de interrupción de línea de código. Figura 1: Punto de interrupción de línea de código definido en la línea 29

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:

  1. Haz clic en la pestaña Sources.
  2. Abre el archivo que incluye la línea de código donde 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 con el botón secundario en ella.
  5. Selecciona Add conditional breakpoint. 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. 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. Figura 2: Punto de interrupción de línea de código condicional definido en la línea 32

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.

El panel Breakpoints. Figura 3: Panel Breakpoints con dos puntos de interrupción de línea de código, uno en la línea 15 de 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 desactivados en el panel Breakpoints. Figura 4: Los puntos de interrupción desactivados en el panel Breakpoints están inhabilitados y son transparentes

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:

  1. Haz clic en la pestaña Elements.
  2. Ve al elemento en el que deseas establecer el punto de interrupción.
  3. Haz clic con el botón secundario en el elemento.
  4. 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. Figura 5: 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:

  1. Haz clic en la pestaña Sources.
  2. Expande el panel XHR Breakpoints.
  3. Haz clic en Add breakpoint.
  4. Ingresa la string donde deseas realizar la interrupción. DevTools hace una pausa cuando la string está presente en una URL de solicitud XHR.
  5. Presiona Intro para confirmar.
Creación de un punto de interrupción XHR. Figura 6: Creación de un punto de interrupción XHR en XHR Breakpoints para solicitudes que incluyan 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.

  1. Haz clic en la pestaña Sources.
  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 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. Figura 7: Creación de un punto de interrupción de receptor de eventos para 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.

  1. Haz clic en la pestaña Sources.
  2. Haz clic en Pause on exceptions Pause on
exceptions. Cuando se habilita, se pone de color azul.
  3. (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.
Pausa en una excepción no detectada. Figura 7: Pausa en una excepción no detectada

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:

  1. Define 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 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)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.