Javascript debugger – Fehler finden in der Programmlogik

Javascript debuggen

Der Debugger hilft bei Logikfehlern weiter, wenn die Konsole nur beschränkt Auskunft über die Besetzung von Werten in tief verschachtelten Aufrufen geben kann. Wird ein Debugger in den Code eingesetzt, hält das Script an dieser Stelle an und wir können die Werte von Variablen abfragen.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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);