JavaScript: So legen Sie einen bedingten Haltepunkt in Chrome-Debugger-Tools fest

100

Ich habe diese einfache js-Datei, die das Datum kontinuierlich druckt.

Ich verwende Google Chrome Debugger-Tools (F12)

Meine Frage ist: Ist es möglich, einen bedingten Haltepunkt in Google Chrome festzulegen?

In meinem Code möchte ich einen Haltepunkt setzen, wenn der Sekundenwert gleich 50 ??

s = date.getSeconds();

Dies ist die jsfiddle, wo meine Quelle ist

(Nicht sicher, warum es nicht in jsfiddle funktioniert)

Wie auch immer, meine Frage ist: Ist es möglich, einen Bedingungsbruchpunkt in Chrome-Debugger-Tools festzulegen?

javascript google-chrome

— Pawan
quelle

+1, weil ich nicht wusste, dass es möglich ist, bis ich die Dokumentation überprüft habe, um diese Frage zu beantworten. Vielen Dank!

— Theraot

Antworten:

141

Ja, es ist möglich.

Klicken Sie mit der rechten Maustaste auf die Markierung des Haltepunkts und wählen Sie "Haltepunkt bearbeiten ...". Dort können Sie die Bedingung festlegen.

Von den Chrome Developer Tools zu Haltepunkten unter developer.google.com (Hervorhebung von mir):

Hinweis: Alle von Ihnen festgelegten Haltepunkte werden in der rechten Seitenleiste unter Haltepunkte angezeigt. Durch Klicken auf den Eintrag wird zur markierten Zeile in der Quelldatei gesprungen. Sobald Sie einen Haltepunkt festgelegt haben, klicken Sie mit der rechten Maustaste auf das blaue Tag-Haltepunktindikator, um eine bedingte Anweisung für diesen Haltepunkt festzulegen . Geben Sie einen Ausdruck ein und der Haltepunkt wird nur angehalten, wenn die Bedingung erfüllt ist.

— Theraot
quelle

Danke, ich habe, wie du erwähnt hast, den Haltepunkt bearbeitet und if (s == 50) gesetzt, aber warum hört es nicht bei dieser Bedingung auf?

— Pawan

@PreethiJain schreibe nur die Bedingung "s == 50" (ohne die Anführungszeichen). Übrigens habe ich es geschafft, die jsfiddle unter jsfiddle.net/nVpXN/6

— Theraot am

Sie müssen zunächst nicht einmal einen Haltepunkt hinzufügen. Klicken Sie einfach mit der rechten Maustaste auf eine Zeile und klicken Sie auf "Bedingten Haltepunkt hinzufügen ..." .

— Martin Ender

Mann, es ist 2017 und ich lerne neue grundlegende Dinge über Chrome. #Awesomeness

— The Qodesmith

Dies überprüft nur die Anweisung an diesem Punkt in der Codeausführung und bricht dann ab, wenn dies der Fall ist, genau wie ein Haltepunkt innerhalb einer if-Anweisung. Ich denke, das OP wollte wissen, ob der Debugger bei jeder Anweisungsausführung prüft, ob die Bedingung erfüllt ist und ob der Debugger in dieser Zeile bricht. Dieses Verhalten ist viel nützlicher, da Sie keinen Detektiv spielen müssen, um herauszufinden, wann eine Variable etwas Unerwartetes tut.

— Ejectamenta

Schauen Sie sich die debuggerErklärung an. Grundsätzlich werden alle verfügbaren Debugger-Tools aufgerufen, und in Chrome verhält es sich so, als ob der Interpreter einen Haltepunkt erreicht hätte.

Ihr Code wäre:

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

Aus der Referenz :

[Debugger] Ruft alle verfügbaren Debugging-Funktionen auf. Wenn keine Debugging-Funktion verfügbar ist, hat diese Anweisung keine Auswirkung.

— verrückter Freund
quelle

Während dies in der Tat eher im Sinne der ursprünglichen Art ist, wurde die ursprüngliche Frage gestellt, und es sind großartige Informationen; Ich denke, die eigentliche Frage betraf Chrome Tools, nicht ECMAscript. Davon abgesehen; Es gibt eine Einschränkung, die hinzugefügt werden sollte: Entfernen Sie alle debuggerAufrufe im Produktionscode. (Ich bin mir ziemlich sicher, dass das Flusen einen Fehler auslöst, wenn der Debugger verfügbar ist, aber es lohnt sich, ihn immer dann aufzurufen, wenn das Thema angesprochen wird.)

— Crispen Smith

Sie benötigen die Debugger-Anweisung nicht. Sie können auch eine leere Anweisung im if haben und dort einfach einen Haltepunkt hinzufügen.

— Ejectamenta

Sie können einen bedingten Haltepunkt in Google Chrome festlegen, indem Sie die folgenden Schritte ausführen:

1. Klicken Sie mit der rechten Maustaste auf den Haltepunkt, an dem Sie anhalten möchten

2.Klicken Sie auf "Bedingten Haltepunkt hinzufügen". Ein Text wird angezeigt. Dort können Sie eine Bedingung hinzufügen (das Ergebnis ist "wahr", wenn die Bedingung erfüllt ist, andernfalls "falsch"). Die Farbe des Haltepunkts wird nach dem Hinzufügen der Bedingung orange. chk on

3. Laden Sie dieselbe Seite neu. Sie können sehen, dass der Haltepunkt funktioniert, wenn die Bedingung erfüllt ist

— Deepan Raj
quelle