Webdesign

Firefox: Test- und Entwicklungstools für Webentwickler

1. Dezember 2008
von

Der Browser ist auch eine Werkstatt. Webentwickler finden im Arsenal der Erweiterungen alles, was man braucht oder auch nur brauchen könnte. Firefox lässt sich zur ultimativen Werkzeugkiste ausbauen. Und nahezu alles ist kostenlos. Die Zusatzprogramme suchen Fehler, machen Strukturen transparent, extrahieren Farben, messen Elemente aus, geben Tipps für die Zugänglichkeit, schießen Bildschirmfotos, manipulieren URLs, zeichnen Surf- und Testsitzungen auf oder erstellen Blindtext. Eine beachtliche Anzahl widmet sich CSS.

Alle zusammen braucht man glücklicherweise nicht. Das würde nicht nur den Browser langsamer machen, er ginge auch arg unübersichtlich zu. Denn die Erweiterungen belegen Platz in der Statuszeile, dem Kontextmenü, der Navigationsleiste (teilweise müssen sie von Hand dort eingefügt werden) oder gar als eigenständige Leiste. Angesichts der Fülle fällt die Wahl schwer. Einige dieser Plugins haben wir bereits früher vorgestellt oder kurz erwähnt.

Screenshot

Die Icons einiger Erweiterungen in der Navigationsleiste des Firefox. Abgebildet sind: Aardvard, Javascript Debugger, Codetech, Firebug, CSS Viewer, URIParams, MeazureIT, Inspect Element (Firebug), Dummy Lipsum, Web Developer Toolbar.

Firebug
Ohne Zweifel gilt Firebug den meisten Entwicklern als das beste und mächtigste Tool überhaupt. Unverzichtbar und deshalb zuerst genannt. Firebug hilft beim Beseitigen von Fehlern in Javascript, HTML, CSS, DHTML und AJAX. Die Statuszeile des Browsers informiert gut sichtbar über eventuell vorhandene Probleme. Mit einem Klick wird eine Konsole in Form eines Fensters unter die jeweils aktive Seite eingeblendet, welches detaillierte Auskünfte gibt. Einzelne Seitenelemente können alternativ direkt mit der Maus angefahren und analysiert werden. Firebug ermöglicht das Live-Editieren 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 oder XRefresh, das beim coden automatisch die Ansicht des Browsers aktualisiert.

Screenshot

YSlow (Firefox mit Firebug)
Eine weitere dieser Firebug-Erweiterungen ist YSlow, das von Yahoo kommt. Es führt Performance-Tests für beliebige Seiten durch, liefert Tipps und versucht ein Ranking.

YSlow Yahoo

Web Developer Toolbar
Eine der ältesten und erfolgreichsten Erweiterungen – jedenfalls dann, wenn es um den Webentwickler geht. Firefox wird um eine zusätzliche Leiste bereichert, das braucht Platz, lohnt sich aber in jedem Fall. Schier unerschöpflich erscheint das Angebot. Unverzichtbare Basisfunktionien sind etwa das Ausschalten von Grafiken, PopUp-Blocker, Farben, Java, Javascript, Bilder, Weiterleitungen, Cache, Cookies oder CSS. Die Toolbar hilft beim Umgang mit Tabellen, Frames und Stylessheets. Macht Elemente und Objekte auf Wunsch sichtbar und erlaubt sogar das Editieren von HTML. Die Leiste ist stets auskunftsfreudig und liefert Daten zu Formularen, Bilder, Styles und mehr. Es gibt Übersetzungen in zahlreiche Sprachen.

Screenshot

Die Leiste zeigt, was sie kann.

Screenshot

Funktion: Farben extrahieren.

Screenshot

Funktion: Outline Links without Title-Attributes.

HTML Tidy
Der HTML-Validator für den Browser. Tidy wirkt bereits in der Statusleiste und weist auf Fehler und Warnungen hin.

Screenshot

Blick auf die Statuszeile: Tidy neben Firebug und Obstrusive Javascript Checker

Der Blick in den Quellcode zeigt jetzt 2 zusätzliche Fenster, die exakt über die gefundenen Fehler Aufschluss geben. Dank Tidy ist man nicht auf Online-Services angewiesen.

Screenshot

Tamper Data
Zeigt eingehenden und ausgehenden Traffic und was dazwischen passiert. Eine hilfreiche Besprechung der Erweiterung ist TamperData – Header unter der Lupe. Beispielsweise lässt sich mit TamperData prüfen, ob die
gzip-Komprimierung funktioniert, ob Weiterleitungen sich verhalten, wie gedacht, oder ob Formulare die richtigen
POST-Variablen senden.

