Sie sind hier:
 

Firebug: Die besten Plug-Ins für das Plug-In
Firefox-Add-Ons vorgestellt

von Christoph Scholl Uhr veröffentlicht

Diesen Artikel weiterempfehlen
SHARES

Wem die Funktionen von Firebug nicht ausreichen, hat die Möglichkeit, das Plug-In mit weiteren Plug-Ins und Add-Ons aufzurüsten. Netzwelt stellt die besten Erweiterungen für Firebug vor.

Für viele Webentwickler gehört das Firefox-Plug-In "Firebug" längst zum Arbeitsalltag. Mit dem praktischen Tool können unter anderem HTML, CSS und JavaScript jeder beliebigen Webseite analysiert werden. Der Funktionsumfang von Firebug ist dabei recht beachtlich. Wem die Funktionen jedoch nicht ausreichen, hat zudem die Möglichkeit, das Plug-In mit weiteren Plug-Ins und Add-Ons aufzurüsten. Netzwelt stellt die besten Erweiterungen für Firebug vor:

Performance messen: YSlow und PageSpeed

Wer mit der Geschwindigkeit seiner Webseite nicht zufrieden ist und wissen möchte, woran dies liegen könnte, kann sich mit "YSlow" auf die Fehlersuche begeben. Das kostenlose Firebug-Plug-In von Yahoo zeigt mögliche Performance-Bremsen auf dem Webserver, im JavaScript- oder CSS-Code oder der Einbindung verschiedener anderer Elemente an. Die Gesamtperformance der Webseite wird anhand eines vordefinierten Regelwerks in einer Note bewertet. So lassen sich schnell und einfach Vergleichswerte mit anderen Webseiten erstellen.

YSlow: Webseitenperformance analysieren

Ähnlich wie YSlow funktioniert auch "Page Speed" von Google. In einem "Page Speed Score" wird ein Referenzwert nach einem definierten Schlüssel angezeigt. Zudem macht das Tool zahlreiche Vorschläge, wie die Performance der jeweiligen Webseite verbessert werden könnte. Das Google ein solches Tool anbietet, kommt nicht von ungefähr: Zumindest nach offizieller Aussage des Suchmaschinenriesen ist auch die Webseitenperformance eines von zahlreichen Kriterien, nach denen die Relevanz einer Homepage aus Sicht von Google bewertet wird. Wie viel Einfluss ein schneller Seitenaufbau tatsächlich auf eine gute Position in den Google-Suchergebnissen hat, bleibt wie bei so vielem Googles Geheimnis.

Google Page Speed: Tipps zum schnelleren Seitenaufbau

Layout beeinflussen: PixelPerfect und Widerbug

Mit PixelPerfect kann in Firefox ein Overlay-Bild über eine bestehende Webseite gelegt werden. Dies ist dann interessant, wenn man beispielsweise in Photoshop eine Designvorlage erstellt hat und diese anschließend pixelgenau mittels HTML und CSS umsetzen möchte. Zum schnellen Vergleich des bereits erstellten Codes mit der Vorlagegrafik eignet sich PixelPerfect prima. Nach der Auswahl des Bildes kann die Vorlage im Browser horizontal und vertikal feinjustiert werden. Auch die Transparenz des Bildes gegenüber der Webseite kann eingestellt werden.

"Widerbug" beeinflusst zwar nicht das Layout der angezeigten Webseite, dafür jedoch das Layout des Browsers wenn Firebug eingeschaltet ist: Standardmäßig wird Firebug am unteren Rand des Browsers angezeigt. Insbesondere, wenn man sich den Quellcode einer Seite anschaut, ist oft relativ wenig (vertikaler) Platz vorhanden. Widerbug schafft Abhilfe, indem das Tool das Firefox-Browserfenster in der Mitte vertikal teilt und Firebug in der einen, die eigentliche Webseite in der anderen Hälfte anzeigt. Insbesondere User mit einem Wide-Screen-Display dürfen sich mit Widerbug so über deutlich mehr Platz freuen.

Widerbug: Mehr Platz für Firebug

Cookies auslesen und verwalten: Firecookie

