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:
Du schreibst einen Befehl.
Der Browser führt ihn sofort aus.
Du siehst direkt ein Ergebnis oder eine Fehlermeldung.
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:
Öffne eine beliebige Webseite.
Klicke mit der rechten Maustaste auf einen freien Bereich der Seite.
Wähle Untersuchen, Element untersuchen oder Inspect.
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:
JavaScript versucht, deinen Code auszuführen.
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:
Umschalt + 
Enter erzeugt eine neue Zeile.
Enter führt den fertigen Code aus.
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:
Gib diesen Befehl ein:
5 * 5
Drücke die Pfeiltaste 
↑.
Ändere den Befehl zu:
5 * 10
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:
Art des Fehlers: zum Beispiel 
SyntaxError oder 
ReferenceError
Beschreibung: Was genau ist nicht in Ordnung?
Zeile: Wo ist der Fehler aufgetreten?
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:
Öffne deine HTML-Datei im Browser.
Öffne die Entwicklerwerkzeuge.
Wechsle zur Konsole.
Lade die Seite bei Bedarf neu.
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:
den Aktualisieren-Button im Browser,
F5 unter Windows/Linux,
Cmd + 
R unter macOS.
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:
Öffne deine Seite im Browser.
Öffne die Konsole.
Suche nach roten Fehlermeldungen.
Lies die genannte Datei und Zeilennummer.
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:
Welches Ergebnis liefert 
4 + 6?
Was passiert bei 
"Java" + "Script"?
Welche Fehlermeldung erscheint, wenn du einen unbekannten Namen wie 
lieblingsFarbe eingibst?
Wie kannst du einen früheren Befehl erneut anzeigen?
Lösungen
Das Ergebnis ist 
10.
Die beiden Texte werden zu 
"JavaScript" verbunden.
Meist erscheint ein 
ReferenceError, weil der Name noch nicht definiert wurde.
Mit der Pfeiltaste 
↑ kannst du zu vorherigen Eingaben zurückkehren.
Das Wichtigste auf einen Blick
Die Browser-Konsole gehört zu den Entwicklerwerkzeugen.
Du kannst dort JavaScript direkt ausführen und Ergebnisse sofort sehen.
Mit 
F12 oder 
Strg + 
Umschalt + 
I öffnest du meist die Entwicklerwerkzeuge.
Rote Fehlermeldungen helfen dir beim Finden von Fehlern.
Die Konsole ist ein ideales Werkzeug, um kurze Ideen schnell auszuprobieren.
Im nächsten Schritt lernst du, wie du mit 
console.log() gezielt eigene Nachrichten aus deinem JavaScript-Code in der Konsole ausgibst.