Zum Inhalt springen
aviral gupta
Kontakt aufnehmen

// B1.4 · ca. 30 Min. · Einstieg

Die Konsole und der Debugger

Nach dieser Lektion wählen Sie für jede Meldung die passende console-Methode, finden einen Logikfehler mit beschrifteten Zwischenwerten und halten ein Programm mit debugger oder node inspect an, um seine Werte anzusehen.

Lektion 4 von 5 in B1 Erste Schritte

Danach können Sie

  • console.log, info, warn, error oder table wählen und sagen, ob die Methode auf stdout oder stderr schreibt
  • Einen Logikfehler finden, indem Sie Schritt für Schritt beschriftete Werte ausgeben
  • Ein Programm mit einer debugger-Anweisung anhalten, in den Browser-DevTools und mit node inspect

  1. Aufwärmen · Aufgabe 1 von 7

    Zum Aufwärmen: Welche dieser Methoden schreiben in Node.js auf stderr statt auf stdout? Wählen Sie alle zutreffenden Antworten.

    Wählen Sie alle zutreffenden aus.

  2. Vorhersagen · Aufgabe 2 von 7

    Sagen Sie es vorher, bevor Sie weiterlesen. Das Ergebnis sollte 24 sein, aber das Programm gibt total: 14 aus. Was gibt das erste console.log aus?

    const price = 4;
const count = 3;
const subtotal = price + count;
console.log("subtotal:", subtotal);
const total = subtotal * 2;
console.log("total:", total);

  3. Üben · Aufgabe 3 von 7

    Ergänzen Sie die Methode, damit die Liste als Tabelle gezeichnet wird, mit einer Spalte (index) und einer Spalte Values.

    console.____(["tea", "coffee"]);
    console.(["tea", "coffee"]);

  4. Üben · Aufgabe 4 von 7

    Ordnen Sie jedem Stück Code zu, was es in Node.js tut.

  5. Üben · Aufgabe 5 von 7

    Ein Programm gibt eine falsche Summe aus und keinen Fehler. Bringen Sie die Schritte einer Suche mit Ausgaben in die richtige Reihenfolge.

    1. 1.Erneut ausführen und den ersten falschen Wert suchen
    2. 2.Noch einmal ausführen, dann die zusätzlichen Ausgaben entfernen
    3. 3.Das Programm ausführen und das falsche Ergebnis notieren
    4. 4.Den Wert jedes Schritts mit einer Beschriftung ausgeben
    5. 5.Die Zeile korrigieren, die diesen Wert berechnet

  6. Denksport · Aufgabe 6 von 7

    Knobelaufgabe. Sie führen dies mit node main.js aus, ohne angeschlossenen Debugger. Was gibt es aus, bevor es stoppt?

    console.log("start");
debugger;
console.log("x is", x);
console.log("end");

  7. Anwenden · Aufgabe 7 von 7

    Mini-Aufgabe. Dieses Programm soll den Lohn nach 10 % Steuer für 6 Stunden zu 12 pro Stunde ausgeben (64.8), gibt aber etwas anderes aus: const hours = 6; const rate = 12; const pay = hours + rate; const tax = pay / 10; console.log("after tax:", pay - tax);. Fügen Sie nach jedem Schritt ein beschriftetes console.log ein, finden Sie den ersten falschen Wert, korrigieren Sie diese Zeile und führen Sie es erneut aus.

    Prüfen Sie Ihr Ergebnis anhand dieser Liste

Selbst programmieren

Lesen Sie das ausgearbeitete Beispiel und lösen Sie dann die Übungen. Ihr Code läuft in Ihrem Browser oder auf Ihrem Computer und wird nie hochgeladen.

Ausgearbeitetes Beispiel

Eine Café-Rechnung, verfolgt

Wieder die Café-Rechnung, jetzt mit einer console-Methode für jede Aufgabe. console.info kündigt die Rechnung an, console.table zeigt die Bestellung als Zeilen und Spalten, beschriftete console.log-Zeilen verfolgen jeden Schritt der Summe, und console.warn meldet ein Problem auf stderr, weshalb es in der Ausgabe unten fehlt. Die Bestellung ist eine Liste von Datensätzen: {item: "coffee", …} ist ein Objekt, das Modul B5 behandelt; hier wird es nur ausgegeben.

main.js

// A café bill, with each step traced.
const items = [
  {item: "coffee", price: 3.2, count: 2},
  {item: "cake", price: 4.5, count: 1}
];
console.info("Bill for table", 4);
console.table(items);
const coffees = 3.2 * 2;
console.log("coffees:", coffees);
const total = coffees + 4.5;
console.log("total:", total);
console.warn("(printer: paper low)");

