Nach Installation sieht man in der Statusleiste des Browsers ein kleines Käfer-Icon. Sobald man auf dieses Icon klickt, öffnet sich ein Fenster, in dem verschiedene Möglichkeiten angeboten werden, die aktuell im Browser geöffnete Webseite zu untersuchen.

Hier einige der nützlichsten Funktionen:

1. Untersuchen

Wenn man auf “Untersuchen” und das Untermenu “HTML” klickt, kann man im Quelltext, der sich im unteren linken Fenster öffnet, die Stelle suchen, zu der man nähere Informationen haben möchte. Beim Überfahren der einzelnen HTML Elemente wird der jeweilige Bereich markiert.

Im rechten Bereich kann man unter CSS die sich jeweils auf diesen Bereich auswirkenden CSS Befehle sehen. CSS Regeln, die von einer anderen Regel überschrieben werden, werden durchgestrichen angezeigt. Man hat die Möglichkeit, hier eine geplante Änderung im CSS temporär auszuprobieren, indem man die CSS Regel im rechten Fenster einfach überschreibt.

Ein weiterer nützlicher Tab im rechten Bereich ist “Layout”. Hier kann man sehen, welche Maße der markierte Layoutbereich hat.

2. Ladezeit testen

Um die Ladezeiten zu testen, muss unter dem Tab Netzwerk die Netzwerkkonsole für die zu prüfende Seite aktiviert werden. Beim erneuten Laden der Seite wird nun angezeigt, welche Ladezeiten beim Laden der einzelnen Bilder und Scripts anfallen. So kann man erkennen, wo die Ladezeiten gegebenenfalls optimiert werden müssen.

Das Add-on bietet zahlreiche Anwendungsmöglichkeiten. Hier einige, die ich am nützlichsten finde:

1. Styleinformationen anzeigen:

Nach einem Klick auf den Button “CSS” -> “Styleinformationen anzeigen” markiert man den Bereich der Webseite, von dem man wissen möchte, welche CSS Befehle sich hier auswirken. In diesem Fall die Überschrift auf der Titelseite.

Nachdem man den gewünschten Bereich angeklickt hat, wird oben im Browser unter der Adresszeile, der Pfad des markierten Elementes innerhalb der Template Hierarchie angezeigt. Gleichzeitig öffnet sich unten ein zusätzliches Fenster, das alle CSS Befehle anzeigt, die sich auf dieses Element auswirken.

2. CSS bearbeiten

Möchte man sehen, wie sich eine Änderung im CSS auswirkt, so kann man auf “CSS bearbeiten” gehen und kann dann in den sich unten öffnenden Stylesheetinformationen eine Änderung eingeben und prüfen, ob dies der gewünschte Effekt ist. Diese Änderung ist nur temporär und hat keinerlei Auswirkungen auf das gespeicherte Stylesheet.

In diesem Beispiel ändere ich die Ansicht des Titelbildes von float:left auf float:right und erhalte daraufhin eine Voransicht, wie das Titelbild rechtsbündig ausgerichtet aussehen würde.

Wenn man komplexere Änderungen austesten will, so kann man auch ein Benutzer-Stylesheet hinzufügen, das gleich mehrere CSS-Änderungen enthält. Nach Klick auf den Button “Benutzer-Stylesheet hinzufügen” kann man eine vorbereitete CSS Datei einbinden, die dann ebenfalls (temporär) eine Vorschau der geplanten Änderungen zeigt. Auf diese Weise kann man in Ruhe austesten, wie sich geplante Änderungen auf das Aussehen der Website auswirken würden und ob diese wirklich den gewünschten Effekt bringen.

3. HTML Elemente hervorheben

Einige weitere nützliche Funktionen findet man unter dem Button “Hervorheben”. Hier kann man z.B. Blockelemente, positionierte Elemente, Überschriften und anderes markieren und so sehen, wo diese platziert sind.

4. Verschiedenes

Unter dem Button “Verschiedenes” findet man weitere Hilfswerkzeuge, die einem die Arbeit erleichtern können. Z.B. der Button “Maßwerkzeuge”, wenn man die Maße eines bestimmten Bereichs im Template benötigt.

Dies ist nur eine kleine Auswahl der Möglichkeiten, die die Webdeveloper Toolbar bietet. Auch die anderen Funktionen sind einen Blick wert und können die Bearbeitung eines Templates enorm vereinfachen.

The Wayback Machine

Die Toleranzgrenze für Farb-Helligkeitsdifferenz wurde auf mindestens 125 festgelegt, die Toleranzgrenze für Farbunterschiede auf mindestens 500.

Der Colour Contrast Checker ist ein praktisches Tool, das die Farbwerte einer Webseite auf Einhaltung dieser empfohlenen Grenzwerte überprüft.

Colour Contrast Checker