Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Florian Fiegel 4. September 2008

Mehr Power für Firebug

Kein Beitragsbild

Firebug ist eine der bes­ten Extensions für Firefox wenn es um die Webentwicklung geht. Viele Funktionen ste­hen bereits zur Verfügung und ermög­li­chen effek­ti­ves arbei­ten. Doch Firebug ist nicht allein. Inzwischen steht eine gan­ze Meute an Extensions zur Verfügung um Firebug noch ein wenig mehr zu ent­lo­cken. Dazu gehö­ren neben Features für die Webentwicklung auch sol­che zur loka­len Arbeit am Browser selbst.

Firebug Logo

Firebug Net Panel History Overlay

Macht genau das, was der über­lan­ge Name beschreibt: es ermög­licht die his­to­ri­sche Darstellung der Net-Panel in Firebug. Hier ist die Installation bis­her nur mit Mozilla-ccount mög­lich, da noch in der Entwicklung.

Net Panel History Overlay Screenshot 1

Firebug Code Coverage

Ermöglicht die Anzeige des abge­deck­ten Codes anhand von Funktionen. Es lässt sich bestim­men, wie viel Prozent der Funktionen im Code genutzt wer­den bezie­hungs­wei­se unge­nutzt blei­ben.

Rainbow for Firebug Screenshot

Rainbow for Firebug
Ergänzt Firebug um Syntaxhighlighting für Javascript. Sämtliche Farbeinstellungen las­sen sich mit­tels CSS ein­stel­len und ent­spre­chen­de Voreinstellungen im- und expor­tie­ren. Die Extension befin­det sich noch im Entwicklungsstadium und kann nur mit einem ent­spre­chen­den Mozilla-Account instal­liert wer­den.

Firecookie

Firecookie Logo

Diese Erweiterung stellt, wie der Name schon ver­mu­ten lässt Funktionalitäten für Cookies zur Verfügung. Eine aus­ge­klü­gel­te Erweiterung, die es nicht nur ermög­licht Cookies zu Verwalten sowie Zugriffsrechte expli­zit fest­zu­le­gen, son­dern auch eine aus­führ­li­che Darstellung bie­tet und Änderungen an Cookies als Logs in der Konsole fest­hält.

Widerbug

Widerbug Logo

Für die Widescreen-Liebhaber und Sidebarnutzer stellt die­se Erweiterung die ulti­ma­ti­ve Ergänzung dar. Es fehlt aber ein Update auf die aktu­el­le Version, so dass bis­her nur eine Version für Firefox 2.0 zur Verfügung steht. Die Sidebar bringt, gegen­über dem ein­zel­nen Fenster den Vorteil der ste­ti­gen Aktualisierung beim Wechseln eines Tabs mit und unter­stützt im Gegensatz zur unten ange­leg­ten inter­nen Lösung eben die Breite des Screens.

XRefresh

XRefresh Logo

Sobald Dateien in Verbindung mit der aktu­el­len Webseite geän­dert wer­den, wird ein auto­ma­ti­scher Browser-Refresh durch­ge­führt. Die Extension benö­tigt zusätz­lich neben Firebug auch einen Filesystem Monitor, wel­cher sowohl für Windows, als auch für Mac OS X zur Verfügung steht.

YSlow

YSlow Screenshot

Analysiert die Geschwindigkeit einer Seite und mel­det, wel­che Kriterien nach Yahoos Regeln für hoch­per­for­man­te Webseiten zu einer lang­sa­men Geschwindigkeit der Seite füh­ren. In einem Firebug Panel wer­den dazu ent­spre­chen­de Hinweise gege­ben.

Jiffy

Jiffy Screenshot

Ein wei­te­res Tool zur Geschwindigkeitsmessung stellt die­se Erweiterung zur Verfügung. Es ergänzt Firebug um ein Panel zur Visualisierung von Messdaten der Jiffy-Web-Suite (Javascript Library), wel­che ermög­licht die Lade- und Renderingzeiten ein­zel­ner Elemente zu bestim­men.

FirePHP
Eine gran­dio­se Erweiterung, wel­che die Konsole um das Loggen von PHP-Fehlern erwei­tert. Benötigt wird dafür zusätz­lich eine bereit­ge­stell­te Library, wobei die­se auch für Frameworks zur Verfügung steht und andern­falls ein offe­nes Protokoll für den Eigenbau zur Verfügung steht. FirePHP ist damit aller­dings nicht nur auf PHP beschränkt, eine Entwicklung für ande­re ser­ver­sei­ti­ge Skriptsprachen lässt sich rea­li­sie­ren.
Das Tool ist vor allem für die AJAX-Entwicklung gedacht.

Logo FirePHP

Fireclipse
Dieses Open-Source-Projekt stellt eine Verbindung zwi­schen Firebug und dem Eclipse-Editor bereit. So kön­nen bei­spiels­wei­se Fehlermeldungen aus der Konsole zu Eclipse umge­lei­tet wer­den und inner­halb von Eclipse ver­ar­bei­tet wer­den. Zusätzlich steht ein Eclipse-Panel inner­halb von Firebug zur Verfügung.
Zusätzlich zur Firefox-/Firebug-Extension wird ein Plugin für Eclipse benö­tigt.

