it-swarm.com.de

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

Ich arbeite an einer umfangreichen JavaScript-Anwendung. Aus irgendeinem Grund hat eine kürzlich vorgenommene Änderung dazu geführt, 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 Break on next nicht mit FireBug verwenden.

50
JeanPaul

Anstatt die Hölle aus Ihrem Code heraus zu kommentieren, sollten Sie ein debug-Konsolenprotokoll verwenden.

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

Bei jedem Aufruf von 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 Anwendungsablaufs einen Protokolleintrag festlegen und dann immer mehr, bis Sie feststellen, dass das Protokoll nicht aufgerufen wird. Das heißt, der Code vor diesem Protokoll hängt den Browser.

Sie können auch Ihre eigene Protokollfunktion mit zusätzlichen Funktionen erstellen, z. B. den Status einer bestimmten Variablen oder ein Objekt, das einen detaillierteren Aspekt Ihres Programmablaufs enthält.

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 wird also nicht "Schritt 2" im Konsolenprotokoll angezeigt, sondern "Schritt 1". Dies bedeutet, dass das Programm zwischen Schritt 1 und Schritt 2 angehalten wurde.

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

39
Jose Faeti

Sie können an beliebiger Stelle in Ihrem JS-Code debugger; hinzufügen, um einen Haltepunkt manuell festzulegen. Dadurch wird die Ausführung angehalten und Sie können den Code (Firebug/FF) fortsetzen/prüfen.

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

16
Ricardo Tomasi

Ich bin überrascht, dass dies noch nicht richtig beantwortet wurde, und die am meisten gewählte Antwort lautet im Wesentlichen: "Konsolenprotokolle überall platzieren, bis Sie es herausgefunden haben", was vor allem bei größeren Anwendungen keine Lösung ist, es sei denn, Sie möchten wirklich Geld ausgeben das ganze "Copy-Paste" von "Konsolenprotokoll".

Alles was Sie brauchen ist debugger; jemand hat das schon erwähnt, aber nicht wirklich erklärt, wie es benutzt werden kann:

In Chrome (und den meisten anderen Browsern) hält debugger; die Ausführung an, führt Sie zur Dev-Konsole und zeigt links den aktuell ausgeführten Code und rechts die Stack-Ablaufverfolgung an. Oben rechts auf der Konsole befinden sich einige pfeilartige Tasten. Die erste ist "Skriptausführung fortsetzen". Die eine, die wir wollen, ist die nächste "Schritt über nächsten Funktionsaufruf". 

Im Grunde müssen Sie lediglich einen Debugger an einer beliebigen Stelle in Ihren Code einfügen, an einem Punkt, an dem Sie wissen, dass die Seite noch nicht eingefroren ist. Führen Sie sie dann aus, und klicken Sie wiederholt auf "über nächsten Funktionsaufruf springen", der wie ein Pfeil aussieht über einen Kreis springen. Es geht Zeile für Zeile, Aufruf für Aufruf, durch die Ausführung Ihres Skripts, bis es in einer Endlosschleife hängen bleibt. An dieser Stelle können Sie genau sehen, wo Ihr Code stecken bleibt, sowie alle Variablen/Werte, die sich aktuell im Gültigkeitsbereich befinden. Dies hilft Ihnen zu verstehen, warum das Skript stecken bleibt. 

Ich habe mir gerade den Kopf zerbrochen, als ich versuchte, in einer ziemlich komplexen JS, an der ich gerade arbeite, eine hängende Schleife zu finden. Mit dieser Methode habe ich es innerhalb von 30 Sekunden gefunden.

7
AllTheTime

Um das Problem zu isolieren, können Sie zunächst verschiedene Abschnitte Ihres Codes 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 Verlauf der Check-Ins für die Quellcodeverwaltung für die verschiedenen Änderungen zu prüfen, die kürzlich festgeschrieben wurden. Hoffentlich werden Sie verstehen, woher das Problem kommt.

6
Darin Dimitrov

Installieren Sie Google Chrome , gehen Sie zu Ihrer Seite und drücken Sie f12 . Daraufhin wird die Entwicklerkonsole angezeigt. Wählen Sie dann die Schaltfläche Scripts und dann wählen Sie Ihr Skript (ex: myScript.js) aus dem Dropdown-Menü oben links in der Konsole aus. Klicken Sie dann auf die erste Zeile (oder eine Zeile, in der Sie glauben, dass sie nicht hängen bleibt), und ein Haltepunkt wird erstellt. 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 Symbol "Pause" und dann eine weitere Schaltfläche 4). Drücken Sie auf die 2º-Taste (oder die Taste nach einer Pause, um darüber zu springen) oder die 3º-Taste (Einsteigen). Fahren Sie mit der Maus über die Schaltflächen und sie erklären Ihnen, was sie bedeuten ... Dann werden Sie so in Ihren Code gehen, bis er hängt, und dann können Sie ihn besser debuggen.

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

