Wie können Sie JavaScript debuggen, das den Browser aufhängt?

Question 1

Ich arbeite an einer beträchtlich großen Rich-Webseiten-JavaScript-Anwendung. Aus irgendeinem Grund führt eine kürzlich vorgenommene Änderung dazu, dass der Browser zufällig hängt.

Wie kann ich eingrenzen wo das Problem liegt? Da der Browser nicht mehr reagiert, sehe ich keine Fehler und kann nicht Break on next mit FireBug.

Question 2

Anstatt Ihren Code verdammt noch mal zu kommentieren, sollten Sie a verwenden Debug-Konsolenprotokoll.

Sie sollten die verwenden console.log() Funktionalität, die von den meisten modernen Browsern bereitgestellt wird, oder emulieren Sie sie, wenn Sie einen Browser verwenden, der sie nicht unterstützt.

Jedes Mal, wenn Sie anrufen console.log('sometext')wird ein Protokolleintrag in der Debug-Konsole Ihres Browsers mit Ihrem angegebenen Text erstellt, normalerweise gefolgt von der tatsächlichen Uhrzeit.

Sie sollten vor jedem kritischen Teil Ihres Anwendungsflusses einen Protokolleintrag setzen, dann immer mehr, bis Sie herausfinden, welches Protokoll nicht aufgerufen wird. Das bedeutet, dass der Code vor diesem Protokoll den Browser aufhängt.

Sie können auch Ihre eigene persönliche Protokollfunktion mit zusätzlichen Funktionalitäten schreiben, zum Beispiel den Zustand einer bestimmten Variablen oder ein Objekt, das einen detaillierteren Aspekt Ihres Programmablaufs enthält usw.

Beispiel

console.log('step 1');

while(1) {}

console.log('step 2');

Die Endlosschleife hält das Programm an, aber Sie können weiterhin das Konsolenprotokoll mit dem aufgezeichneten Programmablauf sehen, bevor das Programm angehalten wurde.

In diesem Beispiel sehen Sie also nicht „Schritt 2“ im Konsolenprotokoll, aber Sie sehen „Schritt 1“. Das bedeutet, dass das Programm zwischen Schritt 1 und Schritt 2 angehalten wurde.

Sie können dann zwischen den beiden Schritten ein zusätzliches Konsolenprotokoll in den Code einfügen, um gründlich nach dem Problem zu suchen, bis Sie es finden.

Question 3

Ich bin überrascht, dass dies noch nicht richtig beantwortet wurde, und die Antwort mit den meisten Stimmen lautet im Grunde “Legen Sie überall Konsolenprotokolle ab, bis Sie es herausfinden”, was nicht wirklich eine Lösung ist, insbesondere bei größeren Anwendungen, es sei denn, Sie möchten wirklich Geld ausgeben Ihre ganze Zeit kopieren und einfügen “Konsolenprotokoll”.

Wie auch immer, alles, was Sie brauchen, ist debugger; jemand hat dies bereits erwähnt, aber nicht wirklich erklärt, wie es verwendet werden könnte:

In Chrome (und den meisten anderen Browsern) debugger; stoppt die Ausführung, bringt Sie zur Entwicklungskonsole und zeigt Ihnen den aktuell ausgeführten Code auf der linken Seite und den Stack-Trace auf der rechten Seite. Oben rechts auf der Konsole befinden sich einige pfeilähnliche Schaltflächen. Die erste ist “Skriptausführung fortsetzen”. Das, was wir wollen, ist das nächste “Nächsten Funktionsaufruf überspringen”.

Im Grunde müssen Sie nur einen Debugger irgendwo in Ihren Code einfügen, an einer Stelle, an der Sie wissen, dass die Seite noch nicht eingefroren ist, und ihn dann ausführen und wiederholt auf „Weiter zum nächsten Funktionsaufruf“ klicken, was wie ein Pfeil aussieht über einen Kreis springen. Es wird Zeile für Zeile, Anruf für Anruf, durch die Ausführung Ihres Skripts gehen, bis es in einer Endlosschleife hängt / hängen bleibt. An diesem Punkt können Sie genau sehen, wo Ihr Code hängen bleibt, sowie alle Variablen/Werte, die sich derzeit im Gültigkeitsbereich befinden, was Ihnen helfen sollte zu verstehen, warum das Skript hängen bleibt.