Ausführen mit

node main.js

Ausgabe

Bill for table 4
┌─────────┬──────────┬───────┬───────┐
│ (index) │ item     │ price │ count │
├─────────┼──────────┼───────┼───────┤
│ 0       │ 'coffee' │ 3.2   │ 2     │
│ 1       │ 'cake'   │ 4.5   │ 1     │
└─────────┴──────────┴───────┴───────┘
coffees: 6.4
total: 10.9
  • console.info gibt aus wie console.log, auf stdout.
  • console.table macht eine Zeile pro Eintrag und eine Spalte pro Feld, dazu die Spalte (index).
  • Die Beschriftungen coffees: und total: sagen Ihnen, aus welchem Schritt jede Zahl stammt.
  • console.warn landet auf stderr: Ein Terminal zeigt es an, aber es gehört nicht zur Ausgabe oben.
Ändern und ausführen

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Übungen

Übung 1 von 2

Jede Meldung auf ihrem Strom

Das Programm gibt vier Meldungen aus, alle mit console.log. Behalten Sie alle vier Meldungen, aber ändern Sie die Methoden: Loading the menu ist eine Information (console.info), Tea is sold out eine Warnung (console.warn), Menu items: 3 das Ergebnis (console.log) und Printer not found ein Fehler (console.error). Danach stehen nur noch die erste und die dritte Zeile auf stdout.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    Nur der Methodenname ändert sich: Aus console.log("Tea is sold out") wird console.warn("Tea is sold out").

  2. Hinweis 2

    console.info schreibt auf stdout, wie console.log; console.warn und console.error schreiben auf stderr.

  3. Hinweis 3

    Löschen Sie keine Meldung: Warnung und Fehler erscheinen weiter im Terminal, nur auf stderr.

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

console.info("Loading the menu");
console.warn("Tea is sold out");
console.log("Menu items:", 3);
console.error("Printer not found");
Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

console.log("Loading the menu");
console.log("Tea is sold out");
console.log("Menu items:", 3);
console.log("Printer not found");

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {runMain} from './learnrun.js';

const lines = async () => (await runMain()).trimEnd().split('\n');

test('gibt die Information und das Ergebnis auf stdout aus', async () => {
  const got = await lines();
  assert.deepEqual(got, ['Loading the menu', 'Menu items: 3'], `stdout war ${JSON.stringify(got)}`);
});

test('hält die Warnung von stdout fern', async () => {
  const got = await lines();
  assert.ok(!got.includes('Tea is sold out'), 'Tea is sold out steht noch auf stdout: verwenden Sie console.warn');
});

