Aus meiner letzten Frage habe ich bereits eine JavaScript-Funktion zum dynamischen Laden einer Teilansicht erstellt. Daher kann ich kein dynamisches Laden von JavaScript debuggen. Weil das gesamte geladene JavaScript von der Funktion "eval" ausgewertet wird.
Ich habe jedoch eine Möglichkeit gefunden, neues JavaScript mithilfe des folgenden Skripts zu erstellen, um ein Skript dynamisch in den Header des aktuellen Dokuments zu erstellen. Alle geladenen Skripte werden im HTML-DOM angezeigt (Sie können jeden Debugger verwenden, um sie zu finden).
var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.text = "alert('Test!');";
document.getElementsByTagName('head')[0].appendChild(script);Übrigens können die meisten Debugger (IE8 Developer Toolbar, Firebug und Google Chrome) in keinem dynamischen Skript einen Haltepunkt setzen. Weil das debuggbare Skript beim ersten Laden nach dem Laden der Seite geladen werden muss.
Haben Sie eine Idee zum Debuggen in dynamischen Skriptinhalten oder -dateien?
Update 1 - Quellcode zum Testen hinzufügen
Sie können die folgende xhtml-Datei verwenden, um zu versuchen, einen variablen Wert zu debuggen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Loading Script Testing</title>
<script type="text/javascript">
function page_load()
{
var script = document.createElement('script')
script.setAttribute("id", "dynamicLoadingScript");
script.setAttribute("type","text/javascript");
script.text = "var someVariable = 0;\n" +
"someVariable = window.outerWidth;\n" +
"alert(someVariable);";
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
</head>
<body onload="page_load();">
</body>
</html>Nach der Antwort teste ich es einfach in FireBug. Das Ergebnis sollte wie unten abgebildet angezeigt werden.
Bitte schauen Sie sich das Skript "dynamicLoadingScript" an, das nach dem Laden der Seite hinzugefügt wird.
Es wird jedoch nicht in der Skriptregisterkarte von FireBug gefunden
Update 2 - Debug-Haltepunkt im dynamischen Ladeskript erstellen
Beide obigen Bilder zeigen das Einfügen von "Debugger". Die Anweisung in einer Skriptzeile kann einen Haltepunkt im dynamischen Ladeskript auslösen. Beide Debugger zeigen jedoch keinen Code am Haltepunkt an. Daher ist es dafür nutzlos.
Vielen Dank,
quelle
Antworten:
Es wäre auch möglich, Chrom für dasselbe zu verwenden. Chrome verfügt über eine Funktion, mit der Sie ein Parser-Attribut angeben und das dynamische JS als Teil einer Datei anzeigen können, die dann durchsucht und Haltepunkte festgelegt werden können.
Das Attribut, das festgelegt werden muss, ist
Dabei ist dynamicScript.js der Name der Datei, die im Skriptdateibrowser angezeigt werden soll.
Weitere Informationen hier
Paul Irish spricht auch kurz darüber in seinem ausgezeichneten Vortrag über Tooling & The Webapp Development Stack
quelle
Versuchen Sie, einen "Debugger" hinzuzufügen. Anweisung in dem Javascript, das Sie dynamisch hinzufügen. Dies sollte dazu führen, dass es unabhängig von den Haltepunkteinstellungen an dieser Zeile angehalten wird.
quelle
Ja, es ist (jetzt) möglich, dynamisch geladenes JavaScript mit Google Chrome zu debuggen!
debugger;Für dynamisch geladene JS-Dateien müssen keine zusätzlichen oder anderen Attribute hinzugefügt werden. Führen Sie zum Debuggen einfach die folgenden Schritte aus:Methode 1:
Mein technischer Leiter zeigte nur eine super einfache Möglichkeit, dynamisch geladene Javascript-Methoden zu debuggen.
In meinem Fall ist es
GetAdvancedSearchConditonRowNewWenn die JS-Methode geladen wurde, wird die Definition der Methode angezeigt.
Methode 2:
Als Beispiel lade ich eine JS-Datei, wenn ich mit einem
ajaxAufruf auf eine Schaltfläche klicke.networkTab in den Google Chrome Dev ToolsRetrieveAllTags?_=1451974716935)initiaterund Sie finden Ihre dynamisch geladene JS-Datei (mit PräfixVM*).VM*Datei, um sie zu öffnen.quelle
Ich verwende zu diesem Zweck Google Chrome.
In Chrome auf der Registerkarte "Skripte" können Sie "Bei allen Ausnahmen pausieren" aktivieren.
Und dann irgendwo in Ihre Codezeile einfügen
try{throw ''} catch(e){}. Chrome stoppt die Ausführung, wenn diese Zeile erreicht ist.BEARBEITEN: Das Bild wurde geändert, damit klarer wird, wovon ich spreche.
quelle
try{throw ''} catch(e){}und aktivieren dann den Modus "Bei allen Ausnahmen pausieren". Chrome stoppt die Ausführung, wenn eine Ausnahme ausgelöst wird. Ich habe es oft überprüft. Ich habe ein anderes Bild geladen. Dort ist klarer, wovon ich spreche.debuggerwürde damals nicht in dynamisch erstellten Skripten funktionieren.Ich denke, Sie müssen dem eval'd-Code möglicherweise einen "Namen" wie diesen geben:
http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/
Wenn Sie dies tun, ist es wahrscheinlich, dass der
debuggerAnsatz von "Update 2" dann funktionieren sollte.quelle
//@ sourceURL=blahin der Produktion.debuggerTeil, der Probleme verursacht, nicht der Quellkommentar (der von JS sicherlich ignoriert wird)UPDATE : Die Syntax für sourceUrl wurde geändert (@ wird durch # ersetzt), um Fehler in nicht unterstützten Browsern zu vermeiden (lesen Sie: IE). Einzelheiten
quelle
Verwenden von Chrome (12.0.742.112) mit dem von Ihnen angegebenen Code und einer solchen Debugger-Anweisung
funktioniert bei mir.
Möglicherweise ist es greifbarer, wenn Sie die Selektoränderung an ein Ereignis in Ihrer Teilansicht binden, anstatt Skriptelemente im HTML-Text zu erstellen (fühlt sich nicht richtig an).
Sie könnten so etwas tun
Dieser Code fügt allen jQuery-Auswahlvorgängen, die ausgeführt werden, während sich die Maus in einem bestimmten Element befindet, immer einen einschränkenden Selektor hinzu, da der HTML-Code nicht durcheinander gebracht werden soll.
(Scheint immer noch hackerisch, vielleicht hat jemand eine bessere Lösung)
Prost
quelle
In Firebug sollten Sie dieses Skript sehen können, nachdem die Seite geladen und das Skript eingefügt wurde. Wenn Sie dies tun, können Sie an der entsprechenden Stelle einen Haltepunkt festlegen, der beim Aktualisieren der Seite erhalten bleibt.
quelle
Dynamisch geladenes Javascript muss noch vom Browser analysiert werden. Hier befindet sich WebKit oder der FireBug-Debugger, sodass es dem Debugger unterliegt, egal was passiert. Ich denke, dies gilt auch für die Entwicklertools in IE8.
Ihr Code unterliegt also dem Debugger. Wenn Sie also ein Problem haben, befindet es sich nicht in dieser Datei oder diesem Text, wenn kein Fehler auftritt
Die andere Sache ist
script.text = "alert('Test!');";nicht gültig, so dass es nicht in allen Browsern funktioniert, was Sie wollenscript.innerHTML = "alert('Test!');";Obwohl es sich um innerHTML handelt, bedeutet es, dass Code in den HTML-Tags nicht der HTML-Code in den am häufigsten verwendeten Personen ist, sodass er falsch erklärt wird
BEARBEITET FÜR UPDATE ZWEI
Und beim zweiten Update mit Chrome habe ich das gemacht
Gehe zu ungefähr: leer Öffne die Konsole und gehe hinein
dann wird es kaputt gehen und die Skript-Registerkarte mit ungefähr: leer angezeigt (nichts zu sehen)
Zeigen Sie dann auf der rechten Seite die Liste der Aufrufstapel an, klicken Sie dann auf die zweite (anonyme Funktion) und es wird Ihnen angezeigt.
In Ihrer Datei befindet sich also eine (anonyme) Funktion, die der von Ihnen ausgeführte Code ist, und Sie sehen dort den Haltepunkt. Sie wissen also, dass Sie im richtigen sind.
quelle
Mit dem Google Chrome (oder Safari ) Developers Tool können Sie JavaScript Zeile für Zeile ausführen.
Developer Tool-
>Skripte>Wählen Sie>auf der rechten Seite das Skript aus, für das Sie das Pausenzeichen debuggen möchten, oder legen Sie Haltepunkte fest, indem Sie auf die Zeilennummer klickenquelle
Eine Option, die ich gerne verwende, um eine console.log ('') - Anweisung in meinen Code einzufügen. Sobald diese Anweisung in der Konsole angezeigt wird, wird ihr eine Zeilennummer zugeordnet. Sie können auf diese Nummer klicken, um zum Speicherort in der Quelle zu gelangen und einen Haltepunkt festzulegen. Der Nachteil dieses Ansatzes besteht darin, dass Haltepunkte beim erneuten Laden von Seiten nicht beibehalten werden und Sie den Code durchlaufen müssen, bevor Sie einen Debugger hinzufügen können.
quelle
Für aktuelle Google Chrome-Browser oder andere moderne Browser können Sie mit dem Entwicklertool wie den folgenden Bildern problemlos nach ausgewertetem Code suchen.
Erstellen Sie einen Haltepunkt und führen Sie die Funktion aus, um ihn zu testen.
quelle