Javascript Console: Testen und Fehlersuche

Javascript Debugger – Fehlersuche in der Console

Das Ändern von Webseiten mit Javascript ist ein Blindflug durch das HTML-Markup. Während Javascript HTML-Elemente eingefügt, verändert und löscht, bleibt das Markup der Seite unverändert.

Die Console unter den Entwickler-Tools der Browser zeigt detaillierte Informationen über den aktuellen Aufbau des DOMs und welchen Wert eine Variable momentan speichert.

Denn so ist das nun einmal: Die meisten Zeit beim Programmieren verbringen wir mit der Suche nach Fehlern.

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.

Consolen-Befehle

Mit direkten Aufrufen über den Element-Namen erreicht die Console jedes Element des DOMs und listet die Knoten unterhalb des Elements. Also einfach document in die Consolen-Zeile tippen, Return und …

Informationen zum HTML, CSS und Javascript in der Konsole des Browsers (hier Chrome)

… 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.

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().

Javascript Debugger

Als Debuggen bezeichnet man die Suche, Analyse und Korrektur von Logikfehlern. Bei komplexen Scripten wird die Consolen-Ausgabe unübersichtlich und schwer nachvollziehbar. Stattdessen setzt man Breakpoints. 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 angehalten wird, um Werte von Variablen in der console abzufragen und versuchsweise zu setzen.

Zusammen mit der Console ist auch ein 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.

Safari Konsole / Console: Debugger nutzen, use debugger

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. Mit einem modernen Browser wird der Javascript-Debugger frei Haus geliefert.

Elements Network Sources Console Schau mal tief in die Console deines Browsers document #document <!DOCTYPE html><html lang="de"> <head>…<head> <body>...</body></html> Safari Konsole / Console: Debugger nutzen, use debugger ElementeNetzwerkRessourcenTimelinesSpeicherKonsoleDebuggerSuchenGrund für AnhaltenDebugger-StatementAufruf-StackScriptssimple-lightbox.htmlmyImage.style.width = myImage.naturalWidth + 'px';myImage.style.height = myImage.naturalHeight + 'px';}if (window.innerHeight < myImage.height) {myImage.height = window.innerHeight;myImage.width = myImage.height * (myImage.naturalWidth / myImage.naturalHeight);}debugger;var difX = (window.innerWidth - myImage.width) / 2;let difY = (window.innerHeight - myImage.height) / 2;565758596061626364656667KonsolemyImage.width618 = $1