test('hält den Fehler von stdout fern', async () => {
  const got = await lines();
  assert.ok(!got.includes('Printer not found'), 'Printer not found steht noch auf stdout: verwenden Sie console.error');
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test
learnrun.js herunterladen

Übung 2 von 2

Den Durchschnitt verfolgen

Der Durchschnitt von 70, 80 und 90 sollte 80 sein, aber das Programm gibt Average: 180 aus, ohne Fehler. Speichern Sie die Summe der drei Punktzahlen in einer eigenen Konstante sum und geben Sie sie mit der Beschriftung Sum: aus, sodass das Programm zuerst Sum: 240 ausgibt. Berechnen Sie dann den Durchschnitt aus sum und geben Sie Average: 80 aus.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    Teilen Sie die lange Zeile in zwei: const sum = first + second + third; dann console.log("Sum:", sum);.

  2. Hinweis 2

    Stimmt Sum: 240, steckt der Fehler in der Division: In first + second + third / 3 wird nur third geteilt.

  3. Hinweis 3

    const average = sum / 3; teilt die ganze Summe.

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

const first = 70;
const second = 80;
const third = 90;
const sum = first + second + third;
console.log("Sum:", sum);
const average = sum / 3;
console.log("Average:", average);
Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

const first = 70;
const second = 80;
const third = 90;
const average = first + second + third / 3;
console.log("Average:", average);

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {runMain} from './learnrun.js';

const lines = async () => (await runMain()).trimEnd().split('\n');

test('gibt zuerst die Summe mit Beschriftung aus', async () => {
  const got = await lines();
  assert.equal(got[0], 'Sum: 240', `die erste Zeile ist ${JSON.stringify(got[0])}, erwartet: "Sum: 240"`);
});

test('gibt den richtigen Durchschnitt aus', async () => {
  const got = await lines();
  assert.equal(got[1], 'Average: 80', `die zweite Zeile ist ${JSON.stringify(got[1])}, erwartet: "Average: 80"`);
});

test('gibt genau zwei Zeilen aus', async () => {
  const got = await lines();
  assert.equal(got.length, 2, `das Programm gab ${got.length} Zeile(n) aus, erwartet: 2`);
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test
learnrun.js herunterladen

Häufige Fehler

Ein Tippfehler in einer console-Methode

const items = ["tea", "coffee"];
console.tabel(items);

Was Node.js ausgibt

TypeError: console.tabel is not a function

Warum, und die Lösung

console gibt es, aber es hat keine Methode namens tabel, und etwas aufzurufen, das keine Funktion ist, ist ein TypeError. Prüfen Sie die Schreibweise der Methode: console.table. Dasselbe gilt für console.lg, console.eror und Verwandte.

Einen Namen ausgeben, den es nicht gibt

const subtotal = 5;
console.log("subtotal:", subtotl);

Was Node.js ausgibt

ReferenceError: subtotl is not defined

Warum, und die Lösung

Auch eine Ausgabezeile ist Code: Der Name, den Sie ausgeben, muss genau so geschrieben sein wie bei der Deklaration. Hier stimmt die Beschriftung, aber der Wert ist ein falsch geschriebener Name. Kopieren Sie den Namen aus seiner const- oder let-Zeile.

debugger wie eine Funktion aufrufen

console.log("start");
debugger();
console.log("end");

Was Node.js ausgibt

SyntaxError: Unexpected token '('

Warum, und die Lösung

debugger ist eine Anweisung wie const, keine Funktion: Schreiben Sie debugger; für sich allein. Weil dies ein SyntaxError ist, kann die Datei nicht gelesen werden, und nicht einmal start wird ausgegeben.

JavaScript im Browser: die eigene Engine Ihres Browsers in einem abgeschotteten Worker. Syntaxfehler findet acorn 8.18.0, MIT. Lizenz und Quellcode

Abschlussquiz

5 Fragen, ohne Hinweise. Ab 80 % ist die Lektion abgeschlossen.

Erledigen Sie zuerst alle Aufgaben oben, um das Abschlussquiz freizuschalten.

Problem melden

Etwas ist falsch oder unklar? Beschreiben Sie es kurz, dann wird es geprüft und korrigiert.

#

Mindestens 20 Zeichen.

Nur, wenn Sie eine Antwort wünschen.

Kernideen

Fünf console-Methoden, zwei Ströme

console.log schreibt auf stdout, die normale Ausgabe des Programms. In Node.js sind console.info und console.debug andere Namen für console.log, und console.warn ist ein anderer Name für console.error: Diese beiden schreiben auf stderr, den Kanal für Meldungen über das Programm statt seiner Ergebnisse. Eine Browser-Konsole zeigt alle in einer Liste, nach Stufe gestaltet, und lässt Sie nach Stufe filtern. console.table(liste) zeichnet ein Array als Zeilen und Spalten, mit einer Spalte (index); bei einer Liste von Datensätzen wird jedes Feld eine Spalte. Die Prüfungen auf dieser Seite lesen nur stdout.

Beschriftete Werte ausgeben, um einen Logikfehler zu finden

Ein Logikfehler meldet nichts, er liefert nur ein falsches Ergebnis. Um ihn zu finden, geben Sie nach jedem Schritt den Wert mit einer Beschriftung aus, etwa console.log("subtotal:", subtotal), führen das Programm erneut aus und vergleichen jede Zeile mit dem, was Sie von Hand ausgerechnet haben. Die erste Zeile, die abweicht, zeigt auf den Code direkt darüber. Beschriftungen zählen: Eine Spalte nackter Zahlen lässt sich schwer dem Code zuordnen. Korrigieren Sie diese Zeile und führen Sie erneut aus. Löschen Sie dann die zusätzlichen Ausgaben oder behalten Sie sie für später, wie MDNs Anleitung zur Fehlersuche vorschlägt.

Anhalten statt ausgeben: debugger

Die Anweisung debugger; bittet einen Debugger, dort anzuhalten. Sind die Browser-DevTools geöffnet, stoppt die Seite an dieser Zeile, wie an einem Haltepunkt, und Sie können den Wert jeder Variablen lesen, bevor es weitergeht. Ist kein Debugger angeschlossen, wie bei einfachem node main.js oder im Editor auf dieser Seite, bewirkt debugger; nichts. Im Terminal startet node inspect main.js den Debugger von Node: Er hält an der ersten Zeile, die läuft, cont (c) läuft bis zum nächsten Haltepunkt weiter, next (n) führt eine Zeile weiter aus, und p total gibt den Wert von total aus.

Quellen

Zuletzt geprüft am 30. September 2026