Bekanntermaßen ist Firefox, was Erweiterungen angeht, der maßgebliche Browser. So kann man sich auf https://addons.mozilla.org eine Unzahl an zusätzlichen Features suchen und Firefox damit nach eigenem Geschmack verbessern. Eine für Webentwickler unverzichtbare Erweiterung ist Firebug.

Zu dieser Erweiterung muss man nicht viel sagen, sollte jedem bekannt sein. Wenn nicht, ist eine Installation einfach mal Pflicht! Irgendwie extrem, aber auch gleichermaßen praktisch finde ich, dass es dann auch Erweiterungen für die Erweiterungen gibt. So werden gerade für Firebug so einige zusätzliche Tools angeboten.

Auf den nächsten Seiten sehen wir uns mal einige dieser Firebug – Erweiterungen an.

FirePHP und FirePython

FirePHP

Wenn man sich fragt: „Was steht eigentlich in diesem Array?“ ist FirePHP zur Stelle und weiß die Antwort. FirePHP kann aber weit mehr, als den Inhalt von Arrays ausgeben. Es gibt Euch das perfekt PHP Debugging Tool an die Hand. Print_r(), echo und var_dump() kann man sich nun also schenken. Praktisch!

FirePython

Ihr benötigt jemanden, der bei Python mitschreibt? Mit FirePython bekommt Ihr noch einen zusätzlichen Käfer in Euer Firebug.

FireRainbow

Syntax Highlighting für HTML, CSS, und Javascript. FireRainbow, der Übersichtlichkeit wegen. Wirklich ausgesprochen nützlich. Eigentlich verwunderlich, dass dies kein normales Feature von Firebug ist, denn jeder Editor kann das inzwischen und jeder Entwickler arbeitet nicht mehr ohne.

Wenn Ihr Firefox in der Version 3 nutzt, so achtet darauf, Euch Rainbow in der V0.9 zu installieren, sonst gibt es nichts zu sehen.

FireScope

Entspricht dieses HTML Element gleich nochmal den W3C Standards? Und wie hieß diese bestimmte CSS Eigenschaft eigentlich noch gleich? Referenzen gibt’s im Netz jede Menge. Besser ist natürlich, eine schnelle Nachschlagemöglichkeit zur Hand zu haben. Hier springt FireScope in die Bresche.

Mit Hilfe der Sitepoint Datenbank zeigt Euch FireScope unter anderem, wie es bei den verwendeten HMTL Tags mit der Browserunterstützung aussieht oder wie eine CSS Eigenschaft anzuwenden ist.

CSS_Usage

Um zu sehen, welche CSS Regeln auf der aktuellen Seite Anwendung finden, installiert Ihr Euch die Erweiterung CSS Usage. Wird ein Selektor in grün angezeigt, so ist er in Verwendung, rot zeigt Euch, dass der Selektor nicht zum Tragen kommt.

Ist nützlich, wenn Ihr auf der Suche nach Kaskadierungsproblemen seit oder Eurer CSS verkleinern wollt.

FirebugCodeCoverage

Jquery geladen? Geile Funktionen, oder? 🙂

Aber benötigen wir die wirklich alle? FirebugCodeCoverage beantwortet die Frage und zeigt uns, wie viel Prozent der geladenen Funktionen wir überhaupt nutzen. Es werden auch die Funktionen angezeigt, die nicht genutzt werden, so dass man seine Bibliothek verkleinern kann. Eine Klasse Erweiterung, wenn man seine Seiten beschleunigen, Traffic sparen und dem Besucher ein Freude machen möchte.

Leider gibt es, soweit ich das erkennen kann, keine Firefox 3 Variante der Erweiterung. Hier gilt es, zu beobachten.

InlineCodeFinder

