Chrome JavaScript Debugging - Wie speichere ich Haltepunkte zwischen Seitenaktualisierung oder Unterbrechung per Code?

76

Wenn Sie Chrome und seinen JavaScript-Debugger verwenden, gehen jedes Mal, wenn ich meine Seite / Skripte neu lade, meine Haltepunkte verloren und ich muss die Skriptdatei im Popup suchen, die Codezeile für meinen Haltepunkt suchen und auf klicken, um sie hinzuzufügen , etc.

Gibt es eine Möglichkeit, diese Haltepunkte so zu speichern, dass sie nach einer Seitenaktualisierung ausgeglichen sind (andere von mir verwendete Debugger tun dies)?

Gibt es alternativ eine saubere Möglichkeit in meinem JavaScript-Code, etwas einzugeben, um Chrome anzuweisen, mit der Ablaufverfolgung zu beginnen (um in einer Zeile anzuhalten)?

javascript debugging google-chrome breakpoints Scott Szretter
quelle
2
Chrome Developer Tools sollten JS-Haltepunkte zwischen Aktualisierungen beibehalten. Verwenden Sie <script>Tags oder XMLHttpRequest+ eval, um Ihre JS einzuschließen? Mit XHR + eval verlieren Sie Haltepunkte.
JK
+1 Das passiert mir auch ein paar Mal am Tag unter Chrome unter OSX. Meistens funktionieren Haltepunkte gut, aber manchmal bleibt der Haltepunkt beim Aktualisieren einfach nicht hängen!
Dano
Sie verlieren auch Haltepunkte, wenn sich im Querystring des Skripts etwas ändert (z. B. ein Cachebuster). Sie sind sich nicht sicher über #hash
oriadam

Antworten:

69

Sie können eine setzen

debugger;

in den meisten JavaScript-Umgebungen zu brechen. Sie werden sicher bestehen bleiben. Es ist gut, einen Minifier zu haben, der die Debugger- und console.log-Aufrufe für die Produktionsumgebung entfernt, wenn Sie diese verwenden.

In den neuesten Versionen des Chrome-Browsers befindet sich oben im Konsolenbereich neben den Filtern die Option "Protokoll beibehalten". In älteren Versionen wird diese Option durch Klicken mit der rechten Maustaste auf das leere Konsolenfenster angezeigt ("Protokoll bei Navigation beibehalten"). Dies ist praktisch, wenn Sie keine console.log-Anweisungen oder fest codierten Debugger-Aufrufe haben.

Update: Ich habe auf github ein Tool namens chimney gefunden , das eine Datei nimmt und alle Aufrufe von console.log entfernt. Es gibt eine gute Vorstellung davon, wie Debugger-Aufrufe entfernt werden.

Ege Özcan
quelle
3
Das Überprüfen des Protokolls bei der Navigation
beibehalten
Hier ist eine schöne Alternative für Web-Worker: stackoverflow.com/a/4985794/300011
Ege Özcan
Ich hatte vergessen, dass ich eine debugger;halbe Stunde lang versucht hatte, es herauszufinden.
Eric Bishard
38

Legen Sie Ihre Haltepunkte fest, wechseln Sie zur Registerkarte Netzwerk und wählen Sie die Umschaltfläche Protokoll bei Navigation beibehalten. Jetzt sollten die Haltepunkte beim Aktualisieren vorhanden sein.

Oder die JavaScript-Methode ist zu verwenden 

debugger;
pradeek
quelle
19

Senden Sie auch Ihre JavaScript-Datei (en) vom Server an den Client mit einem angehängten Abfrageparameter an die URL mit der aktuellen Epochenzeit ? Dies wird verwendet, um das Zwischenspeichern der JavaScript-Datei (en) zu verhindern.

In diesem Fall scheinen die Chrome Developer Tools die Datei nach der Aktualisierung als eine andere zu interpretieren, wodurch die Haltepunkte (korrekt) entfernt werden.

Durch das Entfernen des Abfrageparameters hat das CDT die Haltepunkte nach der Aktualisierung beibehalten.

sjogren_me
quelle
3
Vielen Dank! ExtJS 4 enthält einen "_dc" -Parameter, um zu verhindern, dass Dateien zwischengespeichert werden, und löscht jedes Mal Haltepunkte. Durch Hinzufügen Ext.Loader.setConfig({ disableCaching: false, enabled: true });zur App-Konfiguration wird diese deaktiviert.
Brian Topping
@BrianTopping Danke für diesen Hinweis. Warum zum Teufel haben sie so etwas Dummes getan, als dynamische Abfrageparameter anzuhängen, um das Caching zu verhindern? Es ist der Browser (dev-tools) / Server, der es steuern sollte ...
Juri
@sjogren_me, wie haben Sie den Abfrageparameter in Chrome Dev Tools entfernt?
GWG
10

Dies geschieht wahrscheinlich für Skripte, die Sie dynamisch aus anderen Skripten laden oder auswerten? Ich kann selbst sagen, dass mich dieses Szenario wirklich irritiert hat, bis ich die Eigenschaft sourceURL entdeckt habe. Wenn Sie den folgenden speziell formatierten Kommentar in die letzte Zeile des Skripts einfügen, das Sie debuggen möchten, wird er in Chrome "verankert", sodass er einen Referenzrahmen dafür hat:

// # sourceURL = filename.js

Ihre manuell platzierten Haltepunkte bleiben jetzt zwischen dem Laden der Seite bestehen! Die Konvention entstand tatsächlich aus der Sourcemap-Spezifikation, aber Chrome erkennt sie zumindest als eigenständige Technik an. Hier ist eine Referenz .

jtrick
quelle
2

Für Benutzer von ExtJs 6.x:
Anstatt disableCaching im Ext.Loader zu verwenden, können Sie der URL der Seite einen Abfrageparameter "cache" oder "disableCacheBuster" hinzufügen . Dadurch wird der Parameter "_dc" aus der Datei entfernt und der Chrome-Debugger kann den Haltepunkt beibehalten.

Siehe bootstrap.js in Ihrer Anwendung (Konfigurationsparameter disableCaching).

Kaah
quelle
1
Es scheint einen anderen formalen Weg zu geben, indem in app.json ein Wert für loader.cache festgelegt wird: true, sencha.com/forum/…
Saurabh
1

Sie können die debugger;Anweisung in Ihrer Quelle verwenden, um den Debugger dort zu unterbrechen.

SLaks
quelle
0

Die Chrome Developer Tools sollten sich wie erwartet verhalten, aber Sie können debugger;Anweisungen in Ihren (Entwicklungs-!) Code einfügen, um die Ausführung anzuhalten.

JK
quelle
0

Sie können Debugger setzen; vor dem Code, in dem Sie mit dem Debuggen beginnen möchten. Sobald die Seite geladen wird, wird sie beim Debugger angehalten. Erklärung. Dann können Sie den Debugging-Punkt ganz einfach gemäß Ihren Anforderungen anwenden.

sandeepConnected
quelle
1
Diese Antwort dupliziert mehrere, die 7 Jahre zuvor gemacht wurden.
Moopet