Nützliche Werkzeuge/Web Developer

Beschreibung

Das Web Developer Tool ist ein sehr mächtiges Werkzeug, dessen vollständige Möglichkeiten sich erst beim intensiven Gebrauch erschließen. Es ist keine Alternative zum Firebug, sondern beide Werkzeuge ergänzen sich sinnvoll und haben beide ihre besonderen Stärken und einmaligen Fähigkeiten.

PHP-Code finden

Leider eignet sich das Tool genau so wenig wie der Firebug zum Aufspüren von PHP-Code. Aus den dort beschriebenen Gründen kann es von der Anwenderseite aus kein Tool dafür geben.

Einsatzmöglichkeiten

Wegen der Menge an Funktionen ist es kaum möglich, alle Einsatzmöglichkeiten umfassend zu beschreiben. Dieses Howto wird also immer unvollständig bleiben und nur einige besonders effektive Vorgehensweisen beschreiben können. Durch Kombination der verschiedenen Anzeigen und Einstellungen ergeben sich weit mehr Möglichkeiten als auf den ersten Blick ersichtlich.

Funktionen

Deaktivieren

Ein- und Ausschalten von JavaScript und Java, Aktivieren- und Deaktivieren von Farben und des Popup-Blockers. Nützliche Funktion um insbesondere auf die Schnelle testen zu können, ob ein bestimmter Seitenbereich, z.B. ein Menü oder Modul bei deaktiviertem JS immer noch die gewünschte Funktionalität bereitstellt.

Cookies

Stellt mit einem Mausklick Cookie-Informationen bereit, erlaubt weiter das Ändern und Löschen von Cookies.

CSS

Styles deaktivieren

Hierüber gelingt ein schnelles Deaktivieren aller oder einzelner Stylesheets sowie von Inline-Styles in Elementen. Nützlich um Allgemein die lineare Darstellung zu überprüfen. Auch wenn man auf Stylesheets verzichtet, sollte eine Webseite weiterhin gut zu nutzen sein.

CSS nach Medientypen darstellen

Bietet dem Designer die Möglichkeit, das Aussehen der Seite zu überprüfen wenn ein Handheld-Stylesheet an Stelle des Template Stylesheets geladen wird. Die Funktion *emuliert* dabei nur bedingt realistisch die Ausgabe einer mobilen Seite. Weiter lässt sich das Layout für die Druckausgabe einsehen.

CSS anzeigen

Zeigt die Inhalte aller aktiven CSS-Dateien der geladenen Seite. Mit der Suchfunktion (Strg-F/F3) des Firefox können gesuchte Klassen und Definitionen schnell angesprungen werden.

Wenn eine CSS-Datei nicht geladen werden kann, wird an ihrer Stelle die entsprechende Fehlerseite des Servers, meist 403 oder 404, ausgegeben.

Style-Information anzeigen

Zeigt bei Mouseover die kaskadierten Klassen des jeweiligen Elements an. Bei Joomla oft sinnlos, weil durch die tiefe Verschachtelung die Breite oft nicht ausreicht... Bei einem Klick auf ein Element werden die zutreffenden Klassen angezeigt. Leider nicht wie im Firebug editierbar, und überschriebene Definitionen werden auch nicht besonders gekennzeichnet.

Informationen

Elementinformation einblenden

Zeigt bei Mousover in einem eigenen Layer viele Informationen des angeklickten Elements wie Id/Klasse, absolute Position, Höhe/Breite, Eltern- und Kindelemente. Leider unbrauchbar, um Informationen eines vollständig verdeckten Elements zu erhalten, da der Klick immer das oberste Element trifft.

Der Layer ist an seiner Kopfzeile verschiebbar, wenn er Elemente verdeckt, zu denen Informationen benötigt werden.

Tiefe der Tabellenverschachtelung einblenden

Zeigt die Verschachtelungstiefe der Tabellen in der Seite an. Erschreckend, daß in Joomla bei manchen Templates dabei fünf und mehr Ebenen gezeigt werden. Kommen dann noch Tabellen im Content hinzu, ist man schnell bei sechs oder sieben Ebenen. Unsinnige Rechenarbeit für den Browser, eine Zumutung für Menschen, die auf Hilfsmittel für die Anzeige von Webseiten angewiesen sind.

Download

Die jeweils aktuellste Version des Web Developer Tools ist auf [[1]] zu finden. Unter den auffällig großen Installationsicons ist die jeweils aktuelle lokalisierte Version zu finden, die leider manchmal in der Aktualität dem englischen Original hinterherhinkt.