Screenshot

CSSViewer Der CSSViewer ist eine Erleichterung, wenn es um die Analyse von eigenen oder fremden Webseiten geht. Einfach ein beliebiges Element mit der Maus berühren und umgehend erscheinen sämtliche zugehörige Informationen in einem PopUp-Fenster. Das ist angenehmer als das Studium einer schnöden und nicht immer aufgeräumten CSS-Datei. Es empfiehlt sich, das mitgelieferte Icon auf eine der Menü-Leisten zu schieben, um die CSS-Hilfe bei Bedarf bequem an- und abschalten zu können. Damit der Viewer arbeiten kann, muss sein Icon in eine der Browser-Listen geschoben werden. Die Erweiterung arbeitet mit “FF 3″ und älteren Versionen zusammen.

Screenshot

Venkman JavaScript Debugger
Diese Erweiterung findet Fehler in Javascripts und hilft bei deren Bereinigung. Mehr über Venkman.

Screenshot

ColorZilla
Diese Erweiterung liefert einen Colorpicker. Das ist ein Werkzeug um Farben zu identifizieren. Dies geschieht in der linke Ecke der Statusleiste. Man bekommt HEX-Werte geliefert und erkennt die zugehörigen CSS-Anweisungen. Außerdem kommt das Kontextmenü zum Einsatz. ColorZilla speichert gefundene Farben auf Wunsch in einer eigenen Bookmarkliste.

Screenshot

Colour Contrast Analyser Der Firefox Colour Contrast Analyser gibt Auskunft über die verwendeten Farbkontraste und schlägt Alarm, wenn Probleme drohen – was ziemlich häufig der Fall ist. Einmal installiert, erreicht man die Analyse über das Kontextmenü oder die “Extras”.

FireShot (auch IE)
FireShot fotografiert auf Wunsch den sichtbaren oder den gesamten scrollbaren Bereich einer Seite. Die Bedienung erfolgt über das Kontextmenü oder die wenig schöne Icon-Leiste in der Statuszeile, die abschaltbar ist. Es gibt eine kostenpflichtige Pro-Version, mit der man Screenshots wie in einem Grafikprogramm bearbeiten und beschriften kann.
FireShot funktioniert auch mit den Internet Explorer.

Aardvark
Liefert Daten zu dem Element, über dem sich die Maus jeweils befindet. Prima, um die Struktur einer Seite zu verstehen. Aarvark (zu Deutsch: Erdferkel) versteht auch einige Tastatusbefehle, so können zum Beispiel die gesichteten Bereiche eingefärbt werden. Früher unverzichtbar, ist die Erweiterung hinter der Web Developer Toolbar zurückgefallen.

Screenshot

MeasureIT
Besonderes Talent: Seitenbereiche vermessen und ein Lineal bereitstellen.

YSlow Yahoo

Dummy Lipsum
Ein Plugin dieser Art ist purer Luxus. Das Ding kann nämlich nicht mehr als den so genannten Blindtext erzeugen. Den könnte man sich auch an eine geeignete Stelle kopieren oder ihn, wenn man ihn oft braucht, auswendig lernen. Mit Dummy Lipsum ist man aber schneller.Screenshot

Xray (auch IE, Safari)
Xray ist keine Erweiterung, sondern ein Bookmarklet. Selbiges einfach in die Lesezeichenleiste ziehen und bei Bedarf anklicken. Xray (zu Deutsch “Röntgen”) liefert Daten über jedes beliebige Element. Einfach draufklicken während das Bookmarklet aktiv ist.

Screenshot

Dust-Me Selectors
Auch eine nützliche Sache, Dust-me findet ungenutzt Selektoren auf einer Seite. Alternativ sogar auf einer ganzen Website, was dann natürlich dauern kann. Die Ergebnise können auch gespeichert und mit einer anderen Seite verglichen werden. Verschiedene Möglichkeiten zur Konfiguration sind ebenfalls vorhanden. Ein kleines Kontroll-Icon findet sich in der Statusleiste.

Screenshot

IE Tab
Lässt den Internet Explorer in Firefox-Reitern laufen. Andere Möglichkeit: IE View Lite, hier öffnet sich die gerade aufgerufene Seite dann im IE. Gibt es auch für die Arbeit mit Opera und Safari.

