© saicle/Shutterstock.com
JavaScript-Applikationen mit Developer Tools debuggen und profilen

Des Browsers Trickkiste


Jeder Webentwickler kennt sie und doch nutzen nur wenige ihre Fähigkeiten. Die Rede ist von den Entwicklertools, die von den Webbrowsern zur Verfügung gestellt werden. Dieser Artikel soll Ihnen diese Sammlung äußerst mächtiger Werkzeuge näherbringen, können sie doch Großes leisten, wenn es um das Auffinden von Fehlern oder Performanceengpässen geht.

Die gute Nachricht zuerst: Solange Sie nicht auf einem Internet Explorer 6 arbeiten müssen, können Sie auf nahezu jedem gängigen Browser auf einen ähnlich umfangreichen Satz von Entwicklerwerkzeugen zurückgreifen. Im Zuge dieses Artikels stelle ich Ihnen stellvertretend die Chrome Developer Tools vor. Die Funktionalität finden Sie allerdings auch in ähnlicher Form in Firefox oder im Internet Explorer. Für die Details zu den jeweiligen Features möchte ich Sie allerdings auf die Dokumentation Ihres Browsers verweisen.

Damit Sie Ihre Entwicklungswerkzeuge benutzen können, müssen Sie diese zunächst öffnen. Was erst einmal offensichtlich klingt, ist vor allem bei der Benutzung des Debuggers manchmal ein Stolperstein. Haben Sie Ihre Entwicklertools nicht geöffnet, reagiert der Debugger auch nicht auf Anweisungen – doch dazu später mehr.

Die Entwicklertools erreichen Sie je nach Browser und System entweder über Menüpunkte des Browsers oder über bestimmte Tastenkombinationen, was sich vor allem bei häufiger Verwendung der Developer Tools als sehr praktisch erweist. Bevor Sie mehr über die wirklich wertvollen Funktionen Ihres Browsers erfahren, lernen Sie zunächst einen alten Bekannten näher kennen: die Browserkonsole und das zugehörige console-Objekt.

Oft unterschätzt: das „console“-Objekt

Die Zeiten, als man zum Debuggen einer Applikation noch die confirm- und alert-Funktionen des Browsers benutzt hat, sind schon lange vorbei. Verfügen die Browser doch mittlerweile über ein Objekt mit dem Namen con­sole, das Ihnen den Zugriff auf die Browserkonsole erlaubt.

Die Browserkonsole ist nichts anderes als eine Schnittstelle in die aktuelle Laufzeitumgebung Ihrer Applikation. Hier können Sie jedes gültige JavaScript-Kommando absetzen und so direkt mit Ihrer Applikation interagieren. Sie können beispielsweise Variablen manipulieren oder Funktionen aufrufen. Sie müssen allerdings beachten, dass es sich dabei um die aktuelle Umgebung handelt, Sie können dadurch also die Zeit weder vor- noch zurückspulen. Um die Umgebung zu einem bestimmten Zeitpunkt im Leben Ihrer Applikation zu erhalten, müssen Sie den Debugger verwenden.

Neben der Möglichkeit, JavaScript auf der Konsole zu programmieren, können Sie über das console-Objekt, das Ihnen Ihr Browser als Hostobjekt – also als von der Umgebung abhängiges Objekt – zur Verfügung stellt, auch Ausgaben auf der Konsole erzeugen.

Einfache Ausgaben generieren Sie über die log-Methode des console-Objekts. Diese Methode akzeptiert beliebig viele Argumente, die als Zeichenkette interpretiert und auf der Konsole ausgegeben werden. Ein Feature, das hingegen eher weniger Entwickler kennen, ist die Unterstützung von Platzhaltern in console.log. Hierbei arbeitet die Funktion ähnlich wie die printf-Funktion in anderen Programmiersprachen. Das erste Argument ist eine Zeichenkette, die beispielsweise einen mit „%s“ ausgezeichneten Platzhalter enthält. Dieser wird bei der Ausführung des Kommandos durch das zweite Argument, das Sie der Methode übergeben haben, ersetzt.

Wo Sie mit console.log recht schmucklose Ausgaben erzeugen, können Sie mit console.info, console.warn und console.error unterschiedliche Typen von Meldungen erzeugen. Diese unterscheiden sich durch ein schickes vorangestelltes Icon, das den jeweiligen Typ repräsentiert, und durch die Tatsache, dass console.error zusätzlich einen aktuellen Stacktrace ausgibt.