Findet Inline Styles (CSS), javascript: links und Inline JavaScript events. Diese werden durch einen Rahmen in jeweils unterschiedlichen Farben markiert. Für mich in erster Linie wegen den Inline Styles interessant. Beim Überfahren der jeweiligen Objekte mit der Maus werden durch den Inline Code Finder weitere Informationen angezeigt. Was passiert bei onclick? Welche Styles kommen zur Anwendung? Ganz gut für einen schnellen Überblick.

Es gibt eine Firebug und eine Standalone Version der Erweiterung. Die einzelnen Marker lassen sich in beiden Versionen gezielt an- und abschalten. So ist eventuell der Javaentwickler nicht an den Styles interessiert und umgekehrt. Man kann die Erweiterung entweder automatisch laufen lassen oder man ruft sie bei Bedarf per Hotkey auf.

Firecookie

Firecookie ist ein Cookiemanager für Firebug. Ihr könnt neue Cookies erstellen, vorhandene Cookies löschen, Euch alle Cookies der aktuellen Seite anzeigen lassen, die Berechtigungen bearbeiten und so weiter.

Setz dich. Nimm dir ’n Keks, machs dir schön bequem. Du Arsch!Monty Python’s Life of Brian

Jiffy und YSlow

Jiffy

Performance ist alles. Das weiß auch Jiffy. Mit dieser Erweiterung für Eurer Firebug könnt Ihr Ausführungszeiten von Javascript messen.

YSlow

Wo wir doch schon bei Performance sind: YSlow – analysiert Eure Seite nach den Yahoo High Performance-Regeln und sagt Euch, was Ihr falsch macht. 🙂

Pixel Perfect

Schonmal eine Layoutvorgabe bekommen, die punktgenau umgesetzt werden sollte? Ja, stimmt, über den Sinn einer solchen Vorgabe kann man sich streiten. Der gute Entwickler erklärt dem Auftraggeber in diesem Fall mal den Unterschied zwischen Printmedien und dem Internet. Wenn der Auftraggeber aber dennoch auf eine haargenaue Umsetzung seiner Bildvorlage besteht, kommt Pixel Perfekt als Erweiterung des Firefox, genau gesagt des Firebug, genau richtig.

Auf der Webseite von Pixel Perfect könnt Ihr Euch vorab schon mal ein Video für die Erweiterung in Aktion ansehen.

FireSymfony und Drupal For Firebug

FireSymfony

Für die Frameworker unter Euch gibt es FireSymfony, ein spezielles Symfony Plugin für den Firebug.

Drupal For Firebug

Auch eine Drupal Variante steht zur Verfügung. Drupal For Firebug bietet spezielles Debugging für das bekannte CMS.

Widerbug: Widescreen Firebug

Wenn ihr einen Widescreenmonitor nutzt, so ist es sicher besser, Firebug auf der rechten Browserseite zu installieren. Eine optimale Einteilung der Arbeitsfläche. Die kleine Erweiterung Widerbug hilft Euch, diesen Wunsch zu realisieren.

SenSEO

Nein, nein, nicht die Kaffeemaschine. Suchmaschinenoptimierung. Alle noch so tollen Optimierungen an der Seite bringen natürlich wenig, wenn sich niemand das Resultat ansieht. Um auch gefunden zu werden, benötigt man zwar nicht zwingend eine Suchmaschinenoptimierung, aber schaden kann sie jedenfalls nicht. Was aber galt es bei SEO nochmal zu beachten? SenSEO hilft, keinen Punkt zu vergessen. Die vorliegende Seite wird nach SEO Gesichtspunkten analysiert und Ihr erhaltet in Folge diverse Hinweise zum Verbessern der Seite. Die Erweiterung für Firefox orientiert sich an den Google Webmaster Guidelines.

So, das war’s. 15 Firebug Erweiterungen auf einen Streich. Wenn Euch noch andere Erweiterungen einfallen, so habt Ihr ja die Kommentare. Einfach fleissig posten. Mich freut’s, die andern Leser freut’s. Alle sind happy.