16. Unterrichtsblock

Kursinhalte

Debugging
Übungsaufgabe

JavaScript Debugging

Fehler können & werden jedes Mal passieren, wenn man neuen Computercode schreibt oder verändert.
Debugging heißt dabei der Prozess des Testens, Findens und Reduzierens von Fehlern (Bugs) in Computerprogrammen.

Der erste bekannte Computerfehler war ein echter Fehler – ein Insekt (englisch Bug) welches in der Elektronik steckte.

Code-Debugging

Programmiercode kann Syntaxfehler oder logische Fehler enthalten. Viele dieser Fehler sind schwer zu diagnostizieren. Wenn Programmiercode Fehler enthält, passiert oft nichts. Es gibt keine Fehlermeldungen und man erhält häufig keine Hinweise, wo man nach Fehlern suchen muss.

JavaScript-Debugger

Das Debuggen ist nicht einfach. Aber glücklicherweise haben alle modernen Browser einen eingebauten JavaScript-Debugger.

Eingebaute Debugger können ein- und ausgeschaltet werden, was die Meldung von Fehlern an den Benutzer erzwingt.

Mit einem Debugger kann man auch Haltepunkte setzen (Stellen, an denen die Codeausführung gestoppt werden kann) und Variablen untersuchen, während der Code ausgeführt wird. Normalerweise (ansonsten folgen Sie den Schritten unten auf dieser Seite) aktiviert man das Debugging im Browser mit der Taste F12 und wählt im Debugger-Menü „Konsole“.

Die Methode console.log()

Wenn Ihr Browser Debugging unterstützt, können Sie console.log()mit JavaScript-Werte im Debugger-Fenster anzeigen:

Meine erste Webseite

<!DOCTYPE html>
<html>
  <body>
  <h1>Meine erste Webseite</h1>
    <script>
      a = 5;
      b = 6;
      c = a + b;
      console.log(c);
    </script>
  </body>
</html>

Tipp: Lesen Sie mehr über die console.log()Methode in unserer Referenz zur JavaScript-Konsole .

Haltepunkte setzen

Um den Code in der Mitte der Laufzeit anzuhalten, legen Sie einen Haltepunkt fest. Der grundlegendste und bekannteste Haltepunkttyp ist ein Codezeilen-Haltepunkt.

Verwenden Sie einen Codezeilen-Haltepunkt, wenn Sie den genauen Codebereich kennen, den Sie untersuchen müssen. DevTools hält immer an der angegebenen Codezeile an, bevor es ausgeführt wird.

So legen Sie einen Codezeilenhaltepunkt fest:

Quellentool auswählen.
Datei öffnen, die die Codezeile enthält.
Auf den Bereich links neben der Zeilennummer der Codezeile klicken. Oder mit der rechten Maustaste auf die Zeilennummer klicken, und dann „Haltepunkt hinzufügen“ auswählen. Dann wird neben der Zeilennummer ein roter Kreis (oder neuerdings ein blaues Rechteck) angezeigt, der einen Haltepunkt angibt.

Codezeilen-Haltepunkte können ineffizient festgelegt werden, insbesondere, wenn man nicht genau weiß, wo man suchen soll, oder wenn die Codebasis groß ist. Um beim Debuggen Zeit zu sparen, sind weitere Informationen unter folgender Seite zu finden: Anhalten des Codes mit Haltepunkten.

Das Debugger-Schlüsselwort

Das debugger-Schlüsselwort stoppt die Ausführung von JavaScript und ruft (falls verfügbar) die Debugging-Funktion auf.
Dies hat die gleiche Funktion wie das Setzen eines Breakpoints im Debugger.
Wenn kein Debugging verfügbar ist, hat die Debugger-Anweisung keine Auswirkung.
Wenn der Debugger eingeschaltet ist, stoppt dieser Code die Ausführung, bevor er die dritte Zeile ausführt.

let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;

Debugging-Tools der wichtigsten Browser

Normalerweise aktivieren Sie das Debugging im Browser mit F12 und wählen im Debugger-Menü „Console“.

Andernfalls befolgt man diese Schritte:

Chrome

Öffnen Sie den Browser.
Wählen Sie im Menü „Weitere Tools“ aus.
Wählen Sie unter Tools „Entwicklertools“ aus.
Wählen Sie abschließend Konsole aus.

Firefox

Öffnen Sie den Browser.
Wählen Sie im Menü „Webentwickler“ aus.
Wählen Sie abschließend „Web Console“ aus.

Übungsaufgaben

Aufgabe 1

Probiere o.g. Methoden des Debugging aus, um ein Gefühl dafür zu bekommen. Verwende hierfür folgende Datei: https://webentwicklerkurs.de/wp-content/uploads/2023/02/Klausur_JavaScript_fehler.html

Um Dinge am Code zu ändern, lade Dir die Datei von hier herunter: https://webentwicklerkurs.de/wp-content/uploads/2023/02/Klausur-JavaScript-Fehler.zip