Mehr Power für Firebug

Kein Beitragsbild

Florian Fiegel

Seit 2008 freier Webworker mit Schwerpunkt auf journalistischer Berichterstattung und (Online-)PR. Täglich...

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 Logo

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.

Net Panel History Overlay Screenshot 1

Firebug Code Coverage

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 Screenshot

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

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.

Firecookie

Firecookie Logo

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.

Widerbug

Widerbug Logo

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.

XRefresh

XRefresh Logo

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.

YSlow

YSlow Screenshot

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.

Jiffy

Jiffy Screenshot

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.

Logo FirePHP

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.

Pixel Perfect

Pixel Perfect Logo

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.

Live Coder

Screenshot Live Coder

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.

Sortiert nach:   neueste | älteste | beste Bewertung
Sarah
Gast

Wär schon schön, erstmal zu erfahren, warum Firebug so toll ist ;)

trackback

[…] 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 […]

Herr Voß
Gast

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…

Moritz
Gast

Einfach mal ausprobieren… !

Kahmoon
Gast

Allerdings..sehr nützliches Tool. Firebug + Webdeveloper = absolute Pflicht :-)

Peter
Gast

Stürzt nur häufig und gerne ab, vor allem im FF3. Wenn es mal läuft, geht’s oft auf die performence

Dominik
Gast

Sarah, die Fage nach dem “Wozu Firebug” erklärt Florian sehr schön in seiner Einleitung:

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

LG
Dominik

Andreas
Gast

“Eclipse-Editor”
Ich bin hauptberuflich Java Entwickler und ich würde es nicht wagen, die beste Entwicklungsumgebung aller Zeiten, als “Editor” zu bezeichnen ;-)

trackback

[…] 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 […]

Andreas Seehase
Gast

Firebug ist für Webdeveloper eine der besten Extensions und nützlichsten Tools für Firefox. Feinfach perfekt.

Andreas

trackback

[…] 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. […]

Flug
Gast

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.

trackback

[…] 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 […]

Frank Ralf
Gast

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

trackback

[…] Mehr zu den Extensions für das Addon Firebug […]

stina
Gast

vielleicht mal links aktualisieren und so?
ansonsten schöner, aber leider veralteter Beitrag :(

wpDiscuz