JavaScript
Debuggen

Haltepunkte

Haltepunkte unterbrechen Ihr Programm, sobald die Ausführung einen bestimmten Punkt erreicht. Sie können dann das Programm Zeile für Zeile schrittweise durchlaufen, seine Ausführung beobachten und den Inhalt Ihrer Variablen überprüfen.

Es gibt drei Möglichkeiten, Haltepunkte zu erstellen.

1. Von Code aus mit dem debugger; Aussage.
2. Über den Browser mit den Developer Tools.
3. Aus einer integrierten Entwicklungsumgebung (IDE).

Debugger-Anweisung

Sie können einen debugger; Anweisung an beliebiger Stelle in Ihrem JavaScript-Code. Sobald der JS-Interpreter diese Zeile erreicht, wird die Skriptausführung angehalten, sodass Sie Variablen überprüfen und den Code schrittweise durchlaufen können.

Entwicklerwerkzeuge

Die zweite Option ist das Hinzufügen eines Haltepunkts direkt in den Code aus den Developer Tools des Browsers.

Öffnen der Developer Tools

Chrome oder Firefox

1. Drücken Sie F12 , um die Entwicklertools zu öffnen
2. Wechseln Sie zur Registerkarte "Quellen" (Chrome) oder zur Registerkarte "Debugger" (Firefox).
3. Drücken Sie Strg + P und geben Sie den Namen Ihrer JavaScript-Datei ein
4. Drücken Sie die Eingabetaste , um es zu öffnen.

Internet Explorer oder Edge

1. Drücken Sie F12 , um die Entwicklertools zu öffnen
2. Wechseln Sie auf die Registerkarte Debugger.
3. Verwenden Sie das Ordnersymbol in der oberen linken Ecke des Fensters, um ein Dateiauswahlfenster zu öffnen. Dort finden Sie Ihre JavaScript-Datei.

Safari

1. Drücken Sie Befehlstaste + Wahltaste + C , um die Entwicklertools zu öffnen
2. Wechseln Sie zur Registerkarte Ressourcen
3. Öffnen Sie den Ordner "Scripts" im linken Bereich
4. Wählen Sie Ihre JavaScript-Datei aus.

Einen Haltepunkt aus den Developer Tools hinzufügen

Wenn Sie Ihre JavaScript-Datei in den Developer Tools geöffnet haben, können Sie auf eine Zeilennummer klicken, um einen Haltepunkt zu setzen. Wenn das Programm das nächste Mal ausgeführt wird, wird es dort angehalten.

Hinweis zu reduzierten Quellen: Wenn Ihre Quelle minimiert ist, können Sie sie hübsch drucken (in ein lesbares Format konvertieren). In Chrome erfolgt dies durch Klicken auf die Schaltfläche {} in der rechten unteren Ecke des Quelltext-Viewers.

IDEs

Visual Studio Code (VSC)

VSC bietet eine integrierte Unterstützung für das Debuggen von JavaScript.

1. Klicken Sie links auf die Schaltfläche Debug oder auf Strg + Umschalt + D
2. Falls noch nicht geschehen, erstellen Sie eine Startkonfigurationsdatei ( launch.json ), indem Sie auf das Zahnradsymbol drücken.
3. Führen Sie den Code von VSC aus, indem Sie die grüne Wiedergabetaste drücken oder F5 drücken.

Einen Haltepunkt in VSC hinzufügen

Klicken Sie neben der Zeilennummer in Ihrer JavaScript-Quelldatei, um einen Haltepunkt hinzuzufügen (dieser wird rot markiert). Um den Haltepunkt zu löschen, klicken Sie erneut auf den roten Kreis.

Tipp: Sie können die bedingten Haltepunkte auch in den Entwicklungswerkzeugen des Browsers verwenden. Diese helfen dabei, unnötige Ausführungspausen zu überspringen. Beispielszenario: Sie wollen genau bei 5 - ^ten Iteration eine Variable in einer Schleife zu untersuchen.

Code durchgehen

Nachdem Sie die Ausführung an einem Haltepunkt angehalten haben, möchten Sie die Ausführung zeilenweise verfolgen, um zu sehen, was passiert. Öffnen Sie die Developer Tools Ihres Browsers und suchen Sie nach den Symbolen für die Ausführungssteuerung. (In diesem Beispiel werden die Symbole in Google Chrome verwendet, in anderen Browsern sind sie jedoch ähnlich.)

Resume: Ausführung unterbrechen. Shorcut: F8 (Chrome, Firefox)

Schritt vorbei: Führen Sie die nächste Codezeile aus. Wenn diese Zeile einen Funktionsaufruf enthält, führen Sie die gesamte Funktion aus und wechseln Sie zur nächsten Zeile, anstatt zu dem Punkt zu springen, an dem die Funktion definiert ist. Abkürzung: F10 (Chrome, Firefox, IE / Edge), F6 (Safari)

Step Into: Führen Sie die nächste Codezeile aus. Wenn diese Zeile einen Funktionsaufruf enthält, springen Sie in die Funktion und machen Sie dort Pause. Abkürzung: F11 (Chrome, Firefox, IE / Edge), F7 (Safari)

Step Out: Führen Sie den Rest der aktuellen Funktion aus, springen Sie zurück an, von wo aus die Funktion aufgerufen wurde, und halten Sie bei der nächsten Anweisung dort an. Tastenkombination: Umschalt + F11 (Chrome, Firefox, IE / Edge), F8 (Safari)

Verwenden Sie diese in Verbindung mit dem Call Stack , der Ihnen mitteilt, in welcher Funktion Sie sich aktuell befinden, welche Funktion diese Funktion aufgerufen hat und so weiter.

Weitere Informationen und Ratschläge finden Sie im Google-Handbuch zum Thema "So gehen Sie den Code durch" .

Links zur Dokumentation der Browserkürzel:

• Chrom
• Feuerfuchs
• IE
• Kante
• Safari

Ausführung automatisch pausieren

In Google Chrome können Sie die Ausführung anhalten, ohne Haltepunkte setzen zu müssen.

Pause bei Ausnahme: Wenn diese Schaltfläche aktiviert ist und eine nicht behandelte Ausnahme auftritt, wird das Programm angehalten, als hätte es einen Haltepunkt erreicht. Die Schaltfläche befindet sich in der Nähe von Ausführungssteuerungen und ist hilfreich zum Auffinden von Fehlern.

Sie können die Ausführung auch anhalten, wenn ein HTML-Tag (DOM-Knoten) geändert wird oder wenn seine Attribute geändert werden. Klicken Sie dazu auf der Registerkarte Elemente mit der rechten Maustaste auf den Knoten DOM und wählen Sie "Break on ...".

Interaktive Interpreter-Variablen

Beachten Sie, dass diese nur in den Entwicklerwerkzeugen bestimmter Browser funktionieren.

$_ gibt den Wert des zuletzt ausgewerteten Ausdrucks an.

"foo"             // "foo"
$_                // "foo"

$0 bezieht sich auf das im Inspector aktuell ausgewählte DOM-Element. Wenn also <div id="foo"> markiert ist:

$0                      // <div id="foo">
$0.getAttribute('id')   // "foo"

$1 bezieht sich auf das zuvor ausgewählte Element, $2 auf das zuvor ausgewählte Element usw. für $3 und $4 .

Um eine Sammlung von Elementen zu erhalten, die mit einem CSS-Selektor übereinstimmen, verwenden Sie $$(selector) . Dies ist im Wesentlichen eine Verknüpfung für document.querySelectorAll .

var images = $$('img');  // Returns an array or a nodelist of all matching elements

¹ _{Alias ​​für document.getElementById oder document.querySelector}

Elementinspektor

Klicken Sie auf die Wählen Sie ein Element auf der Seite aus, um die Schaltfläche in der oberen linken Ecke der Registerkarte Elemente in Chrome oder in der Registerkarte Inspector in Firefox (in den Entwicklertools) zu prüfen. Klicken Sie dann auf ein Element der Seite, um das Element hervorzuheben, und weist es dem $0 variabel .

Elements Inspector kann auf verschiedene Arten verwendet werden, zum Beispiel:

