JavaScript: jak ustawić warunkowy punkt przerwania w narzędziach debugera Chrome

100

Mam taki prosty plik js, który wyświetla datę w sposób ciągły.

Używam narzędzi Google Chrome Debugger (F12)

Moje pytanie brzmi: czy można ustawić warunkowy punkt przerwania w Google Chrome?

W moim kodzie chcę ustawić punkt przerwania, jeśli wartość sekund jest równa 50?

s = date.getSeconds();

To jest jsfiddle, gdzie jest moje źródło

(Nie wiem, dlaczego nie działa w jsfiddle)

W każdym razie moje pytanie brzmi: czy można ustawić warunkowy punkt przerwania w narzędziach debugera chrome?

javascript google-chrome Pawan
źródło
1
+1, ponieważ nie wiedziałem, że to możliwe, dopóki nie poszedłem sprawdzić dokumentacji, aby odpowiedzieć na to pytanie. Dzięki!
Theraot

Odpowiedzi:

141

Tak to mozliwe.

Kliknij prawym przyciskiem myszy znacznik punktu przerwania i wybierz „Edytuj punkt przerwania ...”, gdzie możesz ustawić warunek.

Z Narzędzi dla programistów Chrome w Breakpoints na developers.google.com (moje podkreślenie):

Uwaga: wszystkie ustawione punkty przerwania są wyświetlane w obszarze Punkty przerwania na prawym pasku bocznym. Kliknięcie wpisu powoduje przejście do podświetlonej linii w pliku źródłowym. Po ustawieniu punktu przerwania kliknij prawym przyciskiem myszy niebieski wskaźnik punktu przerwania znacznika, aby ustawić instrukcję warunkową dla tego punktu przerwania . Wpisz wyrażenie, a punkt przerwania zatrzyma się tylko wtedy, gdy warunek jest prawdziwy.

Theraot
źródło
Dzięki, zrobiłem tak, jak wspomniałeś, edytowałem punkt przerwania i ustawiłem if (s == 50), ale dlaczego nie zatrzymuje się w tym stanie?
Pawan
2
@PreethiJain napisz tylko warunek „s == 50” (bez cudzysłowów). Nawiasem mówiąc, udało mi się wykonać pracę jsfiddle pod adresem: jsfiddle.net/nVpXN/6
Theraot
6
Na początku nie musisz nawet dodawać punktu przerwania. Wystarczy kliknąć prawym przyciskiem myszy linię i kliknąć „Dodaj warunkowy punkt przerwania…” .
Martin Ender
2
Człowieku, jest rok 2017 i uczę się nowych podstawowych rzeczy o Chrome. #Awesomeness
The Qodesmith
1
Spowoduje to po prostu sprawdzenie instrukcji w tym momencie wykonywania kodu, a następnie przerwanie, jeśli tak jest, tak samo jak punkt przerwania w instrukcji if. Myślę, że OP chciał wiedzieć, czy debugger sprawdza przy każdym wykonaniu instrukcji, czy warunek jest spełniony i czy jest to błąd debugera w tej linii. To zachowanie jest o wiele bardziej przydatne, ponieważ nie musisz grać w detektywa, aby dowiedzieć się, kiedy zmienna robi coś nieoczekiwanego.
ejectamenta
27

Spójrz na debuggeroświadczenie. Zasadniczo wywołuje wszelkie dostępne narzędzia debuggera, aw Chrome działa tak, jakby interpreter napotkał punkt przerwania.

Twój kod wyglądałby tak:

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

Z uwzględnieniem :

[debugger] Wywołuje wszelkie dostępne funkcje debugowania. Jeśli żadna funkcja debugowania nie jest dostępna, ta instrukcja nie ma żadnego efektu.

szalony przyjaciel
źródło
Chociaż w rzeczywistości jest to bardziej w duchu oryginalnego sposobu, w jaki zadano oryginalne pytanie, i jest to świetna informacja; Myślę, że prawdziwe pytanie dotyczyło narzędzi Chrome, a nie ECMAscript. Biorąc to pod uwagę; jest zastrzeżenie, które należy dodać: usuń wszystkie debuggerwywołania w kodzie produkcyjnym. (Jestem prawie pewien, że linting zwróci błąd, jeśli debugger jest w pobliżu, ale warto go wywołać, gdy zostanie podniesiony temat).
Crispen Smith
1
nie potrzebujesz instrukcji debuggera, możesz również mieć pustą instrukcję wewnątrz if i po prostu dodać tam punkt przerwania.
ejectamenta
8

Możesz ustawić warunkowy punkt przerwania w Google Chrome, wykonując następujące czynności:

1. kliknij prawym przyciskiem myszy punkt przerwania, w którym chcesz się zatrzymać, chk on wprowadź opis obrazu tutaj

2. kliknij „Dodaj warunkowy punkt przerwania”, pojawi się jeden tekst, w którym możesz dodać warunek (wynikiem będzie „prawda”, jeśli warunek jest spełniony, w przeciwnym razie „fałsz”), kolor punktu przerwania zmieni się na pomarańczowy po dodaniu warunku, chk on wprowadź opis obrazu tutaj

3. załaduj ponownie tę samą stronę, możesz zobaczyć, że punkt przerwania będzie działał, jeśli warunek jest spełniony wprowadź opis obrazu tutaj

Deepan Raj
źródło