Jak ustawić punkt przerwania JavaScript z kodu w Chrome?

686

Chcę zmusić debugera Chrome do włamania się do wiersza za pomocą kodu lub użyć tagu komentarza, takiego jak coś takiego console.break().

Paweł
źródło
46
próbowałeś debugger;lub używasz zwykłych punktów przerwania na pasku narzędzi programisty?
diaho,
masz na myśli ustawianie punktów przerwania z samego kodu zamiast ustawiania ich za pomocą obserwatora skryptów w narzędziach programistycznych?
Faris M,
2
A może lepiej: Ustaw punkt przerwania w XHR w Chrome .
Felix Kling
9
Nie duplikat. „w Chrome” vs „w kodzie” to dwie różne rzeczy, a to pytanie dotyczy wielu scenariuszy innych niż XHR. Tak 1 odpowiedź na inne pytanie odpowiada na to pytanie, ale inne nie mają zastosowania. Dosłownie przejrzałem „ustawiłem punkt przerwania javascript od kodu chrome” i to jest pierwszy wynik, a drugiego pytania nawet nie ma na pierwszej stronie.
AaronLS,

Odpowiedzi:

1160

Możesz użyć debugger;w swoim kodzie. Jeśli konsola programisty jest otwarta, wykonanie zostanie przerwane. Działa również w firebug.

xn.
źródło
8
Fajną sztuczką jest uruchomienie debuggera po kilku sekundach:setTimeout(function(){debugger;}, 3000);
Shahar
30
Czy sztuczka z timerem jest powszechną praktyką? Weryfikacja / uzasadnienie?
Justus Eapen
4
To jest bardzo pomocne. Uwaga debugger;jest również obsługiwana we wszystkich głównych przeglądarkach. Aby uzyskać więcej informacji: w3schools.com/jsref/jsref_debugger.asp
ScottyG
16
@ScottyG MDN jest mniej błyszczący, bardziej przydatny: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
jpaugh
@JustusEapen Problem polega na tym, że JavaScript jest jednowątkowy, więc nie może przerywać działania kodu.
Witruwiusz
27

Skonfiguruj odbiornik kliknięcia przycisku i zadzwoń pod numer debugger;

Przykład

$("#myBtn").click(function() {
 debugger;   
});

Próbny

http://jsfiddle.net/hBCH5/

Zasoby dotyczące debugowania w JavaScript

martynas
źródło
1
To ustawia punkt przerwania w
module
@PeterV Przydałoby mi się, gdybym tylko próbował otworzyć mój kod w miejscu, które było blisko bloku kodu, który debugowałem ... ale nie chciałem debugować cały czas ... ale tak , jeśli to tylko otwarcie debuggera ... to jest naciśnięcie klawisza.
Armstrongest
27

Możesz także użyć debug(function), aby przerwać, kiedy functionzostanie wywołany.

Dokumentacja interfejsu API wiersza poleceń: debugowanie

Protektor jeden
źródło
2
Bardzo fajnie - w tej chwili wygląda na Chrome, ale to i tak moja podstawowa platforma. Teraz muszę tylko pamiętać, aby przestać nazywać moją flagę debugowania globalnego „debugowaniem” ...
brichins,
Dokumentacja interfejsu wiersza polecenia debugera w Chrome zawiera faktycznie inne przydatne rzeczy, o których nie wiedziałam. Dzięki!
Peter T.
8

Na karcie „Skrypty” przejdź do swojego kodu. Po lewej stronie numeru linii kliknij. To ustawi punkt przerwania.

Zrzut ekranu:

zrzut ekranu punktu przerwania w chromie

Będziesz wtedy mógł śledzić swoje punkty przerwania w prawej zakładce (jak pokazano na zrzucie ekranu).

