200808Dez

Firefox: Entwicklerwerkzeuge

Inzwischen dürfte nahezu jeder Webentwickler seine Seiten mit den großartigen Extensions von Firefox analysieren und korrigieren. Natürlich muss der fertige Code in der Regel weiterhin auf andere Browser optimiert werden, jedoch bieten die Entwicklerwerkzeuge neben der Analyse von HTML-Code auch exzellente Möglichkeiten, JavaScript-Fehler aufzuspüren und die Ladezeiten der Seite zu beschleunigen. Das direkte Arbeiten an der Seite im Browser erleichtert den Test- bzw. Korrekturprozess ungemein.
Neben reinen Quellcode-Werkzeugen gibt es auch eine Reihe von kleinen Helfern, die beispielsweise das exakte Vermessen Anpassen von Pixeln im Browser erlauben. Schließlich lassen sich auch RGB-Werte über einen Farbwähler ermitteln, was ebenfalls eine Erleichterung beim Bearbeiten von CSS-Code darstellt.
Ich habe eine kleine Liste der Extensions erstellt, die ich momentan zum Entwickeln von Websites benutze. Die Liste ist nun auch als Sammlung bei Mozilla verfügbar.

Firebug

Firebug
Mit Firebug wurde wohl das populärste Entwicklerwerkzeug für Firefox geschaffen. Die Extension bietet alles, was das Webentwickler-Herz höher schlagen lässt: Element-Highlighting, eine Baumstruktur, JavaScript-Debugging, CSS-Bearbeitung, DOM-Analyse und vieles mehr. Alle Attribute im HTML- und CSS-Code können live editiert/entfernt/deaktiviert werden und bei Bedarf kann sogar der eigentliche Inhalt der Seite editiert werden. Firebug ist damit das ultimative Werkzeug für das Anpassen und Debuggen von Hypertext. Das Netzwerk-Modul gibt Auskunft über die Queries der geladenen Seite und zeigt an, wieviel Millisekunden für das jeweilige Element zum Laden benötigt werden. Die Features sprechen für sich — Firebug ist ein Pflichtwerkzeug im Repertoire des Webentwicklers.
Download: https://addons.mozilla.org/de/firefox/addon/1843

Web Developer Toolbar

Web Developer Toolbar

Die Web Developer Toolbar ist ebenfalls eine sehr gelungene, oft bewährte Erweiterung für Firefox, die einen sehr ähnlichen Funktionsumfang wie Firebug hat. Das Aktivieren/Deaktivieren von Cache, Cookies, JavaScript, Bildern und CSS ist mit der Toolbar nur einen Klick entfernt. Wie in Firebug kann der HTML/CSS-Code live im Browserfenster bearbeitet werden.
Die Web Developer Toolbar bietet zudem nützliche Informationen wie die aktuelle Fenstergröße, Link-Details, Header-Informationen oder alle auf einer Seite benutzten Farben als Hexadezimal-Codes. Ich benutze die Toolbar vor allem wegen der tollen Shortcuts, die ich nicht mehr missen möchte. Mit STRG + SHIFT + A wird die aktuell geöffnete Seite an den W3C-Validator geschickt und mit STRG + SHIFT + C lassen sich alle verwendeten CSS-Dateien einer Seite in einem Tab anzeigen. Natürlich lassen sich die Shortcuts editieren, so dass man beispielsweise für das Validieren des CSS-Codes einen neuen Tastaturbefehl hinzufügen kann.
Download: https://addons.mozilla.org/de/firefox/addon/60

NoScript

NoScript

Im Zeitalter des JavaScripts ist es notwendig, zu prüfen, ob die eben so schön programmierte Seite auch ohne das Verwenden von JavaScript einigermaßen funktioniert.
Die Extension "NoScript" platziert sich rechts unten in der Statusleiste von Firefox und erlaubt das Aktivieren/Deaktivieren von JavaScript, Flash und Java per Klick.
Download: https://addons.mozilla.org/de/firefox/addon/722

MeasureIt

MeasureIt

Diese kleine Erweiterung erlaubt es, pixelgenaue Messungen auf einer geladenen Website vorzunehmen. Auf der Seite lassen sich beliebig große, transparente Flächen aufziehen, welche die gemessenen Anzahl der Pixel anzeigen. Für ein exaktes Arbeiten ist diese Extension sehr hilfreich.
Download: https://addons.mozilla.org/de/firefox/addon/539

