Firefox Blog

Die Web Developer Toolbar Extension von Chris Pederick ist ein absolutes Must-Have für jeden Webmaster. Kompakt in einer Toolbar-Zeile verpackt enthält man eine große Auswahl praktischer Tools die die tägliche Arbeit mit HTML, CSS
und HTTP-Headern vereinfachen. Die wichtigsten Funktionen der Toolbar, übersichtlich verpackt in 9 Dropdowns und 4 Buttons, möchte ich im folgenden kurz vorstellen.

Dropdown: Disable
Wie der Name schon sagt: Mit dem Disable-Dropdown kann man alle Möglichen Funktionen des Browser deaktiveren und so Fehlern in der Webseite auf die schliche kommen oder schlicht einmal ein paar Informationen vor anderen Webseiten verstecken. Im einzelnen lassen sich der Cache, Cookies, Bilder, Java, Javascript, Farben, der Popup-Blocker, die Referer-Übermittlung und CSS deaktiveren.

Dropdown: CSS
Über das Disable-Menü können wir CSS nur vollständig abschalten. Das CSS-Menü bietet vielfältige Möglichkeiten um die CSS-Settings der aktuellen Seite zu prüfen, ändern oder einfach mal die Seite mit den CSS-Settings für Handhelds oder Drucker anzusehen.

Dropdown: Forms
Einige praktische Funktionen für die Arbeit mit HTML-Formularen sind hier versteckt. So können GET-Formulare in POST und vice versa umgewandelt, die Längenbeschränkungen von Eingabefeldern aufgehoben oder Passwortfelder aufgedeckt werden.

Dropdown: Images
Auf den ersten Blick denkt man: Bilder kann ich auch ohne eine zusätzliche Extension schon deaktiveren. Aber hier verstecken sich noch weitere Optionen um alle Bilder auszublenden, zu markieren oder weitere Informationen anzuzeigen. Hilfreich sind vor allem die diversen Outline-Optionen. Damit kann man Bilder nach bestimmten Kriterien markieren lassen und so problemlos auf einen Blick sehen welchem Bild man unbedingt noch ein ALT-Attribut verpassen
muss.

Dropdown: Information
Diverse Informationen zur aktuellen Webseite wie gerendertes Javascript, Response Header und ähnliches. Besonders wertvoll: Der Punkt "View Cookie Information" über den eine handliche Übersicht über alle Cookies der aktuell angezeigten Webseite generiert wird.

Dropdown: Outline
Ähnlich den Outline-Optionen im Image-Menü kann man mit diesen Optionen auch Tabellen, -Zellen, Frames und Links farblich hervorheben lassen.

Dropdown: Resize
Unbezahlbar bei der Erstellung einer Webseite ist der Blick aus Usersicht. Während man selbst auf topaktuellen großformatigen Desktops arbeitet kommen viele User noch mit einer Bildschirmauflösung von 1024x768 Pixeln daher. Die typischen Größen wie 800x600, 1024x678 etc. kann man im Resize-Menü hinterlegen und dann per Mausklick das Browserwindow so anpassen wie es ein Surfer mit kleinerem Bildschirm zu sehen bekommt.

Button: View Source
Auch diese Option gibt es eigentlich schon "ab Werk" im Firefox. Der Button zum anzeigen des Quellcodes hat zwei Vorteile: 1. ist er schneller erreichbar und außerdem wird die Seite nicht neu geladen um den Quellcode anzuzeigen und es ist somit auch möglich sich den Code von per POST-Request generierten Seiten anzeigen zu lassen. Die Firefox-interne Funktion zeigt da immer nur die Seite die ohne Übergabe von POST-Parametern generiert wird oder schickt die
Daten gleich nocheinmal ab.

Dropdown: Options
Einstellungen, Rücksetzen der Änderungen, About etc... das Übliche halt :)

Button: Page Info
Ein kleines Häkchen zeigt an ob Firefox die aktuelle Seite im Standards Compliance Mode oder im fehlertoleranteren Quirks Mode gerendert hat. Ein Klick öffnet die Seite "Page Info".

Button: Javascript Errors
Wenn alles in Ordnung ist, wird nur ein kleines "i" in einer Sprechblase angezeigt. Kommt es zu Javascript-Fehlern auf der aktuellen Seite erscheint ein rotes Ausrufezeichen und ein Klick öffnet direkt die Javascript-Konsole.

Button: Disable Toolbar
Last but not least kann man mit einem Button-Klick alle Funktionen der Web Developer Toolbar deaktiveren. Ich persönlich hab die Funktion noch nie gebraucht, lasse mich aber gerne über einen sinnvollen Einsatzzweck belehren.


Download und Installation
Die Web Developer Toolbar kann über die Webseite von Chris Pederick oder über
Mozilla Update für Firefox und Mozilla installiert werden. Auf der Webseite
finden inzwischen auch lokalisierte Builds für diverse Sprachen, darunter auch
Deutsch.