Bestimmt wollten Sie auch schon einmal die Performance einer Routine messen oder zwei verschiedene Lösungsansätze hinsichtlich der benötigten Zeit miteinander vergleichen. Implementieren Sie diese Funktionalität selbst, müssen Sie zwei Datumsobjekte generieren und deren Timestamps miteinander vergleichen. Sie müssen das Rad jedoch nicht neu erfinden, denn Ihr Browser beinhaltet bereits eine eingebaute Stoppuhr in Form der Methode console.time. Dieser Methode übergeben Sie ein Label und starten damit den Timer. Sobald alle gewünschten Aktionen ausgeführt sind, rufen Sie die Methode con­sole.time­End mit dem gleichen Label auf und erhalten als Ausgabe auf der Konsole das Label und die Anzahl der verstrichenen Millisekunden. Der Funktionsumfang des console-Objekts umfasst noch einige weitere Funktionen, von denen Sie die wichtigsten kurz in Tabelle 1 beschrieben finden.

Kommando

Bedeutung

console.count

Gibt an, wie oft die Zeile durchlaufen wurde

console.dir

Interaktive Ansicht von Objekten

console.error

Anzeige einer als Fehler geflaggten Nachricht

console.group

Gruppierung von Nachrichten auf der Konsole

console.info

Anzeige einer als Information geflaggten Nachricht

console.log

Anzeige einer Nachricht

console.time

Zeitmessung auf der Konsole

console.trace

Ausgabe des aktuellen Stacktrace

console.warn

Anzeige einer als Warnung geflaggten Nachricht

Tabelle 1: Methoden des „console“-Objekts

Nachdem Sie jetzt wissen, wie Sie die Konsole Ihres Browsers nutzen und auch aus Ihrer Applikation heraus Ausgaben auf ihr erzeugen können, erfahren Sie im nächsten Abschnitt, wie Sie den Debugger Ihres Browsers dazu verwenden können, an einem beliebigen Punkt in Ihrer Applikation anzuhalten und sich dort genau umzusehen.

Ein Blick ins Innere: der Debugger

Die Methode console.log und ihre Freunde haben zwei entscheidende Nachteile. Zum einen müssen Sie Ihren Quellcode verändern, um Informationen zu erhalten. Das kann zum einen immer Schreibfehler nach sich ziehen, und zum zweiten durchaus vorkommen, dass Sie eine oder mehrere Ausgaben erzeugen und anschließend feststellen müssen, dass die gewünschte Information doch nicht dabei war. Das bedeutet, dass Sie ein zusätzliches console.log-Statement einfügen und den Workflow erneut durchlaufen müssen.

Breakpoints

Mit console.log und seinen Verwandten können Sie Ausgaben auf der Konsole erzeugen. Stellen Sie allerdings fest, dass die Information, die Sie eigentlich haben wollten, nicht dabei ist, müssen Sie ein weiteres Statement einfügen und den gesamten Workflow erneut durchlaufen. Viel besser ist es da doch, wenn Sie einen bestimmten Punkt in Ihrer Applikation definieren, an dem die Ausführung angehalten wird und Sie die Kontrolle übernehmen können. Dieser Punkt trägt den Namen Breakpoint und kann auf zweierlei Arten gesetzt werden. Die erste – unschönere Variante – besteht darin, dass Sie einfach das Schlüsselwort debugger in Ihren Quellcode einfügen. In der zweiten Variante öffnen Sie in Ihrer Browserkonsole den Sources-Tab, wählen in der Baumansicht die gewünschte Datei aus und klicken auf die Zeilennummer, an der Sie anhalten möchten. Diese Zeile wird dann durch einen Marker hervorgehoben (Abb. 1).

springer_debugging_1.tif_fmt1.jpgAbb. 1: Das Setzen von Breakpoints über den „Sources“-Tab

Egal, welchen der beiden Wege Sie wählen, gilt: Sobald Sie Ihre Applikation neu laden und Ihre Entwicklertools geöffnet sind, hält Ihr Browser an dieser Stelle an. Sobald dies der Fall ist, können Sie zu Ihrer Konsole wechseln und mit dem aktuellen Stand Ihrer Applikation interagieren. Dabei haben Sie nicht nur Zugriff auf globale Variablen zum Zeitpunkt des Anhaltens, sondern auch auf die Variablen des aktuellen Funktions- und des Closure-Scopes. Wissen Sie einma...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang