Ratgeber: Webentwicklung
Fehlersuche mit Firebug
Die clientseitige Javascript-Entwicklung bietet fast keine vernünftigen Werkzeuge zur Fehlersuche. Eine der wenigen Ausnahmen ist Firebug, ein Add-on für Firefox und Chrome.
Funktioniert bei der Entwicklung von Javascript-Code nicht alles wie geplant, kommt in der Regel eine Ausgabe auf der HTML-Website oder in einem Pop-up-Fenster zum Vorschein. Ohne Erweiterungen ist dies die einzige Möglichkeit, aktuelle Zustände von Variablen abzufragen.Abhilfe schafft das Plug-in Firebug, das ursprünglich für Mozilla Firefox entwickelt wurde und auf dieser Plattform auch den größten Leistungsumfang besitzt. Dank der steigenden Beliebtheit von Google Chrome haben die Entwickler inzwischen auch damit begonnen, die Erweiterung zu portieren.
Installation
Die Installation des Add-ons geht einfach. Innerhalb von Firefox rufen Sie das Menü Extras/Add-ons auf und suchen nach Firebug. Alternativ dazu können Sie das Plug-in auch direkt über den Browser und die URL getfirebug.com aufrufen. Nach der erfolgreichen Installation finden Sie das Firebug-Symbol innerhalb der Navigationssymbolleiste. Für die Installation der Erweiterung in Chrome rufen Sie direkt die Website des Projekts auf und führen von dieser den Vorgang aus.
Aufruf und Arbeitsbereich
Für die folgenden Beispiele nutzen wir die aktuelle Version von Firefox, da uns an dieser Stelle ein größerer Funktionsumfang zur Verfügung steht.Rufen Sie die HTML-Website auf, deren Javascript-Entwicklung Sie näher untersuchen möchten. Starten Sie anschließend Firebug und klicken Sie die Registerkarte Skript an. Sollten Sie die Meldung Skript Panel ist deaktiviert erhalten, müssen Sie zuerst in der Navigationssymbolleiste für Firebug den Menüpunkt Alle Module aktivieren auswählen.
Ist dies erledigt, sehen Sie die Fenster von Firebug gefüllt mit den entsprechenden Werten der Website. Es gibt insgesamt fünf zentrale Bereiche oder Funktionen innerhalb des Firebug-Arbeitsbereichs, die Sie zur Fehlersuche benötigen. Das größte Fenster, in dem Sie auch den Programmcode der aktuellen Seite sehen, ist der Editor, in dem Sie auch Ihren Javascript-Code debuggen können. Innerhalb des Editors gibt es verschiedene Funktionen, die für die Fehlersuche relevant sind.
Ratgeber: Was tun bei Content-Klau?
Oberhalb des Editorfensters gibt es neben den Steuerungssymbolen fürs Debugging auch einen Selektor, mit dessen Hilfe Sie zwischen den verschiedenen Dateien der aufgerufenen HTML-Seite wechseln können. Die Drop-down-Liste zeigt automatisch alle an der Darstellung der Website beteiligten Dateien an.Am linken Rand des Editorfensters sehen Sie die nummerierten Programmzeilen Ihres Programmcodes, unabhängig von der Art der enthaltenen Seite. An dieser Stelle setzen Sie am einfachsten Ihre Haltepunkte (Breakpoints).Neben dem Editorfenster gibt es auf der rechten Seite noch ein weiteres Fenster mit den Registerkarten Überwachen, Stack und Haltepunkte. Hier finden Sie alle notwendigen Hilfsmittel für die Überwachung einzelner Variablen, der Verwaltung der Haltepunkte sowie der Aufrufe von Funktionen.
Erste Debugging-Versuche
Unsere ersten Debugging-Versuche unternehmen wir an einem einfachen Beispiel. Es besteht aus einer HTML-Seite mit einer Schaltfläche. Wird diese angeklickt, dann soll ein Text oberhalb der Schaltfläche erscheinen.Rufen Sie das Listing mit Ihrem Firefox-Browser auf und starten Sie das Firebug-Plug-in. Sie sehen im Editorfenster den kompletten Programmcode. Setzen Sie in der ersten Zeile innerhalb der Funktion - der Deklaration der Variablen beschr - einen Haltepunkt. Klicken Sie dazu in das Fenster mit den Zeilennummern. In unserem Beispiel erscheint anschließend links neben der Zahl 7 ein roter Punkt.
Ratgeber: Meteor - die Webentwicklung der Zukunft? Wenn Sie anschließend in Ihrem Browserfenster den Button "Klick mich an!" anklicken, startet die Ausführung der Funktion debugging_beispiel() und stoppt genau an Ihrem Haltepunkt. Ein Blick auf die Registerkarte Überwachen zeigt den aktuellen Wert der Variablen beschr: Da diese noch nicht deklariert ist, sehen Sie lediglich ein undefinded.
Navigation
Für die weitere Navigation in Ihrem Code stehen fünf Symbole zur Verfügung:
- Erneut ausführen hat in unserem Beispiel keine Wirkung, sorgt jedoch generell für eine erneute Ausführung des Programmcodes ohne ein neues Laden der Website.
- Fortsetzen führt den Programmcode weiter aus bis zum nächsten Haltepunkt oder zum Ende.
- Hineinspringen führt eine Funktion schrittweise aus.
- Überspringen führt eine Funktion in einem Schritt aus, ohne die einzelnen Schritte separat anzusteuern.
- Herausspringen geht wieder eine Ebene höher und führt den Programmcode beispielsweise nach einer Funktion weiter aus.
Programmcode debuggen
Nach dem Setzen des Haltepunktes sind Sie in der Lage, den Zustand Ihrer Anwendung zu jeder Zeit zu untersuchen. Im ersten Schritt hat die Variable beschr noch keinen Wert, da Sie sich vor der Deklaration befinden.Gehen Sie mit F11 oder der Taste für Hineinspringen einen Schritt weiter, verändert sich die Situation im Fenster Überwachen: Der Variablen beschr wird der Wert div#klickmich zugewiesen. Klappen Sie die Beschreibung der Variablen im Überwachen-Fenster auf, sehen Sie alle Details, die zu der Variablen bekannt sind. Aktuell ist die Beschriftung, die über das Attribut innerHTML repräsentiert wird, noch leer.Dies ändert sich jedoch, wenn Sie mit F11 noch einen Schritt weiter gehen. Firebug führt die Zeile aus und beendet die Funktion - leider können Sie anschließend auch nicht mehr die Veränderungen sehen, welche durch die Ausführung der zweiten Programmzeile entstanden sind.Vermuten Sie an dieser Stelle ein Problem, sollten Sie Ihre Funktion außerhalb von Firebug um eine weitere Zeile erweitern. Diese benötigt keinen sinnvollen Inhalt und soll lediglich ein vorschnelles Ende der Funktion verhindern. Für unser Beispiel fügen wir die Deklaration einer Variablen ein:
var test;
Laden Sie die Website in Firefox neu und setzen Sie auf diese Programmzeile einen zusätzlichen Haltepunkt. Führen Sie die Funktion bis zu diesem Haltepunkt aus und betrachten Sie die Variable beschr erneut.Wie Sie sehen, ist die Zeichenkette "Ich bin beschaeftigt..." nach dem Ausführen an verschiedenen Stellen innerhalb der Attribute von beschr zu finden, unter anderem auch bei innerHTML.
Haltepunkte verwalten
Wie Sie im Beispiel gesehen haben, ist das Setzen von einfachen Haltepunkten mit einem Klick erledigt. Sie sehen alle Haltepunkte auch innerhalb der gleichnamigen Registerkarte.An dieser Stelle können Sie auch die einzelnen Stopps individuell verwalten und einen Haltepunkt entweder deaktivieren oder löschen. Dazu stehen Ihnen entweder das Kontextmenü zur Verfügung oder die entsprechenden Symbole.
Ratgeber CSS: Magazin-Layouts für Websites Zum Löschen klicken Sie das rote Quadrat mit dem weißen Kreuz am Ende der Zeile an. Wenn Sie einen Haltepunkt deaktivieren möchten, müssen Sie lediglich den Haken am Anfang der Zeile entfernen. Innerhalb des Kontextmenüs gibt es die Möglichkeit, alle Haltepunkte in einem Schritt zu löschen oder zu deaktivieren.
Bedingte Haltepunkte
Neben diesen klassischen Haltepunkten, bei denen die Verarbeitung an einer bestimmten Stelle stoppt, gibt es auch eine zweite Variante. Diese stoppt den Programmablauf nur, wenn eine bestimmte Bedingung erfüllt ist. Ergänzen Sie dazu Ihre Funktion um die folgenden Zeilen:
test = 0;
while (test<20) {
test=test+1;
document.getElementById('zaehler').
innerHTML = test;
Fügen Sie zusätzlich in Ihren body-Bereich vor dem div-Tag mit der ID klickmich noch ein weiteres div-Tag ein:
<div id="zaehler"></div>
Die while-Schleife wird so lange durchlaufen, bis der Zähler auf 20 steht. Wenn Sie dies in Einzelschritten durchgehen, sehen Sie wie die Variable test schrittweise um 1 erhöht wird.
Möchten Sie einen Haltepunkt bei einem bestimmten Wert von test setzen, dann klicken Sie die Zeilennummerierung mit der rechten Maustaste an. Es erscheint ein Fenster, in dem Sie die Haltebedingung angeben können.In unserem Fall soll der Schleifendurchlauf stoppen, wenn test größer als 10 ist. Somit lautet die Bedingung, die Sie ins Fenster einpflegen sollten, test>10.Wenn Sie den Programmcode anschließend schrittweise durchgehen, sehen Sie im Fenster Überwachen den Wert entsprechend wachsen. Sobald die Variable test den Wert 11 annimmt, stoppt die Verarbeitung am Haltepunkt, Sie können die einzelnen Attribute überprüfen und anschließend die Verarbeitung fortsetzen.
Dateiauswahl fürs Debugging
Nutzen Sie in größeren Projekten mehrere Javascript-Dateien, werden diese mit script-Aufrufen entsprechend eingebunden. Wie bereits zuvor beschrieben, haben Sie über die Symbolleiste die Möglichkeit, alle aktuell am Prozess beteiligten Dateien in einer Liste darzustellen.Aus dieser Liste können Sie an die entsprechenden Code-Stellen verzweigen und mit der Fehlersuche beginnen.
Kommandozeile benutzen
Innerhalb von Firebug können Sie über die Kommandozeile direkt Befehle absetzen. Damit ist es zum einen möglich, den aktuellen Wert eines beliebigen Objektes zu jeder Zeit zu betrachten, und zum anderen auch, Javascript-Befehle zur Laufzeit auszuführen, ohne diese in der eigentlichen HTML-Seite zu verankern. Innerhalb der Konsole finden Sie zwei Arten von Befehlszeilen: eine einzeilige Variante und eine mehrzeilige.Der Standard ist die einzeilige Variante, die am unteren Ende des Konsolenfensters zu finden ist und durch drei Pfeile nach rechts gekennzeichnet wird. Der Vorteil dieser Variante ist die Autocomplete-Funktion, mit der Sie direkt beim Tippen eine mögliche Auswahl an Befehlen angezeigt bekommen.Mit Hilfe der Tabulator-Taste vervollständigen Sie die Eingabe. Nachdem Sie die Eingabe-Taste gedrückt haben, wird der Befehl direkt ausgeführt. Sie können dies durch einen einfachen Befehl, wie etwa alert() testen: Geben Sie alert('Hallo'); in die Befehlszeile ein und der Befehl wird nach dem Drücken der Eingabe-Taste ausgeführt. Im Hauptfenster erscheint anschließend ein Pop-up mit der entsprechenden Meldung.Wenn Sie mehrere Befehle in einem Schritt ausführen möchten, nutzen Sie dazu am besten den Befehlseditor. Diesen können Sie entweder über das Kontextmenü der Konsole oder über das Symbol am Ende der Befehlszeile öffnen. Geben Sie dann mehrere Befehle ein und starten Sie die Ausführung über die Schaltfläche Ausführen.Innerhalb der Konsole gibt es noch eine Vielzahl weiterer Funktionen und Möglichkeiten. Mehr dazu finden Sie in der Online-Dokumentation des Add-ons unter dem Schlagwort Command Line API.
Weitere Funktionen
Innerhalb von Firebug gibt es noch zahlreiche weitere Funktionen für die Javascript-Fehlersuche. Gerade bei komplexeren Entwicklungen mit mehreren ineinander verschachtelten Aufrufen ist die Quelle des Aufrufs wichtig. Bei dieser Suche hilft Ihnen die Stack-Ansicht entsprechend weiter. Sie sehen diese im Detail auf der gleichnamigen Registerkarte sowie in komprimierter Form in der Symbolleiste des Skriptfensters. Von dort gelangen Sie per Klick an die jeweilige Aufrufstelle.Eine weitere Möglichkeit, Aufrufe von Funktionen zu finden, ist diese zur Überwachung hinzuzufügen und dann die Protokollierung zu aktivieren. Dazu starten Sie den Debugging-Vorgang und wechseln in die DOM-Ansicht. In dieser finden Sie auch die entsprechende Funktion. Klicken Sie diese mit der rechten Maustaste an und wählen Sie den Punkt Überwachung hinzufügen aus. Das Ergebnis Ihrer Überwachung können Sie sich anschließend im Konsolenfenster betrachten.Ebenfalls hilfreich sind die Hinweise, die Sie beim Berühren einer Variablen mit dem Mauszeiger im Editorfenster erhalten. In einem Fenster neben dem Mauszeiger sehen Sie den aktuellen Wert der Variablen. Damit müssen Sie nicht zwingend notwendig immer direkt auf das Überwachen-Fenster wechseln sondern haben die wichtigsten Variablen auch auf andere Art und Weise im Blick.
