Consolen-Befehle mit den Entwicklertools
Es gibt also zwei grundsätzliche Wege, mit der Console zu arbeiten: Entweder durch console.log ()-Anweisungen innerhalb des JavaScripts-Codes oder direkt in der Console der Browser. Die Consolen der Browser – ob Chrome oder Firefox, Safari oder IE – unterscheiden sich nur marginal.
console.log ("Hier läuft mal wieder alles den Bach runter");
Window.console ist eine Eigenschaft des Window-Objekts, aber der Window-Präfix kann wegfallen.
Mit direkten Aufrufen über den Element-Namen erreicht die Console jedes Element des DOM und listet die Knoten unterhalb des Elements. Also einfach document in die Consolen-Zeile tippen, Return und …
… und schon haben wir einen Schnappschuss der aktuellen Struktur des DOMs, übersichtlicht unter den aufklappbaren Dreiecken verpackt.
| document | Listet das aktuelle Dom |
|---|---|
| document.body | direkt zum body-Element der App |
| document.head | direkt zum head-Element der App |
| document.body.childNodes | spielt alle childNodes von body als Array ein. Die Array-Notation erreicht dann jedes Element über den Index. |
| document.body.childNodes[5] | Array-Notation: Das siebte childNode von body |
| dir (document.body.childNodes) | Alternative Darstellung des Arrays aller childNodes von body als vertikale Liste |
| document.getElementById('main') | Normale Javascript-Anweisungen erreichen jedes individuelle Element direkt |
| document.querySelector('main') | Element über den querySelector herausfischen |
| $('#main') | … das ist kein jQuery, sondern ein Kürzel der Konsole |
Die Konsole arbeitet mit Auto-Complete – einen Punkt hinter das Element setzen und schon spielt die Konsole alle Befehle ein, die an dieser Stelle Sinn machen.
Pfeil rauf, Pfeil runter scrollt durch die History und wiederholt Befehle.
Farbe für die Konsolen-Ausgabe
Wenn die Ausgabe lang und unübersichtlich wird, hilft ein Schuss Farbe … sozusagen das CSS für die Console.
console.log('%c Schon wieder im falschen if-Zweig! ', 'background: red; color: #eee');
Schon wieder im falschen if-Zweig!
Wenn vor einem Argument der Konsole ein %c sitzt, wird das folgende Argument als CSS der Konsolenzeile benutzt.
console.log ( "Alles noch normal %c Aber jetzt wird's gelb",
"background: yellow");
Alles noch normal Aber jetzt wird's gelb
Events in der Console abfangen
monitorEvents registriert ein Event in der Console.
>monitorEvents(document.getElementById('testClick'),'click')
undefined
liefert zuerst nichts als 'undefined'. Erst wenn der Benutzer auf das Element testClick clickt, zeigt die Konsole das Event an.
Die direkte Kommunikation zwischen der Chrome bzw. Safari-Konsole und dem Script läuft über Anweisungen wie console.log() und console.warn().
mehr als console.log
Neben console.log hat die Console weitere Methoden auf Lager – welche das sind, findet man mit dem Anfang console. in der Console heraus.
console.table
Arrays mit console.table listen – elegant und übersichtlich.
const cities = [ ["Berlin", 3664088, "🍰"], ["Hamburg", 1852478, "🍹"], ["Dresden", 556227, "🍩"], ["Aachen", 248878, "🍓"], ["Krefeld", 226844, "🍄"] ]; console.table (cities);
| (index) | 0 | 1 | 2 |
|---|---|---|---|
| 0 | "Berlin" | 3664088 | "🍰" |
| 1 | "Hamburg" | 1852478 | "🍹" |
| 2 | "Dresden" | 556227 | "🍩"" |
| 3 | "Aachen" | 248878 | "🍓" |
| 4 | "Krefeld" | 226844 | "🍄" |
Javascript Debugger
Debuggen ist das Werkzeug für die Suche, Analyse und Korrektur von Logikfehlern. Bei komplexen Scripten wird die Consolen-Ausgabe unübersichtlich und schwer nachvollziehbar. Stattdessen unterbrechen Breakpoints den Ablauf und zeigen aktuelle Werte von Variablen. Webdesigner kennen den Begriff breakpoint: Bei bestimmten Eigenschaften des Monitors wird das CSS an die Größe des Ausgabegeräts angepasst. In der Programmierung sind Beakpoints Punkte, an denen das Script anhält, um Werte von Variablen in der Konsole abzufragen oder versuchsweise zu setzen.
Zusammen mit der Console ist auch ein Javascript Debugger in die modernen Browser eingezogen. Das Schlüsselwort debugger; unterbricht die Ausführung des Scripts und ruft die Debugger-Funktion des Browsers auf. Wenn der Browser keine Debugger zur Verfügung stellt, hat der Aufruf debugger keine Wirkung.
Am Breakpoint lassen sich die aktuellen Werte von Variablen prüfen oder Werte zuweisen. Danach kann das Script fortgesetzt oder Schritt für Schritt weiter ausgeführt werden.
In den meisten Programmiersprachen muss eine spezielle Anwendung zum Debuggen des Programms installiert werden. Die modernen Browser liefern den Javascript-Debugger frei Haus.