Debugging dynamisch hinzugefügt JavaScript-Dateien

Question

Ich habe eine Web-Anwendung, die dynamisch Javascript-Dateien basierend auf was der Benutzer wählt Optionen als Ajax in Echtzeit hinzugefügt, um zu vermeiden, den Bildschirm zu aktualisieren.

Ich versuche jetzt, diese dynamisch hinzugefügten Javascript-Dateien zu debuggen und habe sowohl Google Chrome-Entwickler-Tools und Firebug Plug-in für Firefox versucht, und festgestellt, dass die dynamisch hinzugefügten Javascript "Dateien" nicht angezeigt werden, kann ich nicht auswählen sie, um Haltepunkte etc. hinzuzufügen.

Also, gibt es eine Lösung dafür, dh Debugging dynamisch hinzugefügten Javascript-Dateien?

Answer 1

Sie können die debugger;-Anweisung in Ihren dynamischen Skripten hinzufügen, für die Sie den Haltepunkt festlegen möchten. Dadurch wird chrome wie ein regulärer Haltepunkt angehalten, wenn der Ausführungsthread die Anweisung erreicht, während die Benutzeroberfläche der Entwicklerwerkzeuge geöffnet ist.

Sie können das Skript auch damit starten, sodass Ihr Skript im Debugger angezeigt wird und Sie danach manuell einen Haltepunkt festlegen können.

Answer 2

Auschecken sourceURL das ist eine Möglichkeit, die DevTools anzugeben, die evaluierte Zeichenfolgen als echte Dateien behandeln sollten. Es macht genau das, wonach Sie suchen.

Am Ende des Strings EVALED, werden Kommentar dieser Form lassen:

//# sourceURL=app/js/myapp.js 

Von dort Chrome DevTools (und Firebug) wird als eine „echte Datei“ behandeln diese.

Much more explanation here und HTML5 Rocks hat an article und eine sourceURL demo.