200910Nov

Firebug: FireQuery, Eventbug und weitere Extensions

Firebug zählt heutzutage zum Standard-Repertoire eines Webentwicklers. Der Feuerkäfer ist so beliebt, dass es mittlerweile eine große Sammlung an Erweiterungen für die Erweiterung gibt. Viele dieser Extensions sind wahrscheinlich altbekannt, dennoch wird es zukünftig noch weitere interessante Zusatzfunktionen für das Entwickler-Tool geben.
Für das Debuggen von jQuery-Code gibt es seit geraumer Zeit die Erweiterung FireQuery, mit der sich jQuery-Ausdrücke und Events im Firebug-Fenster anzeigen lassen.

FireQuery

Eine weitere Funktionalität der Extension stellt die Option "jQuerify" dar: Damit lässt sich auf einer Website (online oder offline) dynamisch die jQuery-Bibliothek einbetten, so dass anschließend per "$jq()" jQuery-Befehle ausgeführt werden können.

FireQuery - jQuerify

So lassen sich schneller jQuery-Funktionen testen und entwickeln. Ein schöner Nebeneffekt dabei ist, dass nach einem Funktionsaufruf alle Elemente in der Konsole angezeigt werden, die von dem jQuery-Befehl betroffen waren (siehe Abbildung).
Allerdings ist bei der Verwendung der Erweiterung Vorsicht geboten: Der Autor weißt darauf hin, dass die Extension noch unsicher ist und deshalb in einem separaten Profil genutzt werden sollte.

Wer wissen möchte, welche Firebug-Erweiterungen momentan noch in der Entwicklung stecken, kann den Nightly Build von Firefox (aktuell Version 3.7) installieren und beispielsweise Eventbug ausprobieren — diese Extension erweitert Firebug um ein "Events"-Tab und soll die Arbeit mit Event-Handlers erleichtern.

Eventbug

Eventbug listet alle Events und die damit verknüpften DOM-Elemente auf. Hierbei wird der komplette DOM-Pfad des jeweiligen Objekts sehr schön veranschaulicht ("Targets"-Tab). Es handelt sich wie gesagt noch um eine frühe Alpha-Version, aber dennoch könnte die Erweiterung eine nützliche Hilfe für die Arbeit mit JavaScript-Ereignissen werden.

Eine weitere experimentelle Firebug-Extension stellt Firepicker dar, die beim Klick auf einen Hexadezimal-Farbwert einen Farbwähler (Color Picker) öffnet, mit dem sich die aktive Farbe anpassen lässt.

Firepicker

Man darf sehr gespannt sein, wie sich Firebug in den nächsten Jahren entwickeln wird. An dieser Stelle sei jedoch bemerkt, dass auch in anderen Browsern derartige Entwicklerwerkzeuge integriert sind, die sich ebenfalls sehr zum Positiven hin gewandelt haben. So bieten auch die mitgelieferten Tools von Safari, Internet Explorer 8 und Opera tolle Möglichkeiten zum Debuggen von Websites.