Florian Margaine
źródło
41
To nie odpowiada na pytanie, chce być w stanie to zrobić za pomocą kodu
robertc
39
xn .: „Oto zdjęcie mojej odpowiedzi, gdy było to małe dziecko z 0 głosami. Wszystko jest teraz dorosłe”.
AaronLS,
3
Jeśli załadujesz skrypt JS z wywołaniem Ajax, nie pojawi się tutaj, stąd potrzeba punktu przerwania w kodzie.
Petruza
@FlorianMargaine, Nie ma już zakładki Skrypty. Zaktualizuj obraz.
Pacerier
W niektórych systemach, takich jak Drupal, JS dodaje sufiks ciągu zapytania pomijającego pamięć podręczną. Jeśli opróżnisz pamięć podręczną, często aktualizuje ten przyrostek, który może zniszczyć wszelkie punkty przerwania ustawione dla poprzedniego ładowania.
Nick
7

debugger jest zastrzeżonym słowem kluczowym od EcmaScript i ma opcjonalną semantykę od ES5

W rezultacie można go używać nie tylko w Chrome, ale także przez Firefox i Node.js przeznode debug myscript.js .

Norma mówi :

Składnia

DebuggerStatement :
    debugger ;

Semantyka

Ocena produkcji DebuggerStatement może pozwolić implementacji na spowodowanie punktu przerwania, gdy jest uruchamiana w debuggerze. Jeśli debugger nie jest obecny lub aktywny, to stwierdzenie nie ma zauważalnego wpływu.

Produkcja DebuggerStatement: debugger; jest oceniany w następujący sposób:

  1. Jeśli funkcja debugowania zdefiniowana w implementacji jest dostępna i włączona, wówczas
    1. Wykonaj akcję debugowania zdefiniowaną w implementacji.
    2. Niech wynikiem będzie wartość wykonania zdefiniowana jako implementacja.
  2. Jeszcze
    1. Niech wynik będzie (normalny, pusty, pusty).
  3. Zwróć wynik.

Brak zmian w ES6.

Ciro Santilli
źródło
3

Jest to możliwe i istnieje wiele powodów, dla których warto to zrobić. Na przykład debugowanie nieskończonej pętli javascript w pobliżu początku ładowania strony, która uniemożliwia prawidłowe ładowanie zestawu narzędzi dewelopera chrome (lub firebug).

Sekcja 2 z

http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/

lub po prostu dodaj wiersz zawierający słowo debugger do swojego kodu w wymaganym punkcie testowym.

użytkownik2539341
źródło
3

Punkt przerwania: -

punkt przerwania przestanie działać i pozwoli ci zbadać wartości JavaScript.

Po sprawdzeniu wartości można wznowić wykonywanie kodu (zwykle za pomocą przycisku odtwarzania).

Debuger: -

Debugger; zatrzymuje wykonywanie JavaScript i wywołuje funkcję debugowania.

Instrukcja debuggera zawiesza wykonywanie, ale nie zamyka żadnych plików ani nie usuwa żadnych zmiennych.

Example:-
function checkBuggyStuff() {
  debugger; // do buggy stuff to examine.
};
Parth Raval
źródło
2

Istnieje wiele sposobów debugowania kodu JavaScript. Poniższe dwa podejścia są szeroko stosowane do debugowania JavaScript za pomocą kodu

  1. Używanie console.log()do drukowania wartości w konsoli przeglądarki. (Pomoże to zrozumieć wartości w niektórych punktach kodu)

  2. Słowo kluczowe debugera. Dodaj debugger;do lokalizacji, które chcesz debugować, otwórz konsolę programisty przeglądarki i przejdź do karty źródeł.

Więcej narzędzi i sposobów debugowania kodu JavaScript podano w tym łączu przez W3School .

Keet Sugathadasa
źródło
1
+1 i użycie konsoli.log jest również pomocne w zlokalizowaniu kodu, ponieważ zwykle plik / wiersz # jest wyświetlany obok komunikatu i możesz go kliknąć, aby otworzyć kod w debuggerze, ustawić punkt przerwania itp.
John Henckel
0

Nie poleciłbym, debugger;jeśli chcesz po prostu zabić i zatrzymać kod javascript, ponieważ debugger;po prostu tymczasowo zamrozisz kod javascript i nie zatrzymasz go na stałe.

Jeśli chcesz poprawnie zabijać i zatrzymywać kod javascript na swoje polecenie, użyj następujących poleceń:

throw new Error("This error message appears because I placed it");

S To
źródło