Javascript debugger – Fehler finden in der Programmlogik

Javascript debuggen

Der Debugger hilft bei Logikfehlern und unerwartetem Verhalten des Programms weiter, wenn die Konsole nur beschränkt Auskunft über die Besetzung von Variablen in tief verschachtelten Aufrufen geben kann. Breakpoints unterbrechen die Ausführung an bestimmten Stellen, um die Werte von Variablen abzufragen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

JavaScript Debugger

Mit wachsender Komplexität wird die Suche nach Fehlern – Bugs – immer aufwändiger. Bei Syntaxfehlern hilft die Konsole, aber die Ursache von Logikfehler und ein unerwartetes Verhalten nehmen viel Zeit in Anspruch.

Debugging ist die Verfolgung von Datenflüssen im Programm und Debugger sind Werkzeuge, die bei der Suche nach Fehlern helfen. Die modernen Browser haben Debugger bereits eingebaut. Breakpoints – Unterbrechungen des Programmablaufs – verfolgen den Programmablauf und erlauben den Einblick in die aktuellen Werte von Variablen.

Breakpoint setzen

Breakpoints sind Stellen im Script, an denen wir Werte von Variablen sehen oder den Ablauf beim Aufruf von Funktionen nachvollziehen möchten. Die einfachste Methode: Einfach einen Breakpoint an die Stelle im Scriptcode setzen, hier z.B. beim Aufruf einer Funktion. Ein Klick auf die Zeilennummer:

debug-breakpoint in Safari
Breakpoint setzen in Safari

Die aufwändigen Ausgaben der Browser-Console sind gespart, die Werte der Parameter der Funktion werden in der Konsole direkt angezeigt, sobald der Breakpoint bei der Ausführung erreicht ist. An dieser Stelle hält das Script an.

debug-stepweise-schrittweise
Script nach Breakpoint schrittweise weiter ausführen.

Daneben zeigt die Console den Grund für Anhalten sowie den Aufruf-Stack (die aufgerufenen Funktionen) und eröffnet die Möglichkeit, die Ausführung wieder aufzunehmen oder die Anweisungen Schritt für Schritt auszuführen.

Scope und Stack

Unter Scrope zeigt die Console alle aktuellen Variablen und ihre Werte an.

Debuggen mit if-Abfrage

Der Debugger kann wie die Console mit einer if-Anweisung direkt im Scriptcode geschaltet werden.

if (color.length > 10) {    
	debugger;
}

Bei komplexen Objekten zeigt console.table eine tabellarische Übersicht

let books = [
	{ "author": "Jared Diamond", "title": "Arm und Reich", "pages": 980 },
	{ "author" : "Barbara Tuchman", "title": "Der ferne Spiegel", "pages": 1020 },
	{ "author" : "Frank Schätzing", "title": "Das unbekannte Universum", "pages": 1143 }
];

console.table (books);
console-table
Safari-Console, aber natürlich auch Chrome und Firefox

Pretty Print: Minified Scriptcode auspacken

Fehler in einer Library – aber wo? Wenn das Script der Library minifiziert ist, ist es nicht ohne Weiteres lesbar. Das minifizierte Script schön eingerückt mit Zeilenumbrüchen anzeigen:

debug-prettyfy
pretty print in Chrome: auf die geschweiften Klammern unten links klicken
debug-pretty-print
In Safari: Informationen > Quellen – Minifizierte Scripte werden automatisch unminifiziert angezeigt

Breakpoint beim Aufruf einer Funktion

debug (myFunction);