Web Developer Toolbar 2

Von Perun am 09. September 2008 um 09:00

Das hier ist der zweite Teil der Artikel-Serie, in der ich einen meiner Lieblingstools, die "Web Developer Toolbar vorstelle. Hier geht es zum ersten Teil und zum dritten Teil der Serie.

Der Hauptpunkt "Images"

Bilder einsehen, visualisieren udn manipulieren

Bilder einsehen, visualisieren und manipulieren

Dieser Hauptpunkt verbirgt einige sehr interessante Funktionen. Alle hier untergebrachte Funktionen haben etwas mit Bildern und Grafiken zu tun. Man kann die Grafiken ausblenden, die Pfade, Ausmaße, Dateigröße und die Inhalte der alt-Attribute ausgeben lassen.

Sehr spannend finde ich die Funktion "View Image Information". Diese Funktion listet fein säuberlich im einen neuen Tab alle im jeweiligen Dokument eingebundene Grafiken – egal ob sie als Bild (img) oder als Hintergrundbild (per CSS) eingebunden sind. Das kann z.B. interessant sein um herauszufinden, wie jemand bei einem grafisch anspruchsvollem Layout vorgegangen ist bzw. welche und wie viele Hintergrundbilder der Kollege verwendet hat.

Der Hauptpunkt "Information"

Interessante Informationen

Der Bereich "Information" ist sehr umfangreich und mächtig, wie man in der neben stehenden Abbildung sehen kann. Man kann sich so ziemlich alles anzeigen lassen was für einen Webworker interessant sein könnte: die verwendeten Farben auf der Website, die IDs und Klassen, der vom Server gesendete Header, die Größe des Dokumentes, die Dimensionen der Block-Elemente etc.

Äußerst nützlich ist hierbei die Funktion mit dem unscheinbaren Namen "Display Element Information". Wenn man diese Funktion aufruft, dann kann man Elemente auf der Website anklicken und die Funktion liefert zu diesem Bereich jede Menge an Informationen, wie man in der folgenden Abbildung sehen kann:

Elemente inspizieren

Der Hauptpunkt "Miscellaneous"

Sonstige Funktionen

In diesem Bereich verbergen sich Funktionen, die sich nicht eindeutig einsortieren ließen, aber das heißt nicht dass sie deswegen weniger nützlich sind. In meinen Augen sind die Funktionen "Edit HTML" und "Display Ruler" hervorzuheben. Mit der ersten Funktion kann man live das HTML der jeweiligen Seite verändern … so ähnlich wie mit der Funktion "Edit CSS". "Display Ruler" ruft ein Lineal hervor mit dem man Flächen ausmessen kann.

Speziell bei der Entwicklung von Websites für mobile Endgeräte kann die Funktion "Small Screen Rendering" von Nutzen sein: die Anordnung der Layout-Elemente wird linearisiert und die Breite auf 260 Pixel begrenzt.

Der Hauptpunkt "Outline"

Bereiche hervorheben

Dieser Bereich ist sehr wichtig für Webdesigner. Mit den hier untergebrachten Funktionen kann man bestimmte Elemente visuell hervorheben. Wählt man eine Funktion aus, dann bindet die Toolbar um die entsprechende Elemente einen farbigen Rahmen ein um die visuell hervorzuheben. Das ist sehr hilfreich bei der Suche nach Ursachen für Layout-Fehler. So schaut das Webwork-Tools-Blog aus, wenn ich die Funktion "Outline Block Level Elements" auswähle:

Block-Elemente visualisieren

Diesen Artikel weiterempfehlen:

7 Reaktionen auf diesen Beitrag »»

Kommentare

Damian sagte am
9. September 2008 um 14:56 folgendes:

Hey, gute Arbeit.
Freue mich schon auf den dritten Beitrag zu dem Thema.
Mach weiter so.

Gibt es sonst noch nützliche Tools für Webentwickler neben der Toolbar und Sachen wie Firebug etc.?

Antworten
Perun sagte am
9. September 2008 um 14:58 folgendes:

@Damian,

es gibt jede Menge interessanter Webwork-Tools. Deswegen würde ich dir empfehlen, den Newsfeed zu abonnieren.

Antworten
Damian sagte am
9. September 2008 um 15:38 folgendes:

Hi Vladimir,

ist bereits geschehen. Verfolge bereits deine Einträge hier

Hätte ja sein können, dass du noch weitere interessante Plugins nutzt. Oftmals ist man bei den Firefox Extensions ziemlich überlastet bei der Fülle an Plug-Ins.

Grüße
Damian

Antworten

Webwork-Tools - Dem Webworker seine Werkzeugkiste