Die Browser-Konsole verwenden

Was ist die Browser-Konsole?

Die Browser-Konsole ist ein Bereich in den Entwicklerwerkzeugen deines Browsers. Dort kannst du JavaScript direkt ausprobieren, Ausgaben lesen und Fehlermeldungen untersuchen.

Stell sie dir wie ein kleines Testfeld für JavaScript vor:

Das ist besonders praktisch, wenn du gerade lernst. Du musst nicht für jeden kleinen Versuch eine komplette HTML-Datei anlegen.

Wichtig: Die Konsole ist vor allem ein Werkzeug zum Ausprobieren und Fehlersuchen. JavaScript-Code für deine Webseite schreibst du später normalerweise in eine JavaScript-Datei oder in ein <script>-Element.

Entwicklerwerkzeuge öffnen

Die Konsole ist Teil der Entwicklerwerkzeuge. Fast alle modernen Browser besitzen sie, zum Beispiel Chrome, Edge, Firefox und Safari.

Tastenkürzel

Betriebssystem Entwicklerwerkzeuge öffnen
Windows / Linux F12 oder Strg + Umschalt + I
macOS Cmd + Option + I

Danach erscheint meist ein Bereich rechts neben oder unter der Webseite.

Wähle dort den Tab Console oder Konsole aus.

Je nach Browser kann die Sprache der Entwicklerwerkzeuge Englisch sein. Suche dann nach dem Begriff Console.

Über das Browser-Menü

Falls ein Tastenkürzel nicht funktioniert, kannst du die Entwicklerwerkzeuge auch über das Menü öffnen:

  1. Öffne eine beliebige Webseite.
  2. Klicke mit der rechten Maustaste auf einen freien Bereich der Seite.
  3. Wähle Untersuchen, Element untersuchen oder Inspect.
  4. Klicke auf den Bereich Console.

Deinen ersten Befehl eingeben

Am unteren Rand der Konsole findest du meist eine Zeile mit einem Zeichen wie > oder >>. Das ist die Eingabezeile.

Klicke in diese Zeile, schreibe folgenden Ausdruck und drücke die Eingabetaste:

2 + 3

Die Konsole zeigt direkt das Ergebnis:

5

Du hast gerade JavaScript im Browser ausgeführt. Der Ausdruck 2 + 3 wird berechnet, und das Ergebnis erscheint darunter.

Probiere weitere Rechnungen aus:

10 * 4

20 / 5

8 - 11

JavaScript kann also unter anderem als Taschenrechner verwendet werden. Natürlich kann die Sprache viel mehr — aber dieses unmittelbare Ausprobieren bleibt auch bei komplexeren Aufgaben sehr hilfreich.

Mit Texten arbeiten

Du kannst in der Konsole auch Texte eingeben. In JavaScript müssen Texte in Anführungszeichen stehen:

"Hallo JavaScript"

Nach dem Drücken der Eingabetaste zeigt die Konsole den Text an.

Auch einfache Textverknüpfungen funktionieren:

"Hallo " + "Welt"

Das Ergebnis lautet:

"Hallo Welt"

Der Operator + kann bei Texten also zwei Texte zusammensetzen. Solche Texte werden in JavaScript später Strings genannt.

Schreibe Text immer mit passenden Anführungszeichen: entweder "..." oder '...'. Öffnest du einen Text mit einem Anführungszeichen, musst du ihn auch mit derselben Art schließen.

Befehle ausführen und Ergebnisse lesen

Wenn du etwas in die Konsole eingibst, passieren zwei Dinge:

  1. JavaScript versucht, deinen Code auszuführen.
  2. Die Konsole zeigt ein Ergebnis, eine Ausgabe oder einen Fehler.

Ein erfolgreicher Versuch könnte so aussehen:

"Mein Alter: " + 20

Die Konsole gibt dann etwa Folgendes zurück:

"Mein Alter: 20"

Das Ergebnis steht üblicherweise direkt unter deinem eingegebenen Befehl.

Mehrzeiligen Code schreiben

Kurze Befehle kannst du direkt mit der Eingabetaste ausführen. Für mehrere Zeilen gilt in vielen Browsern:

Das brauchst du später beispielsweise bei Bedingungen oder Funktionen. Am Anfang reichen jedoch einzelne Zeilen völlig aus.

Frühere Befehle wiederverwenden

Mit den Pfeiltasten ↑ und ↓ kannst du durch bereits eingegebene Befehle blättern.

Das ist nützlich, wenn du einen Befehl leicht verändern möchtest. Du musst ihn dann nicht vollständig neu schreiben.

Beispiel:

  1. Gib diesen Befehl ein:

    5 * 5

  2. Drücke die Pfeiltaste ↑.

  3. Ändere den Befehl zu:

    5 * 10

  4. Drücke erneut Enter.

So kannst du schnell Varianten ausprobieren.

Fehlermeldungen verstehen

Fehler gehören zum Programmieren dazu. Die Konsole hilft dir, sie zu entdecken.

Gib zum Beispiel diesen unvollständigen Text ein:

"Hallo

JavaScript kann nicht erkennen, wo der Text endet. Deshalb erscheint eine Fehlermeldung, oft rot markiert.

Oder probiere diesen Namen aus:

meinName

Wenn meinName noch nicht definiert wurde, meldet JavaScript in etwa:

Uncaught ReferenceError: meinName is not defined