WAVE
Diese komplette Browserleiste testet Seiten in Bezug auf Zugänglichkeit (Accessibility). Dazu wird die Seite mit Hinweisen und Symbolen versehen, die auf eine Vielzahl von möglichen Problemen hinweisen. Etwa die Behandlung von ALT- und TITLE-Attributen, Formularauszeichnungen, Überschriften, Bildern.

YSlow Yahoo

Außerdem gibt es eine Strukturansicht und eine “Nur-Text-Ansicht”. Auf jeden Fall nützlich, leider verbraucht die Leiste einigen Platz. Das ist besonders schmerzhaft, wenn man die Web-Developer-Toolbar oder etwas anderes installiert hat. Aber halt, auch Leisten lassen sich abschalten oder verbergen. Das Kontextmenü hilft anschließend weiter. Die Abbildung zeigt einen Ausschnitt der Toolbar.

YSlow Yahoo

Accessibility Extension Ähnlich WAVE handelt es sich auch hier um eine komplette Leiste. Diese hier, entwickelt vom Illinois Center for Information Technology Accessibility (iCITA), wirkt jedoch moderner und bietet auch mehr. Mit Hilfe der Report-Funktion können einzelne Webseiten auf Accessibility-Schwachstellen überprüft werden. Die Liste der Fundstellen lässt sich nach dem Schweregrad sortieren und zum besseren Abarbeiten in eine speicherbare HTML-Seite überführen. Ist der Farbkontrast ausreichend? Im Menü “Style” gibt es eine Funktion zum Aufspüren von Seitenbereichen mit einem zu niedrigen Kontrast. Die Accessibility Extension klinkt sich in die Navigationsleiste ein und steht auch dort zur Verfügung. Mehr über die Erweiterung auf Englisch.

Internet-Accessibility

Selenium IDE
Dieses Werkzeug versieht Firefox mit einer Makrofunktion. Abläufe und Aktionen im Browser können aufgezeichnet und später erneut ausgelöst werden. Damit lässt sich schon mal allerhand anfangen, auch jenseits der Web-Entwicklung. Thorsten Biedenkapp hat einen kleinen Vortrag ins Netz gestellt Browsergestütztes Testen von Webinhalten mit Selenium IDE. Die Sache ist also etwas kompliziert, aber unter Umständen auch lohnend.

Screenshot

HttpFox
Protokolliert eingehenden und ausgehenden Traffic zwischen Browser und Webserver. Headers, Cookies, POST Parameter und Querystrings. Aktiviert wird das Plugin über ein Icon in der Statusleiste. Die Protokolle sind als Konsole im unteren Browserbereich zu sehen, ähnlich wie bei Firebug.

Screenshot

Fangs
Simuliert einen Screenreader. Man erhält den Text der Ausgabe, die vorgelesen wird – Fangs liest nicht selbst, er zeigt nur. Nach der Installation einfach über das Kontextmenü aktivieren.

Screenshot

Pencil
Eher ein vollständiges Programm denn ein Plugin. Nichtsdestotrotz wird Pencil über Firefox installiert und aufgerufen. Das Programm erlaubt Organigramme und GUI-Entwürfe, ähnlich wie etwa die Software Visio.

Screenshot

Obtrusive JavaScript Checker
Wo wirkt das Script? Diese kleine Erweiterung macht auf Wunsch Javascript-Links und Inline-Events sichtbar.

URIParams
POST und GET Parameter von URLs komfortabel bearbeiten. Die Erweiterung öffnet eine Seitenleiste links.

Screenshot

Codetch
Ein kompletter Editor, den man aus Firefox heraus aufrufen kann. Editoren gibt es eigentlich schon genug.

DOM Inspector
Elemente einer Webseite finden, untersuchen, verändern oder löschen, sozusagen die Live-Manipulation einer beliebigen Webseite. Es gibt eine deutschsprachige Einführung unter dem Titel Stichpunkt Firefox: DOM Inspector Tutorial.

Screenshot

Kostenpflichtige Erweiterungen

View Source Chart Die Quellcode-Ansicht einer Seite ist für Webworker nicht selten interessanter als Layout und Inhalt zusammen. Firefox hat wegen einiger Extensions in dieser Hinsicht mehr zu bieten als die Konkurrenz. Jennifer Maddens “View Rendered Source Chart” bringt Farbe ins Spiel. Struktur und Hierachie können Dank der bunten Flächen auf einen Blick erfasst werden. Auch komplexe Dokumente verlieren so ihren Schrecken. Die gibt es für ältere Versionen und FF3, letzteres ist jedoch kostenpflichtig.