Wer auf seiner Webseite Cookies einsetzt, kann diese mit Firecookie einfach und übersichtlich auflisten, verwalten und bearbeiten. Nach der Installation von FireCookie erscheint in Firebug ein neuer Reiter "Cookies", in dem alle gesetzten Cookies aufgelistet werden. Die Auflistung schließt auch Session-Cookies ein. Neben dem Bearbeiten und Löschen der angezeigten Cookies können auch neue mit Firecookie gesetzt werden. So können direkt im Browser Cookie-basierte Funktionen einer Webseite getestet werden.

Cookies verwalten und verändern: Firecookie

Nützliche Helferlein: FireRainbow, CodeBurner und Firefinder

Zwar zeigt Firebug von Haus aus auch JavaScript-Code an, ein Syntax-Coloring fehlt dabei jedoch. "FireRainbow" ändert dies nach der Installation: Im gewohnten Skript-Fenster wird der JavaScript-Code übersichtlich und mit einem Syntax-Coloring versehen ausgegeben. FireRainbow ist ein Tool, welches man vielleicht nicht unbedingt braucht, welches einem das Leben dafür jedoch etwas komfortabler macht. Gleiches gilt für "CodeBurner".

JavaScript-Syntax-Coloring mit FireRainbow

CodeBurner ist eine Kurzreferenz für HTML und CSS. Wählt man in Firebug beispielsweise ein beliebiges HTML-Element aus, kann in einem kleinen Fenster im rechten Bereich zu diesem Element eine kurze Beschreibung sowie ein passendes Code-Beispiel angezeigt werden. Mit einem Klick gelangt man zudem auf eine entsprechende Seite der Online-Referenz von Sitepoint.com, wo ausführlichere Informationen zur Verfügung stehen.

Ein ebenfalls kleines aber sehr nützliches Tool ist FireFinder. Insbesondere bei sehr umfangreichen HTML-Dokumenten hilft die Firebug-Extension beim Suchen und Finden einzelner HTML-Elemente, welche mit einer manuellen Suche nur schwer zu finden wären. Dabei können einzelne Tags genauso eingegeben werden, wie beispielsweise CSS-Klassen. Wird der Name einer CSS-Klasse eingegeben, sucht FireFinder alle HTML-Elemente, denen die entsprechende Klasse zugewiesen wurde. Parallel zu einer Auflistung im Firebug-Fenster markiert FireFinder die Elemente auch auf der angezeigten Webseite mit einem roten Rahmen.

Firefinder: HTML-Elemente leicht finden und anzeigen
Kommentare zu diesem Artikel

Wem die Funktionen von Firebug nicht ausreichen, hat die Möglichkeit, das Plug-In mit weiteren Plug-Ins und Add-Ons aufzurüsten. Netzwelt stellt die besten Erweiterungen für Firebug vor.

Deine Meinung ist gefragt. Diskutiere im Forum zu diesem Artikel.

Jetzt diskutieren!

DSL- & LTE-Speedtest

Testen Sie mit unserem Speedtest Ihre tatsächliche DSL- oder LTE-Geschwindigkeit. Test auch mit Smartphone und Tablet möglich.

Jetzt Testen!

Der große Android-Update-Fahrplan

Welche Android-Version ist für mein Smartphone oder Tablet-Computer aktuell? Der große Android-Update-Fahrplan bringt Licht ins Dickicht der Versionen.

Jetzt ansehen!

article
27346
Firebug: Die besten Plug-Ins für das Plug-In
Firebug: Die besten Plug-Ins für das Plug-In
Das beliebte Firefox-Plug-In Firebug lässt sich durch zahlreiche Add-Ons erweitern. Netzwelt stellt die besten Erweiterungen für Firebug vor
http://www.netzwelt.de/news/84404-firebug-besten-plug-ins-plug.html
2010-10-20 14:36:00
http://img.netzwelt.de/dw120_dh90_sw0_sh0_sx0_sy0_sr4x3_nu0/article/2010/yslow-webseitenperformance-analysieren3118.jpg
News
Firebug: Die besten Plug-Ins für das Plug-In