3
Totty.js

Heutige Browser Firefox/Seamonkey (Ctrl-Shift-I/Debugger/PAUSE-Icon), Chrome, ... haben normalerweise einen eingebauten JS-Debugger mit PAUSE-Button, der jederzeit funktioniert. Wenn Sie sich auf einer schleifen-/rechenintensiven Seite befinden, wird der Bereich "Call Stack" höchstwahrscheinlich auf das Problem hingewiesen - bereit für die weitere Prüfung ...

2
kxr

Ich weiß, dass es primitiv ist, aber ich mag es, meinen js-Code mit 'alert' zu besprühen, um zu sehen, wie weit mein Code reicht, 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>
1
Trevor

Meiner Erfahrung nach sind Probleme, die dazu führen, dass der Browser nicht mehr reagiert, unendliche Schleifen oder dergleichen.

Untersuchen Sie Ihre Schleifen als Ausgangspunkt für dumme Dinge, z. B., dass Sie nichts erhöhen, auf das Sie sich später verlassen. 

Wie bereits in einem früheren Poster erwähnt, kommentieren Sie Code-Bits, um das Problem zu isolieren. Sie könnten eine Divide-and-Conquer-Methode verwenden und fast die Hälfte der Seiten JS auskommentieren, wenn sie mit einem anderen Fehler funktionierte, haben Sie wahrscheinlich das richtige Bit gefunden!.

Dann teilen Sie das in zwei Hälften, usw., bis Sie den Täter finden.

1
dougajmcdonald

Neben der Verwendung der manuellen Protokollausgabe und der debugger kann es manchmal hilfreich sein, jeden Funktionsaufruf zu protokollieren, um herauszufinden, wo die Schleife auftritt. Nach dem Snippet aus console.log automatisch zu jeder Funktion hinzufügen könnte dazu nützlich sein ...

function augment(withFn) {
    var name, fn;
    for (name in window) {
        fn = window[name];
        if (typeof fn === 'function') {
            window[name] = (function(name, fn) {
                var args = arguments;
                return function() {
                    withFn.apply(this, args);
                    return fn.apply(this, arguments);

                }
            })(name, fn);
        }
    }
}

augment(function(name, fn) {
    console.log("calling " + name);
});
0
Markus

Ich bin auf dasselbe Problem gestoßen und so habe ich es gelöst.

  1. Überprüfen Sie die Konsole auf Fehler und beheben Sie sie

Einige Zeitkonsole hängt sogar 

  1. Überprüfen Sie, ob alle Schleifen unendlich sind 
  2. Überprüfen Sie den rekursiven Code 
  3. Suchen Sie nach dem Code, der dynamisch Elemente zum Dokument hinzufügt
  4. Verwenden Sie Haltepunkte in Ihrer Konsole
  5. Verwenden Sie eine Konsolenprotokollierung, d 
0
Tofeeq

Ich denke, Sie können das Konsolenprotokoll so verwenden

console.log(new Date() + " started Function Name or block of lines from # to #");

// functions or few lines of code

console.log(new Date() + " finished Function Name or block of lines from # to #")

Am Ende der Ausführung Ihrer Webseite können Sie den Bereich identifizieren, der während der Ausführung so viel Zeit in Anspruch nimmt. B 

0
Ehab Salem

Ich weiß, dass diese Frage alt ist, aber in VS2013 können Sie die Pausetaste drücken und eine vollständige JS-Stapelverfolgung erhalten. Das hat mich wahnsinnig gemacht, weil die Schleife im Winkel lag, also konnte ich keine Alarme, Haltepunkte usw. einfügen, da ich keine Ahnung hatte, wo ich sie platzieren sollte. Ich weiß nicht, ob es mit der kostenlosen Express Edition funktioniert, aber es ist einen Versuch wert.

Ich habe auch gelesen, dass Chrome eine Pause-Funktion hat, also könnte dies eine Option sein, aber ich habe es selbst nicht probiert.

0
Lathejockey81