Web Developer Toolbar 2
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 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
Verwandte Artikel:
- Kategorien:
- Browser-Erweiterungen
- Tags:
- browser, firefox, mozilla, seamonkey, webdesign
- Beitrag:
- Druckvorschau
- Kommentare:
- Kommentar abgeben oder Kommentare verfolgen
«« Zum vorherigen Beitrag — Zum nächsten Beitrag »»
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.?
@Damian,
es gibt jede Menge interessanter Webwork-Tools. Deswegen würde ich dir empfehlen, den Newsfeed zu abonnieren.
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
[...] Lieblingstools, die "Web Developer Toolbar vorstelle. Hier geht es zum ersten Teil und zum zweiten Teil der [...]
[...] sehr mächtige und umfangreiche "Web Developer Toolbar" vorstelle. Hier geht es weiter zum zweiten und zum dritten Teil der Serie. Web Developer [...]
[...] Web Developer Toolbar (Firefox) Die Web Developer Toolbar / Extension ist auch eine sehr gute Erweiterung für den Firefox. Eine genauere Beschreibung was man damit alles anstellen kann findest du hier. [...]
[...] der Web Developer Toolbar, welche ich hier, hier und hier beschrieben habe, ist Firebug die Firefox-Erweiterung, die ich am meisten einsetze und die [...]