© saicle/Shutterstock.com
PHP Magazin
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.

Sebastian Springer


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

PHP Magazin
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.

Sebastian Springer


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

Neugierig geworden?


    
Loading...

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