JavaScript-Fehler beheben

Kayce Basques

Sofia Emelianova

In dieser Anleitung lernst du den grundlegenden Workflow zum Beheben von JavaScript-Problemen in den Entwicklertools kennen. Lesen Sie weiter oder sehen Sie sich die Videoversion dieser Anleitung an.

Fehler reproduzieren

Der erste Schritt zur Fehlerbehebung besteht darin, eine Reihe von Aktionen zu finden, mit denen ein Fehler konsistent reproduziert wird.

1. Öffnen Sie diese Demo in einem neuen Tab.
2. Geben Sie in das Feld Nummer 1 5 ein.
3. Geben Sie in das Feld Nummer 2 1 ein.
4. Klicken Sie auf Nummer 1 und Nummer 2 hinzufügen. Unter der Schaltfläche steht 5 + 1 = 51. Das Ergebnis sollte 6 sein. Diesen Fehler werden Sie beheben.

In diesem Beispiel beträgt das Ergebnis von 5 + 1 51. Sie sollte 6 sein.

Mit der Benutzeroberfläche des Bereichs "Quellen" vertraut machen

DevTools bietet viele verschiedene Tools für unterschiedliche Aufgaben, z. B. zum Ändern des CSS-Codes, zum Erstellen eines Profils für die Seitenladeleistung und zum Überwachen von Netzwerkanfragen. Im Bereich Quellen können Sie JavaScript-Fehler beheben.

1. Öffnen Sie die Entwicklertools und gehen Sie zum Bereich Quellen.

   

Der Bereich Quellen ist in drei Abschnitte unterteilt:

1. Der Tab Seite mit der Dateistruktur Alle von der Seite angeforderten Dateien sind hier aufgeführt.
2. Im Abschnitt Code-Editor. Nachdem Sie eine Datei auf dem Tab Seite ausgewählt haben, wird der Inhalt dieser Datei hier angezeigt.

3. Der Bereich Debugger. Verschiedene Tools zur Überprüfung des JavaScript-Codes der Seite.

   Wenn das Entwicklertools-Fenster groß ist, befindet sich der Debugger standardmäßig rechts neben dem Code-Editor. In diesem Fall werden auf den Tabs Umfang und Smartwatch Haltepunkte, Aufrufstack und andere als minimierbare Abschnitte zusammengeführt.

Code mit einem Haltepunkt pausieren

Eine gängige Methode zum Beheben solcher Probleme besteht darin, viele console.log()-Anweisungen in den Code einzufügen, um die Werte bei der Skriptausführung zu überprüfen. Beispiel:

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

Mit der Methode console.log() kann der Job erledigt werden, aber mit Haltepunkten geht das schneller. Mit einem Haltepunkt können Sie den Code während der Ausführung pausieren und alle Werte zu diesem Zeitpunkt prüfen. Haltepunkte haben gegenüber der Methode console.log() einige Vorteile:

• Mit console.log() müssen Sie den Quellcode manuell öffnen, den relevanten Code suchen, die console.log()-Anweisungen einfügen und dann die Seite neu laden, damit die Nachrichten in der Console angezeigt werden. Mit Haltepunkten können Sie bei dem relevanten Code anhalten, ohne zu wissen, wie er strukturiert ist.
• In Ihren console.log()-Anweisungen müssen Sie jeden Wert, den Sie prüfen möchten, explizit angeben. Mit Haltepunkten werden in den Entwicklertools die Werte aller Variablen zu diesem Zeitpunkt angezeigt. Manchmal gibt es Variablen, die sich auf Ihren Code auswirken, die Sie nicht einmal kennen.

Kurz gesagt können Haltepunkte Ihnen helfen, Programmfehler schneller zu finden und zu beheben als mit der Methode console.log().

Wenn Sie einen Schritt zurückgehen und über die Funktionsweise der Anwendung nachdenken, können Sie vermuten, dass die falsche Summe (5 + 1 = 51) im Event-Listener click berechnet wird, der der Schaltfläche Zahl 1 und Zahl 2 hinzufügen zugeordnet ist. Daher sollten Sie den Code um die Zeit herum anhalten, zu der der Listener click ausgeführt wird. Mit Ereignis-Listener-Haltepunkten können Sie genau dies tun:

1. Klicken Sie im Bereich Debugger auf Ereignis-Listener-Haltepunkte, um den Bereich zu maximieren. Die Entwicklertools zeigen eine Liste maximierbarer Ereigniskategorien wie Animation und Zwischenablage an.
2. Klicken Sie neben der Ereigniskategorie Maus auf arrow_right Maximieren. Die Entwicklertools zeigen eine Liste von Mausereignissen wie click und mousedown an. Neben jedem Ereignis befindet sich ein Kästchen.

3. Klicken Sie das Kästchen Klicken an. Die Entwicklertools sind jetzt so eingerichtet, dass sie automatisch pausiert werden, wenn ein beliebiger click-Ereignis-Listener ausgeführt wird.

   

4. Kehren Sie zur Demo zurück und klicken Sie noch einmal auf Nummer 1 und Nummer 2 hinzufügen. Die Entwicklertools pausieren die Demo und heben im Bereich Quellen eine Codezeile hervor. Die Entwicklertools sollten bei dieser Codezeile pausiert werden:

   function onClick() {
   

   Wenn Sie die Pausierung in einer anderen Codezeile unterbrechen, klicken Sie auf Fortsetzen Skriptausführung fortsetzen, bis Sie in der richtigen Zeile pausiert werden.

Ereignis-Listener-Haltepunkte sind nur eine von vielen Arten von Haltepunkten, die in den Entwicklertools verfügbar sind. Es lohnt sich, alle verschiedenen Typen genauer unter die Lupe zu nehmen, da jeder Typ Ihnen letztendlich hilft, verschiedene Szenarien so schnell wie möglich zu beheben. Weitere Informationen dazu, wann und wie Sie die einzelnen Typen verwenden, finden Sie unter Code mit Haltepunkten pausieren.

Schritt-für-Schritt-Anleitung des Codes

Eine häufige Ursache für Fehler ist, dass ein Skript in der falschen Reihenfolge ausgeführt wird. Wenn Sie den Code durchgehen, können Sie Zeile für Zeile seine Ausführung durchgehen und genau herausfinden, wo er in einer anderen Reihenfolge als erwartet ausgeführt wird. Jetzt ausprobieren:

1. Klicken Sie in den Entwicklertools im Bereich Quellen auf step_into Step_into Step_in den nächsten Funktionsaufruf, um Zeile für Zeile die Ausführung der Funktion onClick() auszuführen. In den Entwicklertools wird die folgende Codezeile hervorgehoben:

   if (inputsAreEmpty()) {
   

2. Klicken Sie auf step_over Schritt über den nächsten Funktionsaufruf.

   Die Entwicklertools führen inputsAreEmpty() aus, ohne dass eingreifen zu müssen. Wie Sie sehen, werden in den Entwicklertools einige Codezeilen übersprungen. Dies liegt daran, dass inputsAreEmpty() als „false“ ausgewertet wurde und der Codeblock der if-Anweisung nicht ausgeführt wurde.