1. Sie können überprüfen, ob Ihr JS DOM auf die Weise manipuliert, wie Sie es erwarten.
2. Sie können Ihr CSS leichter debuggen, wenn Sie sehen, welche Regeln das Element beeinflussen
   (Registerkarte " Stile" in Chrome)
3. Sie können mit CSS und HTML herumspielen, ohne die Seite erneut zu laden.

Außerdem speichert Chrome die letzten 5 Optionen auf der Registerkarte Elemente. $0 ist die aktuelle Auswahl, während $1 die vorherige Auswahl ist. Sie können bis zu $4 . Auf diese Weise können Sie problemlos mehrere Knoten debuggen, ohne die Auswahl ständig darauf zu ändern.

Weitere Informationen finden Sie bei Google Developers .

Verwenden von Setzern und Gettern, um herauszufinden, was eine Eigenschaft geändert hat

Nehmen wir an, Sie haben ein Objekt wie dieses:

var myObject = {
    name: 'Peter'
}

Später versuchen Sie in Ihrem Code, auf myObject.name und Sie erhalten George anstelle von Peter . Sie fragen sich, wer es geändert hat und wo genau es geändert wurde. Es gibt eine Möglichkeit, einen debugger (oder etwas anderes) in jedem Satz zu platzieren (jedes Mal, wenn jemand myObject.name = 'something' ):

var myObject = {
    _name: 'Peter',
    set name(name){debugger;this._name=name},
    get name(){return this._name}
}

Beachten Sie, dass wir name in _name umbenannt _name und einen Setter und einen Getter für name .

set name ist der Setter. console.trace() ist ein console.trace() Ort, an dem Sie debugger , console.trace() oder andere console.trace() zum Debuggen platzieren können. Der Setter setzt den Wert für name in _name . Der Getter (der get name Teil) liest den Wert von dort aus. Jetzt haben wir ein voll funktionsfähiges Objekt mit Debugging-Funktionalität.

Meistens ist das Objekt, das geändert wird, nicht unter unserer Kontrolle. Glücklicherweise können wir Setter und Getter für vorhandene Objekte definieren, um sie zu debuggen.

// First, save the name to _name, because we are going to use name for setter/getter
otherObject._name = otherObject.name;

// Create setter and getter
Object.defineProperty(otherObject, "name", {
    set: function(name) {debugger;this._name = name},
    get: function() {return this._name}
});

Schauen Sie sich Setter und Getter an MDN für weitere Informationen.

Browserunterstützung für Setter / Getter:

Pause, wenn eine Funktion aufgerufen wird

Bei benannten (nicht anonymen) Funktionen können Sie die Ausführung der Funktion unterbrechen.

debug(functionName);

Bei der nächsten Ausführung der functionName functionName stoppt der Debugger in der ersten Zeile.

Verwenden der Konsole

In vielen Umgebungen haben Sie Zugriff auf ein globales console , das einige grundlegende Methoden für die Kommunikation mit Standardausgabegeräten enthält. In der Regel ist dies die JavaScript-Konsole des Browsers (weitere Informationen finden Sie unter Chrome , Firefox , Safari und Edge ).

// At its simplest, you can 'log' a string
console.log("Hello, World!");

// You can also log any number of comma-separated values
console.log("Hello", "World!");

// You can also use string substitution
console.log("%s %s", "Hello", "World!");

// You can also log any variable that exist in the same scope
var arr = [1, 2, 3];
console.log(arr.length, this);

Sie können verschiedene Konsolenmethoden verwenden, um Ihre Ausgabe auf unterschiedliche Weise hervorzuheben. Andere Methoden sind auch für das fortgeschrittenere Debugging hilfreich.

Weitere Dokumentation, Informationen zur Kompatibilität und Anweisungen zum Öffnen der Browserkonsole finden Sie im Thema Konsole .

Hinweis: Wenn Sie IE9 unterstützen müssen, entfernen console.log entweder console.log oder wickeln Sie die Aufrufe folgendermaßen um, da die console undefiniert ist, bis die Developer Tools geöffnet werden:

if (console) { //IE9 workaround
    console.log("test");
}