Diese Meldung bedeutet: JavaScript kennt den Namen meinName noch nicht.

Fehlermeldungen lesen

Eine Fehlermeldung wirkt am Anfang oft kompliziert. Suche zunächst nach diesen Informationen:

Du musst nicht jede Meldung sofort vollständig verstehen. Wichtig ist, dass du erkennst: Hier ist etwas schiefgegangen — und die Konsole liefert Hinweise.

Merke: Eine rote Meldung ist kein Grund zur Sorge. Sie ist eine hilfreiche Rückmeldung des Browsers.

Die Konsole leeren

Nach mehreren Versuchen kann die Konsole schnell unübersichtlich werden. Du kannst ihre bisherigen Inhalte löschen.

Dafür gibt es meist ein Symbol mit einem durchgestrichenen Kreis oder Mülleimer. Häufig funktioniert auch dieses Tastenkürzel:

Betriebssystem Konsole leeren
Windows / Linux Strg + L
macOS Cmd + K

Das Leeren entfernt nur die sichtbaren Meldungen aus der Konsole. Es verändert nicht deine Webseite und löscht keinen Code aus deinen Dateien.

Konsole und Webseite gehören zusammen

Die Konsole arbeitet immer im Zusammenhang mit der gerade geöffneten Webseite.

Wenn du beispielsweise die Konsole auf einer Suchmaschine öffnest und dort JavaScript eingibst, wird der Code in dieser geöffneten Seite ausgeführt. Öffnest du anschließend deine eigene HTML-Datei, gehört die Konsole zu deiner eigenen Seite.

Das ist später wichtig, wenn du Fehler in deinem Projekt suchst:

  1. Öffne deine HTML-Datei im Browser.
  2. Öffne die Entwicklerwerkzeuge.
  3. Wechsle zur Konsole.
  4. Lade die Seite bei Bedarf neu.
  5. Prüfe, ob Meldungen oder Fehler erscheinen.

Seite neu laden

Wenn du Änderungen an einer HTML- oder JavaScript-Datei gespeichert hast, musst du die Webseite normalerweise neu laden. Nutze dafür:

Danach zeigt die Konsole die Meldungen der neu geladenen Seite an.

Ein sinnvoller Arbeitsablauf

Beim Lernen kannst du die Konsole auf zwei Arten verwenden:

Zum Ausprobieren

Du möchtest wissen, was ein kurzer JavaScript-Ausdruck macht:

7 > 3

"Rot" + "Blau"

Gib ihn direkt in die Konsole ein und sieh dir das Ergebnis an.

Zum Fehlersuchen

Du hast JavaScript in deine Webseite eingebunden, aber etwas funktioniert nicht wie erwartet:

  1. Öffne deine Seite im Browser.
  2. Öffne die Konsole.
  3. Suche nach roten Fehlermeldungen.
  4. Lies die genannte Datei und Zeilennummer.
  5. Korrigiere den Code und lade die Seite neu.

Diese Gewohnheit spart dir später viel Zeit.

Häufige Anfängerfehler

Die Konsole zeigt nichts Neues an

Prüfe, ob du wirklich die Eingabetaste gedrückt hast. Achte außerdem darauf, dass der Cursor in der Eingabezeile der Konsole steht.

Die Eingabe ist rot markiert

Oft fehlt ein Anführungszeichen, eine Klammer oder ein anderes Zeichen. Vergleiche Anfang und Ende deines Befehls sorgfältig.

Zum Beispiel ist dieser Text korrekt:

"Ich lerne JavaScript"

Dieser Text ist nicht korrekt:

"Ich lerne JavaScript

Ich sehe eine rote Fehlermeldung, obwohl ich nichts eingegeben habe

Nicht jede Meldung stammt zwingend von deinem Code. Manche Webseiten, Browser-Erweiterungen oder eingebundenen Dienste erzeugen selbst Meldungen.

Wenn du an deiner eigenen Übungsdatei arbeitest, sind Fehlermeldungen aber oft ein wichtiger Hinweis auf einen Fehler in deinem JavaScript.

Ich habe die Konsole geschlossen

Kein Problem. Öffne die Entwicklerwerkzeuge einfach erneut mit F12 oder Strg + Umschalt + I.

Übung: Die Konsole erkunden

Öffne die Konsole in deinem Browser und führe diese Eingaben nacheinander aus:

4 + 6

12 * 3

"Java" + "Script"

100 / 4

Beantworte anschließend diese Fragen:

  1. Welches Ergebnis liefert 4 + 6?
  2. Was passiert bei "Java" + "Script"?
  3. Welche Fehlermeldung erscheint, wenn du einen unbekannten Namen wie lieblingsFarbe eingibst?
  4. Wie kannst du einen früheren Befehl erneut anzeigen?

Lösungen

  1. Das Ergebnis ist 10.
  2. Die beiden Texte werden zu "JavaScript" verbunden.
  3. Meist erscheint ein ReferenceError, weil der Name noch nicht definiert wurde.
  4. Mit der Pfeiltaste ↑ kannst du zu vorherigen Eingaben zurückkehren.

Das Wichtigste auf einen Blick

Im nächsten Schritt lernst du, wie du mit console.log() gezielt eigene Nachrichten aus deinem JavaScript-Code in der Konsole ausgibst.

Revision #1
Created 2026-07-24 13:44:14 UTC by art10m
Updated 2026-07-24 13:44:15 UTC by art10m