Ich habe mir nur den Kopf zerbrochen und versucht, in einem ziemlich komplexen JS, an dem ich arbeite, eine hängende Schleife zu finden, und ich habe es mit dieser Methode in etwa 30 Sekunden geschafft, sie zu finden.

Question 4

Du kannst hinzufügen debugger; irgendwo in Ihrem JS-Code, um einen Haltepunkt manuell festzulegen. Die Ausführung wird angehalten und Sie können den Code fortsetzen/untersuchen (Firebug/FF).

Firebug-Wiki-Seite: http://getfirebug.com/wiki/index.php/Debugger;_keyword

Question 5

Um das Problem einzugrenzen, könnten Sie damit beginnen, verschiedene Abschnitte Ihres Codes zu entfernen/deaktivieren/kommentieren, bis Sie den Code auf einen kleinen Teil eingegrenzt haben, der es Ihnen ermöglicht, den Fehler zu finden. Eine andere Möglichkeit besteht darin, den Check-in-Verlauf der Quellcodeverwaltung nach den verschiedenen Änderungen zu durchsuchen, die kürzlich festgeschrieben wurden. Hoffentlich verstehen Sie, woher das Problem kommt.

Question 6

Die heutigen Browser Firefox/Seamonkey (Ctrl-Shift-I / Debugger / PAUSE-Icon), Chrome, … haben normalerweise einen eingebauten JS-Debugger mit PAUSE-Taste, der jederzeit funktioniert. Drücken Sie einfach darauf, wenn Sie sich auf einer sich wiederholenden / CPU-intensiven Seite befinden, und höchstwahrscheinlich wird Sie die Art “Call Stack” auf das Problem hinweisen – bereit für eine weitere Untersuchung …

Question 7

Installieren Sie Google Chromgehen Sie zu Ihrer Seite, drücken Sie f12 und die Entwicklerkonsole wird angezeigt. Wählen Sie dann die aus Skripte Knopf, dann Wählen Sie Ihr Skript aus (z. B.: myScript.js) aus der Dropdown-Liste oben links in der Konsole. Klicken Sie dann auf die erste Zeile (oder eine Zeile, von der Sie glauben, dass sie nicht hängt) und a Haltepunkt wird gemacht. Nachdem das Javascript Ihren Haltepunkt erreicht hat, klicken Sie auf eine der Schaltflächen oben rechts in der Konsole (Sie sehen eine Schaltfläche wie das Pause-Symbol und dann eine andere 4-Schaltfläche). Drücken Sie auf die 2º-Taste (oder die Taste nach der Pause zum Übersteigen) oder die 3º-Taste (Eintreten). Fahren Sie mit der Maus über die Schaltflächen und sie erklären Ihnen, was sie bedeuten. Dann gehen Sie so in Ihren Code, bis er hängt, und dann können Sie ihn besser debuggen.

Der Google Chrome-Debugger ist weitaus besser als Firebug und schneller. Ich habe die Änderung von Firebug vorgenommen und das ist wirklich großartig! 😉

Question 8

Ich weiß, es ist primitiv, aber ich mag es, meinen js-Code mit ‘Warnungen’ zu bestreuen, um zu sehen, wie weit mein Code geht, bevor ein Problem auftritt. Wenn Warnfenster zu lästig sind, können Sie einen Textbereich einrichten, an den Sie Protokolle anhängen können:

<textarea id='txtLog' ...></textarea>

<script>

...
function log(str) {
    $('#txtLog').append(str + '\n');
}
log("some message, like 'Executing Step #2'...");
...

</script>