Ältere Erweiterungen, die nicht mit Firefox 3 kompatibel sind

Erweiterungen für andere Browser

Weitere Artikel und Quellen

Reine Stand-alone-Programme, die Grenzen sind manchmal fließend, wurden für diesem Beitrag nicht berücksichtigt. ™

Sven ist der Erfinder des Dr. Web Magazins, Autor und Herausgeber diverser Fachbücher. Als Webdesigner und Texter früher freiberuflich für verschiedene Unternehmen und Verlage tätig. Jetzt Vorstand und Mitgründer der Smashing Media AG.

19 Kommentare zu „Firefox: Test- und Entwicklungstools für Webentwickler
  1. Tom am 1. Dezember 2008 um 00:53

    na das nenn ich eine ausführliche Liste .. :)

  2. Chris am 1. Dezember 2008 um 09:23

    Da muss ich Tom zustimmen! Vorallem WAVE werde ich mir mal näher ansehen müssen, das kannte ich bereits noch nicht.

  3. Manuel Schmöllerl am 1. Dezember 2008 um 09:53

    Die meisten Add-ons kannte ich schon. Einige – wie Fireshot – gibt es leider nur für die Windows-Version.
    WAVE, Accessibility Extension und Fangs finde ich sehr interessant.

  4. […] Firefox: Test- und Entwicklungstools für Webentwickler | bei Dr. Web Magazin. […]

  5. Franky am 1. Dezember 2008 um 10:11

    Schöner Artikel. Ein Entwicklerleben ohne Firebug ist für mich inzwischen undenkbar :)

    P.S.
    Kleiner Schreibfehler “die nicht mit Firefoc 3 kompatibel sind”..sollte wohl “x” sein oder?

  6. David am 1. Dezember 2008 um 10:17

    Ein zwei interessante Sachen dabei neben denen die man schon kannte, danke!

  7. […] Firefox: Top-Entwicklungstools von Dr. Web Magazin […]

  8. Firefox-Developer-AddOns « Cyberer’s Weblog am 1. Dezember 2008 um 21:22

    […] Das Dr. Web-Blog bringt eine neue Firefox-Extension-Liste und jedes Einzelne ist es wert, installiert zu werden. Bei so vielen Plugins bietet es sich an, […]

  9. Willi am 1. Dezember 2008 um 21:28

    Super, kommt gerade zur richtigen Zeit. Bin im Moment dabei ein eigenes WordPress Theme auf die Beine zu stellen und da werde ich sicherlich das ein oder andere ganz gut gebrauchen können. Vielen Dank für den guten Artikel.

  10. Gabriel am 2. Dezember 2008 um 09:27

    Super Liste! Das Eine oder Andere kannte man schon, aber es sind auch ein paar neue Interessante Erweiterungen dabei!

  11. […] Dr. Web gibt es eine umfassende Übersicht von Firefox-Plugins für Web-Entwickler. Die Tools sind ein […]

  12. […] drweb.de gibt es eine sehr gute Liste mit Add-on die Webentwicklern bei der täglichen Arbeit behilflich […]

  13. […] Firefox: Test- und Entwicklungstools für Webentwickler | Dr. Web Magazin […]

  14. […] Firefox: Test- und Entwicklungstools für Webentwickler | Dr. Web Magazin […]

  15. 50 Extremely Useful And Powerful CSS Tools am 29. Dezember 2008 um 10:57

    […] Firefox: Test- und Entwicklungstools für Webentwickler | Dr. Web Magazin […]

  16. 50 herramientas útiles para maquetar con CSS am 7. Februar 2009 um 11:16

    […] Firefox: Test- und Entwicklungstools für Webentwickler | Dr. Web Magazin […]

  17. Architekt Kraemer am 27. Juni 2009 um 06:02

    Super Sache mit den Firefox Plugins, insbesondere Firebug.Bisher war ich ja sehr konservativ und habe nur mit dem IE gesurft der ohnehin in Windows vorhanden ist. Dank der von euch beschriebenen Helferlein verstehe ich jetzt die Fehler auf meiner Website.
    Vielen Dank für den guten Artikel, eine sehr nützliche Website

  18. […] Firefox: Test- und Entwicklungstools für Webentwickler | Dr. Web Magazin […]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!