ColorZilla

ColorZilla

ColorZilla hilft beim Ermitteln von Hexadezimalwerten, die für Farben auf einer Seite definiert wurden. Weiterhin kann gezoomt werden und auch Abstände zwischen zwei Punkten kann die Extension ermitteln.
Download: https://addons.mozilla.org/de/firefox/addon/271

Window Resizer

Window Resizer

Wenn man eine Website entwickelt, dann sollte diese auf verschiedenen Bildschirmauflösungen funktionieren. Bestimmte Bereiche müssen auch noch unter einer geringeren Auflösung sichtbar sein. Window Resizer stellt auf Klick die Größe des Browserfensters auf eine der gängigen Auflösungen ein, so dass man die Website direkt reduziert betrachten kann.
Download: https://addons.mozilla.org/de/firefox/addon/1985

Pixel Perfect (für Firebug)

Pixel Perfect

Bei Pixel Perfect handelt es sich um eine Extension für Firebug. Die kleine Erweiterung nistet sich als Symbol in Firebug ein und erlaubt das Überlagern (Einblenden) eines Bildes auf der aktuellen Website. Dabei kann die Transparenz des Bildes eingestellt werden, so dass der Entwickler den Photoshop-Entwurf pixelgenau nachbauen kann.
Download: https://addons.mozilla.org/de/firefox/addon/7943

Google Page Speed (für Firebug)

Google Page Speed

Google Page Speed ist ein Analyse-Werkzeug, das alle Datenübertragungen der aufgerufenen Seite misst. Die gemessenen Werte werden mit Optimalwerten verglichen, woraufhin die Erweiterung Möglichkeiten zur Optimierung der Ladezeiten vorschlägt. Dabei werden Faktoren wie Caching-Informationen, CSS-Strukturen, Bild- und Dateikompressionen (CSS/JavaScript) und externe Seitenaufrufe analysiert. Google bietet mit den "Best Practices" ein hilfreiches Dokument an, das alle notwendigen Informationen zur Optimierung einer Website enthält.
Download: http://code.google.com/intl/de-DE/speed/page-speed/

YSlow (für Firebug)

YSlow

YSlow ist der Extension von Google sehr ähnlich und stellt ebenfalls verschiedene Messwerkzeuge zur Verfügung. Dabei werden diverse Kriterien einer Website untersucht und mit Idealwerten verglichen: HTML/CSS-Struktur, Header-Informationen, Dateikompressionen und Ressourcenverteilung gehören unter Anderem zu den Punkten, die von der Erweiterung unter die Lupe genommen werden.
Yahoo stellt mit seinen "Best Practices" eine weiteren Leitfaden zur Optimierung von HTML-Seiten bereit.
Download: https://addons.mozilla.org/de/firefox/addon/5369

CodeBurner (für Firebug)

CodeBurner

Bei CodeBurner handelt es sich um eine HTML/CSS-Referenz von SitePoint, die dem Benutzer zu jedem Element/Attribut eine entsprechende Erklärung liefert. Zudem gibt CodeBurner Auskunft über die Browser-Kompatibilität des jeweiligen CSS-Attributs, wodurch sich Darstellungsfehler korrigieren lassen.
Download: https://addons.mozilla.org/de/firefox/addon/10273

Firefinder (für Firebug)

Firefinder

Firefinder bietet mit einer Texteingabe schnellen Zugriff auf alle vorhandenen HTML-Elemente einer geladenen Seite. Dabei werden die Elemente gezählt und in der Seitenansicht rot umrandet. Klickt man in den Suchresultaten auf ein Element, wird der reine Textinhalt des Knotens angezeigt.
Download: https://addons.mozilla.org/de/firefox/addon/11905

FireCookie (für Firebug)

FireCookie

Diese Erweiterung gibt Auskunft über alle Cookies einer Seite. Die Werte der Cookies können angezeigt und bearbeitet werden. Dabei zeigt FireCookie auch das Verfallsdatum des Cookies an. Für dynamische Seiten mit PHP kann diese Extension sehr hilfreich sein.
Download: https://addons.mozilla.org/de/firefox/addon/6683