Wie debugge ich Javascript, das über AJAX geladen wurde (insbesondere jQuery)

Lesezeit: 4 Minuten

Ich habe meinen Codierungsstil mit komplexeren Projekten geändert, um kürzlich Seiten (und ihre eingebetteten Skripte) “on demand” zu laden. Es ist jedoch schwierig, diese Skripte zu debuggen, da sie wie folgt geladen werden:

jQuery.get('/myModularPage', function(html){ /* insert the loaded page into the DOM */ });

oder

$('#some-container').load('/myOtherPage');

Diese Skripte laufen einwandfrei, aber wie kann ich beim Debuggen Haltepunkte in diesen dynamisch geladenen Seiten und Skripten setzen?

Benutzer-Avatar
Squeee123

Fügen Sie dies zu Ihren js-Dateien hinzu, wo es brechen soll:

debugger;

Gehen Sie dann wie bei jedem anderen Debugger in/über/aus.

Funktioniert für dynamisch geladene Skripte und Seiten. Funktioniert soweit ich weiß nur in Chrome.

  • Dies ist definitiv ein gültiger Ansatz. Sobald Sie jedoch die Möglichkeit haben, Breakpoints zu debuggen, fühlt es sich wie ein Rückschritt an, um zur Verwendung zurückzukehren debugger Aussagen. Ich schätze jedoch Ihre Eingabe, und es wird definitiv für Browser funktionieren, die das nicht unterstützen //@ sourceURL: Syntax (einschließlich IE, FF und Safari … ich benutze oder teste nie in Opera)

    – BLSully

    29. Oktober 2012 um 21:39 Uhr

  • Genial. Lief wie am Schnürchen.

    –Pierre

    20. November 2012 um 17:27 Uhr

  • Das ist wirklich toll! Vielen Dank!

    – Metropole

    3. Oktober 2013 um 15:36 Uhr

  • Muah! 😀 das wird mir ewig helfen.

    – Praveen Apulien

    16. Juni 2014 um 9:42 Uhr

  • Funktioniert in Firefox 55.0.3 (x64)

    – Tim Abell

    2. Oktober 2017 um 11:11 Uhr

Benutzer-Avatar
BLSully

AKTUALISIEREN

Das akzeptierte Formular ist jetzt mit a # (Hashtag) statt @ (am Symbol)

Die Syntax wurde geändert, um Konflikte mit bedingten IE-Kompilierungsanweisungen und einigen anderen Problemen zu vermeiden (danke an Oleksandr Pshenychnyy und Varunkumar Nagarajan für den Hinweis).

//#sourceURL=/path/to/file 

Dies kann wirklich jede Zeichenfolge sein, die Ihnen hilft, den Codeblock zu identifizieren.

Ein weiterer guter Punkt von JMac:

Für mich wurde die js-Datei in der Quellenliste innerhalb einer Gruppe namens “(no domain)” angezeigt. Könnte erwähnenswert sein, da ich es zuerst vermisst habe!

ORIGINAL

Ich kämpfte ungefähr eine Woche lang mit dem oben Gesagten, bevor ich hinüberlief Dieser Artikel. Es funktioniert wirklich perfekt für meine Entwicklungsumgebung (Chrome 22, während ich dies schreibe).

Firebug unterstützt auch vom Entwickler benannte eval()-Puffer: Fügen Sie einfach eine Zeile am Ende Ihres eval(expression) hinzu wie:

//@ sourceURL=foo.js

Zum Beispiel angesichts dieses einfachen HTML-Dokuments:

<!DOCTYPE html>
<html>
<body>
    <p>My page's content</p>
    <div id="counter"></div>
    <script type="text/javascript">
        //if this page is loaded into the DOM via ajax 
        //the following code can't be debugged 
        //(or even browsed in dev-tools)

        for(i=0;i<10;i+=1) {
            document.getElementById('counter').innerText = i;
        }

        //but if I add the line below
        //it will "magically" show up in Dev Tools (or Firebug)

        //@ sourceURL=/path/to/my/ajaxed/page
    </script>
<body>
</html>

Dinge, die ich noch nicht entdeckt habe:

  • Muss dies für jeden Skriptblock für Inline-Skripte durchgeführt werden?
  • Muss es die letzte Zeile des Skriptblocks sein? (Der Artikel würde vorschlagen, dass die Antwort darauf lautet Jawohl)

  • Sehr hilfreich! Du hast mir so viele Stunden erspart!! In meinem Fall lade ich alle Skripte in meine App, rufe die Daten über Ajax ab und füge den Antworttext mit appendChild in das Skript-Tag ein. Durch Anhängen der //sourceURL= vor dem Einfügen bleibt der Code debugfähig. Ich denke, jquery sollte etwas ähnliches tun, also glaube ich, dass dies auch in jquery automatisiert werden kann.

    – MazarD

    22. Oktober 2013 um 16:43 Uhr

  • Ich hatte nach so etwas gesucht. Es wäre schön, wenn Chrome dies automatisch für Sie tun würde, auch wenn ihm kein benutzerfreundlicher Name zugeordnet wäre.

    – Jinglesthula

    14. Januar 2014 um 23:38 Uhr

  • Wozu ist der Pass relativ?

    – vlio20

    3. März 2014 um 11:07 Uhr

  • Dieser Beitrag ist etwas veraltet. Der Artikel von @Varunkumar Nagarajan besagt, dass die //@-Syntax später in //# geändert wurde, um Konflikte mit bedingten IE-Kompilierungsanweisungen und einigen anderen Problemen zu vermeiden. Bitte erwägen Sie, Ihre Antwort zu aktualisieren, um zukünftige Zuschauer nicht zu verwirren, da Ihr Beitrag wirklich eine großartige Antwort ist.

    – Sascha

    6. Mai 2015 um 13:12 Uhr


  • funktioniert, wenn ich nach dem Hash ein Leerzeichen einfüge //# sourceURL= in einem <script> Block im ajaxed HTML

    – Devi

    8. Juni 2017 um 8:26 Uhr

Benutzer-Avatar
sdw

Dieses Problem scheint nun im Allgemeinen mit dem gelöst worden zu sein neues Pragma:

//# sourceURL=filename

Beachten Sie das ‘Hash’ # eher als das ‘at’ @ Symbol.

Indem Sie diese Zeile in Ihre Quelle aufnehmen, wird ein Verweis darauf im Debugger angezeigt!

  • Dies funktioniert auch für Javascript, das inline auf einer HTML-Seite enthalten ist.

    – Alan David García

    22. Mai 2014 um 18:01 Uhr

  • Für mich wurde die js-Datei in der Quellenliste innerhalb einer Gruppe namens “(no domain)” angezeigt. Könnte erwähnenswert sein, da ich es zuerst vermisst habe!

    – JMac

    18. März 2015 um 16:39 Uhr

Benutzer-Avatar
Varunkumar Nagarajan

Wie Sie bereits erwähnt haben, können Sie verwenden //@ sourceURL. Chrome scheint nicht unterstützt zu werden //@ sourceURL für Inline-Skripte. Es funktioniert mit eval-Ausdrücken. Dieser HTML5-Artikel zu Quellkarten enthält weitere Details zur Benennung von Bewertungsblöcken und zur Benennung aller anonymen Funktionen in Ihrem Code.

Anstatt eval zu verwenden, können Sie versuchen, ein Skript-Tag oder JSONP einzubetten.

1283220cookie-checkWie debugge ich Javascript, das über AJAX geladen wurde (insbesondere jQuery)

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy