JavaScript: cómo establecer un punto de interrupción condicional en las herramientas de depuración de Chrome

100

Tengo este simple archivo js, que imprime la fecha continuamente.

Estoy usando las herramientas del depurador de Google Chrome (F12)

Mi pregunta es, ¿es posible establecer un punto de interrupción condicional en Google Chrome?

En mi código, quiero establecer un punto de interrupción si el valor de los segundos es igual a 50.

s = date.getSeconds();

Este es el jsfiddle donde está mi fuente

(No estoy seguro de por qué no funciona en jsfiddle)

De todos modos, mi pregunta es, ¿es posible establecer un punto de ruptura conditinal en las herramientas de depuración de Chrome?

javascript google-chrome

— Pawan
fuente

+1 porque no sabía que era posible hasta que fui a verificar la documentación para responder esta pregunta. ¡Gracias!

— Theraot

Respuestas:

141

Sí, es posible.

Haga clic derecho en el marcador del punto de interrupción y seleccione "Editar punto de interrupción ..." allí puede establecer la condición.

Desde Chrome Developer Tools en Breakpoints en developers.google.com (énfasis mío):

Nota: Todos los puntos de interrupción que ha establecido aparecen en Puntos de interrupción en la barra lateral derecha. Al hacer clic en la entrada, se salta a la línea resaltada en el archivo de origen. Una vez que haya establecido un punto de interrupción, haga clic con el botón derecho en el indicador de punto de interrupción de la etiqueta azul para establecer una declaración condicional para ese punto de interrupción . Escriba una expresión y el punto de interrupción solo se detendrá si la condición es verdadera.

— Theraot
fuente

Gracias, hice lo que mencionaste, edité el punto de interrupción y establecí if (s == 50) pero ¿por qué no se detiene en esa condición?

— Pawan

@PreethiJain escribe solo la condición "s == 50" (sin las comillas). Por cierto, logré hacer funcionar el jsfiddle en: jsfiddle.net/nVpXN/6

— Theraot

Ni siquiera necesita agregar un punto de interrupción para empezar. Simplemente haga clic derecho en una línea de inmediato y haga clic en "Agregar punto de interrupción condicional ..." .

— Martin Ender

Hombre, estamos en 2017 y estoy aprendiendo cosas nuevas y básicas sobre Chrome. #Awesomeness

— The Qodesmith

Esto solo verificará la declaración en este punto de la ejecución del código y luego se interrumpirá si es así, lo mismo que un punto de interrupción dentro de una declaración if. Creo que el OP quería saber si el depurador verifica en cada ejecución de declaración si se cumple la condición y si el depurador se rompe en esta línea. Este comportamiento es mucho más útil, ya que no tienes que jugar al detective para descubrir cuándo una variable hace algo inesperado.

— eyeccióna

Eche un vistazo a la debuggerdeclaración. Básicamente, invoca cualquier herramienta de depuración disponible, y en Chrome actúa como si el intérprete encontrara un punto de interrupción.

Tu código sería:

s = date.getSeconds();
if (s == 50) {
   debugger;
}

De referencia :

[depurador] Invoca cualquier función de depuración disponible. Si no hay ninguna función de depuración disponible, esta declaración no tiene ningún efecto.

— amigo loco
fuente

Si bien esto es de hecho más en el espíritu de la forma original en que se hizo la pregunta original, y es una gran información; Creo que la verdadera pregunta era sobre las herramientas de Chrome, no sobre ECMAscript. Habiendo dicho eso; hay una advertencia que debe agregarse: elimine todas las debuggerllamadas en el código de producción. (Estoy bastante seguro de que linting arrojará un error si hay un depurador, pero vale la pena llamarlo cada vez que se plantea el tema).

— Crispen Smith

no necesita la declaración del depurador, también puede tener una declaración vacía dentro del if y simplemente agregar un punto de interrupción allí.

— eyección del

Puede establecer un punto de interrupción condicional en Google Chrome, siguiendo estos pasos:

1.Haga clic derecho en el punto de interrupción donde desea detenerse, por favor siga

2.Haga clic en "Agregar punto de interrupción condicional", aparecerá un texto, allí puede agregar la condición (el resultado será 'verdadero' si la condición se cumple, de lo contrario, 'falso'), el color del punto de interrupción se volverá naranja después de la condición agregada, chk en

3.Recargue la misma página y puede ver que el punto de interrupción funcionará si se cumple la condición, como

— Deepan Raj
fuente