Firefox Addon: Firebug

Nachdem ich es ja vor einiger Zeit schon einmal versprochen hatte, bin ich vor ein paar Tagen endlich dazu gekommen, das Firefox Addon Firebug genauer unter die Lupe zu nehmen. Und was soll ich sagen? Ich bin absolut begeistert. Das Plugin ist das absolute Muss für jeden Web-Entwickler.

Nach der Installation der vor kurzem erschienenen Version 1.0 lassen sich alle Einstellungen über ein Icon in der rechten unteren Ecke der Statusleiste vornehmen. Nach einem Klick darauf teilt sich das Browserfenster horizontal und öffnet das Programm im unteren Teil der Seite. Dabei lässt sich das Addon entweder für alle, oder nur für die aktuell angezeigte Seite aktivieren. Generell würde ich empfehlen Firebug nur für ausgewählte Seiten zu aktivieren. Nach einer Weile, mit vielen geöffneten Tabs und universell aktiviertem Firebug, wird der Browser sehr langsam, was nur durch den Neustart von Firefox behoben werden kann.

Das Killerfeature von Firebug ist meiner Meinung nach der Inspect Modus für HTML und CSS. Hiermit lassen sich einzelne Elemente mit der Maus überfahren. Die Ansicht der Erweiterung teilt sich dann erneut. In der linken Spalte, springt man direkt in den HTML Quelltext an die Stelle des ausgewählten Elements. In der rechten Spalte wird dann gleichzeitig die CSS Definitionen angezeigt. Hier werden übrigens auch alle Elemente angezeigt, von denen das ausgewählte seine Einstellungen erbt. Einzelne Definitionen lassen sich deaktivieren um anzuschauen, wie es ohne aussehen würde. Schick ist auch der Layout-Reiter in der rechten Spalte. Hier kann man genau alle Margins und Paddings, sowie die Breite und Höhe des Elements einsehen.

Ein weiteres nettes Feature ist auch die sogenannte Konsole. Hier kann man sehr gut AJAX Requests verfolgen, bzw. debuggen. Angezeigt werden hierbei alle Daten des Requests, sowie alle Daten der Response. Zusätzlich kann man die Header der Request anzeigen lassen. Dieses Feature konnte ich allerdings leider noch nicht allzu genau anschauen.

Als letztes habe ich noch herausgefunden, bzw. gelesen, das von Firebug ein globales JavaScript Objekt namens „Console“ zur Verfügung gestellt wird. Damit lassen sich Debugausgaben direkt in die Console von Firebug schreiben. Das erspart einem mühsames alert-Debugging und ist meiner Meinung nach ein sehr nützliches Feature.

Alle Funktionen zu erwähnen würde hier sicher den Rahmen sprengen. Unter http://www.getfirebug.com/docs.html stellen die Entwickler aber auch eine Dokumentation zur Verfügung. Hier ist sicher auch noch der ein oder andere Tipp dabei oder wird das ein oder andere nützliche Feature erwähnt.

Insgesamt finde ich, das Firebug ein super Werkzeug ist, welches einem die Arbeit als Web-Entwickler um einiges leichter macht. Sparsam aktiviert, wird das weitere Benutzen des Browsers auch nicht beeinflusst. Im Laufe der Zeit werde ich sicher noch ein paar weitere Dinge herausfinden, die man so bei der täglichen Arbeit gebrauchen kann.

Unbedingt von http://www.getfirebug.com runterladen und installieren 🙂