Blog [tdbengine.org]

Home Überblick Suche Impressum Kontakt Mitglieder

Eine Lanze für Firebug brechen

Hallo zusammen. Heute möchte ich Ihnen Firebug kurz vorstellen, denn ich denke, und da werden mir alle tdb-Programmierer zustimmen, dieses kleine Tool ist ein Must-Know für jeden, der Web-Anwendungen programmiert.

Was ist Firebug?

Firebug ist ein Add-On für den Firefox Webbrowser. Dieses klinkt sich in den Browser ein und bietet eine Vielzahl von Funktionen, die das Web-Entwickeln erheblich vereinfachen. Dazu gehören eine Logging-Console, JavaScript-Debugger, HTML-"Echtzeitbetrachter" sowie DOM-Viewer, CSS-Editor, Layout-Viewer und ein Traffic-Monitor. Firebug ist open source und frei erhältlich.

Wann braucht man Firebug?

Immer dann, wenn man Fehler im Javascript, dem HTML-Layout oder den Style-Kaskaden suchen muss. Ausserdem lässt sich damit auch die Performance analysieren um etwaige Schwachstellen im Code ausfindig zumachen, z.B. bestimmte Funktionen, die aufgrund ungünstigprogrammierter Schleifen nutzlos Rechenzeit verbraten.

Die Console

Die Firebug-Console ist mittlerweile eines meiner wichtigsten Werkzeuge beim Debugging von Javascripts. Was ich früher noch mit dutzenden Alert()-Boxen zur Kontrolle ausgegeben (und jedesmal weggeklickt) hatte erscheint nun als Eintrag in der Console. Neben einfachen Ausgaben der Art "befinde mich in function xyz", kann die Console wesentlich komplexere Aufgaben erledigen. Neben reinem Text können auch Javascript und HTML-Knoten in die Console geschrieben werden. Diese sind dann als Link zum DOM-Viewer oder zum HTML-Viewer verfügbar. Bei entsprechender Konfiguration trägt Firebug ausserdem auch Javascript-Fehler und -Warnungen, CSS-Fehler sowie XMLHTTPRequest (AJAX lässt grüßen) in der Console ein.

Der HTML-Viewer

Im HTML-Bereich von Firebug wird immer der aktuelle Ist-Zustand des HTML-Dokuments angezeigt. D.h. jede Veränderung des HTML-Codes durch Manipulationen seitens JavaScript wird hier "echt" abgebildet.
Auch das ist eine ungeuere Hilfe, wenn man exzessiv mit JavaScript arbeitet um dynamisch Elemente, wie Dialoge oder ähnliches zu erzeugen. Der Baum ist, wie von vielen XML-Editoren bekannt, mit kleinen Plus/Minus-Symbolen auf und zuklappbar. Ausserdem gibt es eine "Inspect"-Funktion, mit der man ganz einfach ein Element im Browser anklicken kann und sofort den dazugehörigen HTML-Quellcode betrachten kann.

Der CSS-Editor

Aufwendige Layouts im normalen Texteditor umzusetzen, ist oftmals eine Frage von Trial'n'Error. Mit dem CSS-Editor hat man die Möglichkeit die Stylesheets zur Laufzeit im Browser zu ändern und sieht sofort die Auswirkung einer Änderung. Gerade beim Feintuning ist das ungemein hilfreich.

Der Script-Debugger

So richtig ab, gehts im Script-Debugger. Nicht nur das er direkten Zugriff auf alle Javascripts bietet, kann man dort auch Ausdrücke "watchen" und Breakpoints (auch Bedingte) setzen.
Dadurch lässt sich der Inhalt von Variablen und Objekten gezielt beobachten und man kommt logischen Fehlern im JavaScript-Code schnell auf die Spur.

Der DOM-Viewer

Gerade bei der Arbeit mit Dojo hat sich der DOM-Viewer für mich als unschlagbares Werkzeug herauskristallisiert. Er bildet den kompletten DOM-Baum, angefangen beim window-Objekt, ab und zeigt zu jedem Knoten Eigenschaften und Methoden an (wirklich alle!). Wer darin nicht schnell den Überblick verliert... Hut ab!

Zu guter Letzt: Der Net-Monitor

Im Net-Monitor lässt sich genau beobachten, welche Datei (egal ob JS, CSS, HTML oder Bilder) in welcher Reihenfolge vom Server angefragt wurden. Neben der Größe der Datei wird auch die zum Laden benötigte Zeit angezeigt. Klickt man auf einen der Einträge, so kann man ausserdem sehen, wie der Request- sowie der Response-Header aussehen.

Fazit

Ich kann hier nicht alle Funktionen oder gar eine Einführung in die Benutzung von Firebug bieten, aber hoffe, den ein oder anderen neugierig gemacht zu haben. Bekommen lässt sich Firebug bei den Mozilla-Addons oder direkt unter http://www.getfirebug.com. Ich kann nur wirklich jedem empfehlen, sich damit auseinander zusetzen, da es am Ende sehr viel Zeit spart. Übrigens auch, wenn die Anwendungen nicht im Firefox, sondern im Internet Explorer laufen sollen. Denn bis zu einem gewissen Grad sind sich die Browser ja doch irgendwie ähnlich.

Ausserdem lesenswert sind diese Blog-Einträge:

Dieser Artikel wurde veröffentlicht am 01.08.2007 um 09:45 Uhr. Ein Kommentar.

Zeige 1 - 1 von 1