Drupal For Firebug

Stellt ähn­lich den bei­den vor­her­ge­hen­den Extensions eine Debugging-Plattform mit­tels einer Library zur Verfügung. Das anvi­sier­te System Drupal soll dabei über die Library Rückmeldungen zu SQL-Abfragen, Errormeldungen Objekten und mehr lie­fern. Benötigt wird zusätz­lich die genann­te Library und der Mozilla-Account.

Pixel Perfect

Pixel Perfect Logo

Die Erweiterung ermög­licht es ein fer­ti­ges Design in einer Bilddatei über ein ent­wi­ckel­tes Html-Konstrukt zu legen und so pixel­ge­nau Fehler zu fin­den und Korrekturen vor­zu­neh­men. Dabei kön­nen meh­re­re Bilder gleich­zei­tig über die Seite gelegt wer­den und sowohl die Durchlässigkeit als auch die genaue Ausrichtung nach­jus­tiert wer­den.

Firequark

Die Erweiterung ersetzt das in Firebug inte­grier­te XPath mit einem alter­na­ti­ven CSS Selector, wobei ein paar Elemente ergänzt wer­den. Nützlich wird die­se Erweiterung, wenn mit (X)Html-Dokumenten gear­bei­tet wird, da Fehler die Firefox erzeugt igno­riert wer­den. Wichtig ist, dass die­se Extension nicht als sol­che in Erscheinung tritt, son­dern Firebug über­schreibt.

Live Coder

Screenshot Live Coder

Erweitert Firebug um den Blick unter die Chrome-Haube von Firefox, der instal­lier­ten Extensions und sogar Firebug selbst. Chrome-Elemente und Funktionen las­sen sich ana­ly­sie­ren und on-the-run ver­än­dern. Diese Extension ist eher für die Entwicklung sel­bi­ger gedacht und nur ein­ge­schränkt für ande­re Zwecke ein­setz­bar. Einen ähn­li­chen Weg geht das von den Firebug-Developern ange­sto­ße­ne Projekt Chromebug, wel­ches sich als Firebug für Firefox-Extensions ver­steht.

Florian Fiegel

Seit 2008 freier Webworker mit Schwerpunkt auf journalistischer Berichterstattung und (Online-)PR. Täglich konfrontiert mit unzähligen Tools und Technologien im Web.

14 Kommentare

  1. Stimm, den Beitrag könn­ten man inzwi­schen mal wie­der aktua­li­sie­ren. Ich küm­me­re mich drum! :)

  2. viel­leicht mal links aktua­li­sie­ren und so?
    ansons­ten schö­ner, aber lei­der ver­al­te­ter Beitrag :(

  3. Neben “Rainbow for Firebug” (s.o.) gibt es jetzt “FireRainbow” (https://addons.mozilla.org/de/firefox/addon/9603) für Firebug 1.3.

  4. Firebug ist geni­al und u.a. genau der Grund wes­we­gen wie Firefox lie­ben. Jeder der sich etwas mehr mit Browser beschäf­tigt, anstatt nur an der Oberfläche zu krat­zen weiß das auch.

  5. Firebug ist für Webdeveloper eine der bes­ten Extensions und nütz­lichs­ten Tools für Firefox. Feinfach per­fekt.

    Andreas

  6. Hm, viel­leicht ist das wirk­lich ein wenig zu schmal auf den ers­ten Blick, aber es wird ja nun­mal nicht die gesam­te Entwicklungsumgebung ein­ge­bun­den, son­dern eben nur ein Element bezie­hungs­wei­se eine klei­ne Zahl an Elementen.
    Ich den­ke nicht, dass es da so falsch ist, wenn man auf den Eclipse-Editor hin­weist.

  7. Eclipse-Editor”
    Ich bin haupt­be­ruf­lich Java Entwickler und ich wür­de es nicht wagen, die bes­te Entwicklungsumgebung aller Zeiten, als “Editor” zu bezeich­nen ;-)

  8. Sarah, die Fage nach dem “Wozu Firebug” erklärt Florian sehr schön in sei­ner Einleitung:

    Firebug ist eine der bes­ten Extensions für Firefox wenn es um die Webentwicklung geht.

    LG
    Dominik

  9. Stürzt nur häu­fig und ger­ne ab, vor allem im FF3. Wenn es mal läuft, geht’s oft auf die per­for­mence

  10. @Sarah: Das war für die­sen Artikel nicht ange­dacht, da Firebug ja schon eini­gen ein Begriff ist. Vielleicht hät­te ich aber einen hin­weis geben sol­len. Ich neh­me es mir für den nächs­ten Artikel vor.

  11. Allerdings..sehr nütz­li­ches Tool. Firebug + Webdeveloper = abso­lu­te Pflicht :-)

  12. Einfach mal aus­pro­bie­ren… !

  13. Da gibt es ne Menge guter Videos bei Youtube. Das muss man echt sehen. Ich weiß aber über­haupt nicht mehr, wie ich frü­her ohne FB gear­bei­tet habe…

  14. Wär schon schön, erst­mal zu erfah­ren, war­um Firebug so toll ist ;)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.