1.6 Debugging-Tools
So wie nahezu jeder Browserhersteller eine eigene JavaScript-Laufzeitumgebung verwendet, gibt es auch für jeden Browser ein eigenes Debugging-Tool. Sollten Sie dagegen eine serverseitige JavaScript-Anwendung debuggen wollen, bietet sich unter Node.js für ältere Versionen das Modul node-inspector an, für Node.js-Versionen seit 6.3 der integrierte Node.js Inspector. Alternativ dazu bieten natürlich wie im vorigen Abschnitt erwähnt viele der Entwicklungsumgebungen und Editoren Debugging-Tools an.
Bevor wir uns jedoch diesen Debugging-Tools zuwenden, möchte ich Ihnen kurz noch einen Weg vorstellen, über den Sie simple Ausgaben auf die Konsole schreiben können – in den meisten Fällen zwar nicht die beste Art zu debuggen, aber trotzdem oft sehr hilfreich. Die Rede ist von dem Objekt console, das sowohl in den Laufzeitumgebungen der verschiedenen Browser als auch unter Node.js zur Verfügung steht (unter Google Chrome öffnen Sie die Entwicklerkonsole beispielsweise über Anzeigen • Entwickler • Entwicklertools bzw. Anzeigen • Entwickler • JavaScript-Konsole).
1.6.1 Das »console«-Objekt
Beim console-Objekt handelt es sich um ein Objekt, das erstmals durch das Firefox-Plugin Firebug eingeführt wurde und mit dem es möglich ist, auf die Standardausgabe zu schreiben. Mittlerweile steht das console-Objekt (obwohl immer noch nicht im Standard enthalten) in nahezu jeder JavaScript-Laufzeitumgebung zur Verfügung.
Die einzelnen Methoden, die das Objekt zur Verfügung stellt, unterscheiden sich jedoch von Laufzeitumgebung zu Laufzeitumgebung. Um dem entgegenzuwirken, gibt es daher bereits Bestrebungen, die API zu standardisieren. Immer unterstützt wird aber die Methode log(), mit der Sie eine einfache Konsolenausgabe erzeugen:
console.log('Hallo Welt');
Tabelle 1.2 gibt eine Übersicht über die Methoden, die von jeder Laufzeitumgebung unterstützt werden, die das console-Objekt bereitstellt.
| clear() | Leert die Konsole. |
| debug() | Erwartet ein oder mehrere Objekte und gibt diese auf der Konsole aus. |
| error() | Erwartet wie debug() ein oder mehrere Objekte und gibt diese als Fehler auf der Konsole aus. In Browsern wird innerhalb der Konsole oft ein Fehler-Icon neben der ausgegebenen Meldung dargestellt sowie der Fehler-Stack ausgegeben. |
| info() | Hiermit werden die übergebenen Objekte als Info-Meldung auf die Konsole ausgegeben. Chrome beispielsweise gibt zusätzlich ein Info-Icon mit aus. |
| log() | Die wohl am häufigsten verwendete Methode von console. Loggt die übergebenen Objekte auf die Konsole. |
| trace() | Gibt den Stack-Trace, also den Methodenaufruf-Stack, auf die Konsole aus. |
| warn() | Gibt die übergebenen Objekte als Warnung auf die Konsole aus. Auch hier wird in den meisten Browsern ein entsprechendes Icon neben der Meldung ausgegeben. |
Tabelle 1.2 Standardmethoden des »console«-Objekts
Ein besonderes nettes Feature der log()-Methode ist die Möglichkeit, innerhalb des übergebenen Strings mit Platzhaltern zu arbeiten. Enthält ein String solche Platzhalter, werden die nachfolgenden Parameter bei der Ausgabe als Werte für die Platzhalter eingesetzt. Beispielsweise erzeugt der Aufruf
console.log('%s: %d', 'Ergebnis', 2.4);
die Ausgabe Ergebnis: 2.4.
Auf diese Weise lassen sich ebenfalls komplette Objekte in die Meldung einbauen, nämlich einfach, indem Sie den Platzhalter %j verwenden. Folgendes Programm erzeugt beispielsweise die Ausgabe {"name":"Max","nachname":"Mustermann"}:
const person = {
firstName: 'Max',
lastName: 'Mustermann'
}
console.log('%j', person);
Allerdings funktioniert die Ausgabe von Objekten nur unter Node.js. Eine Methode, die eine ähnliche Ausgabe erzeugt, ist die Methode dir().
Hinzu kommen weitere Methoden für die formatierte Ausgabe, wie beispielsweise dirxml(), die XML- oder HTML-(Unter-)Bäume auf die Konsole ausgibt, group(), groupCollapsed() und groupEnd(), die Konsolenausgaben gruppieren, und table(), die Daten in Tabellenform ausgibt.
Aber wie gesagt: Nicht alle Laufzeitumgebungen bieten alle Methoden an. Eine Übersicht, welche Methoden zur Verfügung stehen, finden Sie auf den Dokumentationsseiten der jeweiligen Laufzeitumgebung: für Chrome (https://developer.chrome. com/devtools/docs/console-api), Firefox (https://developer.mozilla.org/en-US/docs/Web/API/console), Node.js (http://nodejs.org/api/). Einen guten Überblick gibt außerdem Axel Rauschmayer in seinem Blog unter http://www.2ality.com/2013/10/console-api.html.
1.6.2 Browser
In jedem der bekannten Browser gibt es mittlerweile ein Debugging-Tool, wobei sich die einzelnen Tools voneinander nur wenig unterscheiden. In jedem der Tools ist es beispielsweise möglich, verschiedene Arten von Breakpoints zu setzen (in dem einen Tool mehr, in dem anderen weniger), den Methoden-Stack zu begutachten, die aktuelle Variablenbelegung einzusehen, Variablen zu verändern, schrittweise im Programm weiterzugehen etc.
Firefox Developer Tools
Welches Tool Sie verwenden, hängt also eher davon ab, für welchen Browser Sie entwickeln. Eines der wohl bekannteren Debugging-Tools ist der Debugger der Firefox Developer Tools (bis 2017 unter dem Namen Firebug entwickelt). Damit können verschiedene Aspekte bei der Webentwicklung überprüft werden, so auch die Ausführung von JavaScript-Code (siehe Abbildung 1.7).
Der Debugger (https://getfirebug.com), erlaubt Ihnen einzelne Breakpoints zu setzen und ausgehend davon schrittweise im JavaScript-Code zu navigieren. Einem Breakpoint können Sie dabei eine boolesche Bedingung zuweisen (Conditional Breakpoints), die angibt, in welchen Fällen an dem jeweiligen Breakpoint angehalten werden soll. Alternativ können Sie pauschal den Debugger immer dann pausieren lassen, wenn ein Fehler auftritt.
Zu den weiteren Features zählen Zugriff auf den Stack-Trace, Watch Expressions (über die es möglich ist, bestimmte Ausdrücke zu beobachten) sowie diverse Profiling-Optionen. Ebenfalls praktisch: Über die eingebaute Konsole lässt sich JavaScript direkt im Kontext der jeweiligen Anwendung ausführen.
Abbildung 1.7 Firefox Firebug
Chrome Developer Tools
Die Chrome Developer Tools (CDT) (https://developers.google.com/chrome-developer-tools/docs/javascript-debugging) zählen unter JavaScript-Entwicklern wohl zu den beliebtesten Debugging-Tools (siehe Abbildung 1.8). Ähnlich wie in Firebug lassen sich auch unter CDT Breakpoints setzen. Neben Breakpoints, die Exceptions abfangen, gibt es dort aber zusätzlich die Möglichkeit, DOM-Breakpoints oder XHR-Breakpoints zu setzen, wodurch das jeweilige Programm bei DOM-Manipulationen oder bei Aufrufen über das XHR-Objekt zum Halten kommt.
Mittlerweile ist es sogar möglich, den Quelltext eines...
