16. Unterrichtsblock

JavaScript Logo

Kursinhalte

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 .

Aufgabe

Aufgabe 1: Fehler finden

Warum wird hier NaN (Not a Number) in der Konsole ausgegeben? Behebe den Fehler

<script>
  let a = "5";
  let b = 6;
  let c = a - b;
  console.log(c);
</script>

Aufgabe 2: Variablen während der Ausführung prüfen

Nutze console.log(), um zu prüfen, ob eine Variable den erwarteten Wert hat.

<script>
  let preis = 20;
  let rabatt = 5;
  let endpreis = preis - rabatt;

/* Hier den Code einfügen */
</script>

Aufgabe 3: Debugger gezielt einsetzen

Stoppe die Codeausführung an einer bestimmten Stelle mit dem debugger und untersuche die Variablen im Browser-Debugger.

<script>
  let a = 2;
  let b = 3;
  let c = a * b;
  console.log(c);
</script>

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:

  1. Quellentool auswählen.
  2. Datei öffnen, die die Codezeile enthält.
  3. 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.Ein Codezeilen-Haltepunkt.

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.

Aufgabe

Unter dem Codebeispiel finden sich die Aufgaben

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Haltepunkte – Debugging-Übung</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 16px; line-height: 1.4; }
    button { padding: 10px 14px; cursor: pointer; }
    #output { margin-top: 12px; padding: 10px; border: 1px solid #ccc; }
    code { background: #f2f2f2; padding: 2px 4px; }
  </style>
</head>
<body>
  <h1>Haltepunkte setzen – Übungsdatei</h1>
  <p>
    Öffne die DevTools mit <code>F12</code> → <code>Sources/Quellen</code>.
    Setze Haltepunkte im Skript und beobachte Variablenwerte.
  </p>

  <button id="calcBtn">Berechnung starten</button>
  <div id="output">Ausgabe erscheint hier…</div>

  <script>
    "use strict";

    // ---- Eingabewerte (für Aufgabe 3 / Variablen prüfen) ----
    const preis = 49.99;
    const rabattProzent = 10;     // 10% Rabatt
    const mwstProzent = 19;       // 19% MwSt

    // ---- UI ----
    const button = document.getElementById("calcBtn");
    const output = document.getElementById("output");

    button.addEventListener("click", () => {
      // Aufgabe 1: Setze hier einen Haltepunkt (vor der Berechnung)
      const netto = berechneNetto(preis, rabattProzent);

      // Aufgabe 2: Setze hier einen Haltepunkt vor console.log()
      console.log("Netto (nach Rabatt):", netto);

      const brutto = berechneBrutto(netto, mwstProzent);

      // Aufgabe 4: Setze den Haltepunkt einmal hier…
      output.textContent = "Brutto (inkl. MwSt): " + brutto.toFixed(2) + " €";

      // …und verschiebe ihn dann eine Zeile weiter unten (Vergleich der Werte)
      console.log("Brutto (inkl. MwSt):", brutto);
    });

    function berechneNetto(preisWert, rabattInProzent) {
      // Rabatt berechnen
      const rabatt = preisWert * (rabattInProzent / 100);

      // Aufgabe 3: Setze einen Haltepunkt hier und prüfe preisWert, rabattInProzent, rabatt
      const nettoPreis = preisWert - rabatt;

      return nettoPreis;
    }

    function berechneBrutto(nettoWert, mwstInProzent) {
      // ---- Absichtlicher Bug für Aufgabe 5 ----
      // BUG: Statt + wird hier - verwendet, dadurch ist das Ergebnis falsch.
      // Aufgabe 5: Finde die fehlerhafte Zeile mit einem Haltepunkt und korrigiere sie.
      const bruttoPreis = nettoWert - (nettoWert * (mwstInProzent / 100));

      return bruttoPreis;
    }
  </script>
</body>
</html>

Aufgabe 1: Ersten Haltepunkt setzen

Aufgabe:
Öffne eine HTML-Datei mit eingebettetem JavaScript im Browser.
Setze im Quellentool (DevTools → „Sources/Quellen“) einen Codezeilen-Haltepunkt in der Zeile, in der eine Berechnung durchgeführt wird.

Ziel:
Verstehen, wie und wo man einen Haltepunkt setzt.

Aufgabe 2: Codeausführung anhalten und beobachten

Aufgabe:
Setze einen Haltepunkt vor einer console.log()-Anweisung.
Lade die Seite neu und beobachte, ob der Code an dieser Stelle anhält, bevor die Ausgabe erfolgt.

Ziel:
Erkennen, dass Haltepunkte den Code vor der Ausführung stoppen.

Aufgabe 3: Variablen im angehaltenen Zustand prüfen

Aufgabe:
Halte den Code an einem Haltepunkt an und überprüfe im Debugger-Fenster die aktuellen Werte von mindestens zwei Variablen.

Ziel:
Lernen, Variablen während der Laufzeit zu untersuchen.

Aufgabe 4: Haltepunkt verschieben

Aufgabe:
Entferne einen bestehenden Haltepunkt und setze ihn eine Zeile weiter unten im Code neu.
Vergleiche, welche Variablenwerte sich dadurch ändern.

Ziel:
Verstehen, wie sich der Zeitpunkt des Haltepunkts auf den Programmzustand auswirkt.

Aufgabe 5: Sinnvollen Haltepunkt wählen

Aufgabe:
Du hast ein Skript mit mehreren Berechnungen.
Überlege, an welcher Codezeile ein Haltepunkt sinnvoll ist, wenn ein falsches Ergebnis ausgegeben wird, und begründe deine Entscheidung kurz.

Ziel:
Ein Gefühl dafür entwickeln, wo Haltepunkte effizient eingesetzt werden.

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