Wie debugge ich dynamisch geladenes JavaScript (mit jQuery) im Debugger des Browsers selbst?

92

Ein dynamisch hinzugefügtes Skript wird im Skriptabschnitt des Debuggers des Browsers nicht angezeigt.

Erläuterung:

Ich muss verwenden und habe verwendet

if( someCondition == true ){
   $.getScript("myScirpt.js", function() {
       alert('Load Complete');
       myFunction();
   });
}

damit myScript.js unter bestimmten Bedingungen dynamisch geladen werden kann ... Und myFunction kann erst aufgerufen werden, nachdem das gesamte Skript geladen wurde ...

Browser zeigen die dynamisch geladenen myScript.js jedoch nicht im Skriptbereich ihres Debuggers an.

Gibt es einen anderen Weg, um alle Ziele zu erreichen, der es einem ermöglicht, ein dynamisch geladenes Skript dort im Browser selbst zu debuggen?

javascript debugging dynamic loaded TwiToiT
quelle
Mögliches Duplikat von Ist es möglich, dynamisches Laden von JavaScript mit einem Debugger wie WebKit, FireBug oder IE8 Developer Tool zu debuggen?
JerryGoyal
2
Verwenden Sie debugger;diese Option, um das dynamisch geladene Skript automatisch zu stoppen. Siehe javascript.info/debugging-chrome
yu yang Jian

Antworten:

207

Sie können Ihrem dynamisch geladenen Skript einen Namen geben, der im Chrome / Firefox-JavaScript-Debugger angezeigt wird. Dazu platzieren Sie einen Kommentar am Ende des Skripts:

//# sourceURL=filename.js

Diese Datei wird dann auf der Registerkarte "Quellen" als angezeigt filename.js. Nach meiner Erfahrung können Sie \ 's im Namen verwenden, aber ich bekomme merkwürdiges Verhalten, wenn ich /' s verwende.

Weitere Informationen finden Sie unter: Haltepunkte in der dynamischen JavaScript- Ablehnung von // @ sourceurl

Kennzeichen
quelle
19
Beachten Sie, dass es in // # geändert wird, obwohl // @ in Chrome immer noch funktioniert. Auf die gleiche Weise können auch Skripte in HTML-Dateien benannt werden. Achtung! Lassen Sie vor und nach dem Zeichen '=' keine Leerzeichen.
Mert Mertce
10
Für mich wurde die js-Datei in der Quellenliste innerhalb einer Gruppe namens "(keine Domäne)" angezeigt. Könnte erwähnenswert sein, da ich es zuerst verpasst habe!
JMac
7
Nur ein Tipp. Der Chrome-Debugger wirft diese Pseudo-Javascript-Dateien in das Knotenelement "(keine Domäne)" auf der Registerkarte "Quellen", zumindest beim Debuggen auf localhost. Dort habe ich sie gefunden.
Robert Oschler
1
Eine andere Sache, vor der man vorsichtig sein sollte, ist der Kommentarstil. In diesem Link "Verachtung von / / @ sourceURL" werden sowohl "// # sourceURL =" als auch "/ * # sourceURL =" erwähnt. Dies liegt daran, dass dies auch für CSS verwendet werden kann, bei dem Blockkommentare verwendet werden müssen, da einzeilige "//" -Kommentare nicht gültig sind. Was mich überrascht hat war, dass Sie "/ * sourceURL =" nicht in Javascript verwenden können. Es wird einfach ignoriert.
Jools
2
Afaik, die meisten JavaScript-Minifier entfernen diese Zeilen aus den Produktionsphasen, was sie für die Diagnose eines Produktionsfehlers unbrauchbar macht.
Lluís Suñol
16

Sie können //# sourceURL=und //# sourceMappingURL=am Ende Ihrer Skriptdatei oder Ihres Skript-Tags verwenden.

HINWEIS: //@ sourceURL und //@ sourceMappingURLsind veraltet.

xRavisher
quelle
Weitere Informationen zur Verwerfung: developer.google.com/web/updates/2013/06/…
Pysis
Sicher, aber afaik die meisten Minifahrer werden diese Linien auf Produktionsstufen entfernen.
Lluís Suñol
13

Ich habe versucht, "// # sourceURL = filename.js" zu verwenden, das vom OP als Problemumgehung vorgeschlagen wurde, aber es wurde für mich immer noch nicht im Quellenbedienfeld angezeigt, es sei denn, es war bereits in meinen Registerkarten vorhanden es gab eine Ausnahme.

Codierung eines "Debuggers"; Linie zwang es, an dieser Stelle zu brechen. Sobald es sich in meinen Registerkarten im Quellenbedienfeld befand, konnte ich wie gewohnt Haltepunkte setzen und den "Debugger" entfernen. Linie.

Kevinpo
quelle
6
Es wird möglicherweise auch in der Liste (keine Domain) auf der Registerkarte Quellen angezeigt.
Splaktar
1
Ich musste auch verwenden debugger;, und DevTools musste geöffnet sein, während das Skript geladen wurde.
Barmar
ein //# sourceURL=browsertools://yourdomaingoeshere.com/action-openuwws.js
paar
6

Beachten Sie, dass die Quelldatei, die auf diese Weise auf der Registerkarte Quellen angezeigt wird, in der Gruppe (keine Domäne) angezeigt wird. Wenn Sie sie debuggen möchten, müssen Sie eine debugger;Zeile in Ihren Code einfügen und diese Zeile ausführen lassen (normalerweise um den Beginn der Ausführung Ihrer Quelldatei) und fügen Sie dann Ihre Haltepunkte hinzu, wo immer Sie möchten.

Wenn Sie Produktionsphasen debuggen, in denen debugger;der Code wahrscheinlich keine Zeilen enthält, können Sie dies erreichen, indem Sie mit CharlesProxy eine lokale Zuordnung zu Ihrer "neuen Kopie der Quelldatei mit eingefügter Debbuger-Zeile" erstellen.

Lluís Suñol
quelle
2
Das hat mich gerettet! Egal was ich getan habe, die Datei wurde erst angezeigt, als ich einen Debugger-Befehl eingegeben habe. Danach blieb es auch nach dem Entfernen des Debugger-Befehls über Seiten-Reloads und Debugging-Sitzungen hinweg bestehen.
Mike Devenney
0

Wenn ich versuche, solche Dinge im IE aufzuspüren, öffne ich die Entwicklungswerkzeuge (F12) und finde dann mithilfe der folgenden Zeile in der Konsole heraus, wo der Haltepunkt platziert werden soll:

debugger;myFunction();

Dadurch wird zur Registerkarte Debugger gewechselt, auf der Sie myFunction()den Haltepunkt festlegen und festlegen können.

Alan Samet
quelle