Webdeveloper Toolbar kann viel mehr

Viele von uns kennen die Webdeveloper Toolbar, die tolle Erweiterung für Firefox und SeaMonkey, die bei vielen Webworkern Tränen der Rührung hervorruft … oder waren es eher Freudentränen, naja, wie dem auch sei auf jeden Fall hat man Pippi in den Augen 🙂 wenn man es das erste Mal in Aktion erlebt. Über dieses tolle Werkzeug habe ich schon mehrmals berichtet u. a. hier.

Aber in den letzten Gesprächen mit Kollegen über die Toolbar ist mir aufgefallen, dass die eine oder andere Funktion entweder unbekannt oder unterschätzt war. Und das ist nicht schwer bei der Fülle von Funktionen, die eine oder andere zu übersehen. Daher wollte ich auf ein paar Funktionen jenseits von Outline Block Elements und Display Block Size hinweisen und falls ich für die meisten von euch alte Kamellen ausbreite dann bitte ich um Entschuldigung.

Bei der Grafik handelt es sich um einen Ausschnitt aus der Toolbar. Ganz rechts befinden sich zwei Symbole, die je nach Größe bzw. Auflösung des Monitors weiter entfernt von den restlichen Icons liegen. Der erste der beiden Icons (Hacken auf dem blauen Hintergrund) gibt an das die Website auf der man sich gerade befindet im Standard-Modus ist. Wenn dieses Symbol ausgegraut ist, dann befindet sich die Website im Quirks-Modus. Der Icon daneben gibt an ob es auf der Website Javascriptfehler gibt oder nicht. So schauen die Icons im Firefox (Standardtheme) aus. Je nach Theme kann das Aussehen die Icons variieren, dass gleiche allerdings in SeaMonkey (Mostly Cristal-Theme):

Eine weitere sehr nützliche Funktion ist Display Element Information erreichbar auch über Strg+Umschalt+F bzw. über den Menüpunkt Information. Wenn man diese Funktion aktiviert, dann verwandelt sich der normale Cursor in ein Fadenkreuz und man kann Bereiche einer Website anvisieren und es werden Informationen über das jeweilige Element preisgegeben: Elternelemente, Nachfolgeelemente, Attribute, Schriftgröße, Breite, Höhe etc.

Sehr interessant finde ich auch View Image Informationen unter dem Menüpunkt Images. Mir ist es öfter vorgekommen, dass ich eine schön Website besucht habe und es mich interessiert hat, wie der Webworker die Hintergrundgrafiken geschnitten hat. Aber wenn sich die Div-Kontainer überlagern, dann trifft man nicht immer die richtige Grafik mit Hilfe des Kontextmenüs. View Image Informationen listet alle Grafiken auf der jeweiligen Unterseite fein säuberlich auf mit Pfadangabe und Angabe zur Maßen und Dateigröße.

View Response Headers ebenfalls unter Informationen liefert Header-Infos: welcher Server in welcher Version eingesetzt wird, welche Version von PHP vorhanden ist etc.

Sehr nützlich finde ich unter dem Menüpunkt CSS die Funktion View CSS um sich die CSS-Dateien anzeigen zu lassen und Display CSS by Media Type um sich die jeweilige Website mit den Formatierungen für die Druckausgabe anzeigen zu lassen … natürlich nur wenn eine CSS-Datei für den Druck vorhanden ist.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.