Firebug ist eine der besten Extensions für Firefox wenn es um die Webentwicklung geht. Viele Funktionen stehen bereits zur Verfügung und ermöglichen effektives arbeiten. Doch Firebug ist nicht allein. Inzwischen steht eine ganze Meute an Extensions zur Verfügung um Firebug noch ein wenig mehr zu entlocken. Dazu gehören neben Features für die Webentwicklung auch solche zur lokalen Arbeit am Browser selbst.
Firebug Net Panel History Overlay
Macht genau das, was der überlange Name beschreibt: es ermöglicht die historische Darstellung der Net-Panel in Firebug. Hier ist die Installation bisher nur mit Mozilla-ccount möglich, da noch in der Entwicklung.
Ermöglicht die Anzeige des abgedeckten Codes anhand von Funktionen. Es lässt sich bestimmen, wie viel Prozent der Funktionen im Code genutzt werden beziehungsweise ungenutzt bleiben.
Rainbow for Firebug
Ergänzt Firebug um Syntaxhighlighting für Javascript. Sämtliche Farbeinstellungen lassen sich mittels CSS einstellen und entsprechende Voreinstellungen im- und exportieren. Die Extension befindet sich noch im Entwicklungsstadium und kann nur mit einem entsprechenden Mozilla-Account installiert werden.
Diese Erweiterung stellt, wie der Name schon vermuten lässt Funktionalitäten für Cookies zur Verfügung. Eine ausgeklügelte Erweiterung, die es nicht nur ermöglicht Cookies zu Verwalten sowie Zugriffsrechte explizit festzulegen, sondern auch eine ausführliche Darstellung bietet und Änderungen an Cookies als Logs in der Konsole festhält.
Für die Widescreen-Liebhaber und Sidebarnutzer stellt diese Erweiterung die ultimative Ergänzung dar. Es fehlt aber ein Update auf die aktuelle Version, so dass bisher nur eine Version für Firefox 2.0 zur Verfügung steht. Die Sidebar bringt, gegenüber dem einzelnen Fenster den Vorteil der stetigen Aktualisierung beim Wechseln eines Tabs mit und unterstützt im Gegensatz zur unten angelegten internen Lösung eben die Breite des Screens.
Sobald Dateien in Verbindung mit der aktuellen Webseite geändert werden, wird ein automatischer Browser-Refresh durchgeführt. Die Extension benötigt zusätzlich neben Firebug auch einen Filesystem Monitor, welcher sowohl für Windows, als auch für Mac OS X zur Verfügung steht.
Analysiert die Geschwindigkeit einer Seite und meldet, welche Kriterien nach Yahoos Regeln für hochperformante Webseiten zu einer langsamen Geschwindigkeit der Seite führen. In einem Firebug Panel werden dazu entsprechende Hinweise gegeben.
Ein weiteres Tool zur Geschwindigkeitsmessung stellt diese Erweiterung zur Verfügung. Es ergänzt Firebug um ein Panel zur Visualisierung von Messdaten der Jiffy-Web-Suite (Javascript Library), welche ermöglicht die Lade- und Renderingzeiten einzelner Elemente zu bestimmen.
FirePHP
Eine grandiose Erweiterung, welche die Konsole um das Loggen von PHP-Fehlern erweitert. Benötigt wird dafür zusätzlich eine bereitgestellte Library, wobei diese auch für Frameworks zur Verfügung steht und andernfalls ein offenes Protokoll für den Eigenbau zur Verfügung steht. FirePHP ist damit allerdings nicht nur auf PHP beschränkt, eine Entwicklung für andere serverseitige Skriptsprachen lässt sich realisieren.
Das Tool ist vor allem für die AJAX-Entwicklung gedacht.
Fireclipse
Dieses Open-Source-Projekt stellt eine Verbindung zwischen Firebug und dem Eclipse-Editor bereit. So können beispielsweise Fehlermeldungen aus der Konsole zu Eclipse umgeleitet werden und innerhalb von Eclipse verarbeitet werden. Zusätzlich steht ein Eclipse-Panel innerhalb von Firebug zur Verfügung.
Zusätzlich zur Firefox-/Firebug-Extension wird ein Plugin für Eclipse benötigt.
Drupal For Firebug
Stellt ähnlich den beiden vorhergehenden Extensions eine Debugging-Plattform mittels einer Library zur Verfügung. Das anvisierte System Drupal soll dabei über die Library Rückmeldungen zu SQL-Abfragen, Errormeldungen Objekten und mehr liefern. Benötigt wird zusätzlich die genannte Library und der Mozilla-Account.
Die Erweiterung ermöglicht es ein fertiges Design in einer Bilddatei über ein entwickeltes Html-Konstrukt zu legen und so pixelgenau Fehler zu finden und Korrekturen vorzunehmen. Dabei können mehrere Bilder gleichzeitig über die Seite gelegt werden und sowohl die Durchlässigkeit als auch die genaue Ausrichtung nachjustiert werden.
Firequark
Die Erweiterung ersetzt das in Firebug integrierte XPath mit einem alternativen CSS Selector, wobei ein paar Elemente ergänzt werden. Nützlich wird diese Erweiterung, wenn mit (X)Html-Dokumenten gearbeitet wird, da Fehler die Firefox erzeugt ignoriert werden. Wichtig ist, dass diese Extension nicht als solche in Erscheinung tritt, sondern Firebug überschreibt.
Erweitert Firebug um den Blick unter die Chrome-Haube von Firefox, der installierten Extensions und sogar Firebug selbst. Chrome-Elemente und Funktionen lassen sich analysieren und on-the-run verändern. Diese Extension ist eher für die Entwicklung selbiger gedacht und nur eingeschränkt für andere Zwecke einsetzbar. Einen ähnlichen Weg geht das von den Firebug-Developern angestoßene Projekt Chromebug, welches sich als Firebug für Firefox-Extensions versteht.
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.
Wär schon schön, erstmal zu erfahren, warum Firebug so toll ist ;)
[...] für die von Webentwicklern hoch geschätzte Firefoxerweiterung, Firebug findet sich im Blog vom Dr. Web Magazin. Florian Fiegel beschreibt über 10 nützliche Zusatztools, mit Hilfe derer sich Firebug noch [...]
Da gibt es ne Menge guter Videos bei Youtube. Das muss man echt sehen. Ich weiß aber überhaupt nicht mehr, wie ich früher ohne FB gearbeitet habe…
Einfach mal ausprobieren… !
Allerdings..sehr nützliches Tool. Firebug + Webdeveloper = absolute Pflicht :-)
@Sarah: Das war für diesen Artikel nicht angedacht, da Firebug ja schon einigen ein Begriff ist. Vielleicht hätte ich aber einen hinweis geben sollen. Ich nehme es mir für den nächsten Artikel vor.
Stürzt nur häufig und gerne ab, vor allem im FF3. Wenn es mal läuft, geht’s oft auf die performence
Sarah, die Fage nach dem “Wozu Firebug” erklärt Florian sehr schön in seiner Einleitung:
LG
Dominik
“Eclipse-Editor”
Ich bin hauptberuflich Java Entwickler und ich würde es nicht wagen, die beste Entwicklungsumgebung aller Zeiten, als “Editor” zu bezeichnen ;-)
Hm, vielleicht ist das wirklich ein wenig zu schmal auf den ersten Blick, aber es wird ja nunmal nicht die gesamte Entwicklungsumgebung eingebunden, sondern eben nur ein Element beziehungsweise eine kleine Zahl an Elementen.
Ich denke nicht, dass es da so falsch ist, wenn man auf den Eclipse-Editor hinweist.
[...] Dr. Web gibt es eine interessante Liste mit Erweiterungen für den nützlichen Käfer, die einen Blick definitiv wert ist. Im Moment probiere ich noch mit [...]
Firebug ist für Webdeveloper eine der besten Extensions und nützlichsten Tools für Firefox. Feinfach perfekt.
Andreas
[...] Liste mit Firebug Extensions [...]
[...] FireBug Mit diesem Plugin lassen sich Quellcodes (HTML, CSS, Ajax oder JavaScript) analysieren und editieren. Zudem findet Firebug die enthaltenen Fehler im Quelltext und zeigt sofort potenzielle Fehler an. Auch die DOM-Struktur wird unter die Lupe genommen. Wem diese Funktionen nicht ausreichen, der kann Firebug noch erweitern. [...]
Firebug ist genial und u.a. genau der Grund weswegen wie Firefox lieben. Jeder der sich etwas mehr mit Browser beschäftigt, anstatt nur an der Oberfläche zu kratzen weiß das auch.
[...] von Elementen und kontrolliert ein- und ausgehenden Traffic. Von Florial Fiegel stammt der Artikel Mehr Power für Firebug, der Erweiterungen für die Erweiterung vorstellt. Zum Beispiel FirePHP für die AJAX-Entwicklung [...]
Neben “Rainbow for Firebug” (s.o.) gibt es jetzt “FireRainbow” (https://addons.mozilla.org/de/firefox/addon/9603) für Firebug 1.3.
[...] Mehr zu den Extensions für das Addon Firebug [...]
vielleicht mal links aktualisieren und so?
ansonsten schöner, aber leider veralteter Beitrag :(
Stimm, den Beitrag könnten man inzwischen mal wieder aktualisieren. Ich kümmere mich drum! :)