Webwork-Tools - Dem Webworker seine Werkzeugkiste



Web Developer Toolbar 1

Von am 08. September 2008 um 21:27 Uhr

Das hier wird der Start einer dreiteiligen Serie sein, in der ich die sehr mächtige und umfangreiche "Web Developer Toolbar" vorstelle. Hier geht es weiter zum zweiten und zum dritten Teil der Serie.

Web Developer Toolbar

Web Developer Toolbar

Die Web Developer Toolbar von Chris Pederick ist die Mozilla-Erweiterung und das Webwork-Tool welches ich am meisten nutze und ohne welches ich mir meine tägliche Arbeit als Webworker nicht vorstellen kann und auch nicht mehr vorstellen möchte.

Bei der Web Developer Toolbar handelt es sich um eine Erweiterung für die Browser der Gecko-Familie und zwar für Mozilla Firefox, für SeaMonkey und für Flock. Chris arbeitet schon seit 2003 an dieser Erweiterung und momentan ist die Version 1.1.6 aktuell.

Nach der Installation der Erweiterung (.xpi-Datei) bindet sich die selbige im Browser, als zusätzliche Leiste, unterhalb der Adress- und der Lesezeichenleiste ein. Je nach Einstellungen im Optionsmenü ist die Erweiterung auch über das Kontextmenü (Rechtsklick) erreichbar.

Die Werkzeugleiste

Die Werkzeugleiste

Die Werkzeugleiste

Die Werkzeugleiste beherbergt zwölf Hauptpunkte, die wiederum einzelne Funktionen beherbergen. Wie du siehst arbeite ich hier mit der englischen Version der Erweiterung, du hast allerdings die Möglichkeit dir bei Erweiterungen.de eine übersetzte Version zu installieren. Ich werde jetzt die einzelnen Hauptpunkte näher vorstellen.

Der Hauptpunkt "Disable"

Funktionen ausblenden

Funktionen ausblenden

Hier hast du die Möglichkeit verschiedene Funktionen des Browsers und der Website zu deaktivieren, wenn du die selbige betrachtest. Man kann Java, Java Script oder den Cache im Browser deaktivieren, aber auch Weiterleitungen die im Meta-Tag der Website notiert sind oder die Farben der Website. Darüber hinaus kannst du die Übertragung der Referrer unterbinden, die Mindestschriftgröße und den Popup-Blocker deaktivieren.

Der Hauptpunkt "Cookies"

Die Cookie-Funktionen

Die Cookie-Funktionen

In diesem Bereich kannst du die Cookies verwalten: man kann die Cookies unterbinden, die Cookies der aktuellen Session zurücksetzen, die Domainspezifischen Cookies so wie die Pfade löschen. Darüber hinaus kannst du dir die Cookie-Informationen anzeigen lassen oder sogar Cookies hinzufügen.

Der Hauptpunkt "CSS"

Die CSS-Funktionen

Die CSS-Funktionen

Nun kommen wir zu den Funktionen der Web Developer Toolbar, die für einen "klassischen" Webdesigner von sehr hohem Interesse ist. Im Hauptpunkt "CSS" befinden sich die CSS Funktionen der Erweiterung.

In diesem Bereich hast du die Möglichkeit CSS komplett oder Typweise zu deaktivieren. Im zweiten Unterpunkt kann man die einzelnen CSS-Dateien Typweise aktivieren. Was hat es mit dieser Funktion an sich? Als Webdesigner hat man die Möglichkeit, dem Webdokument bzw. der Website CSS-Unterstützung für Medientypen an den Weg zu geben, hier ein Beispiel:

<link rel="stylesheet" type="text/css" media="screen" href="monitor.css" />
<link rel="stylesheet" type="text/css" media="print" href="drucker.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="handy.css" /> 

Damit hat Website je ein CSS-Dokument für die Ausgabe am Monitor, am Drucker und an mobilen Geräten zugewiesen bekommen. Je nach dem mit welchem Gerät man sich dieWebsite ausgeben lässt wird die entsprechende CSS-Datei aktiviert.

In der Web Developer Toolbar hast du die Möglichkeit die CSS-Dateien für andere Medien zu aktivieren … vorausgesetzt diese wurden eingebunden.

Wenn Sie den Unterpunkt "View CSS" anklickst dann erscheint in einem neuen Tab der CSS-Code aller eingebundenen CSS-Dateien und -Anweisungen. Die Dateien sind dort auch verlinkt, so dass man zu den einzelnen Dateien gelangen kann.

Klickt man "View Style Information" an, dann verwandelt sich der der Cursor in ein Kreuz und wählt man damit einen beliebigen Bereich der Website an, dann gibt die Erweiterungen den relevanten CSS-Code für das jeweilige Element aus.

View Style Information

View Style Information

Mit den letzten drei Funktionen kann man auch ganz tolle Sachen anstellen. Mit "Add User Style Sheet…" kann man sein eigenes CSS zur Geltung bringen, ist sehr wichtig, wenn z.B. der Farb-Kontrast zu niedrig ist. Mit "Edit CSS" kann man live die CSS-Datei der Website bearbeiten. Selbstverständlich wirken sich die Änderungen nur lokal, also auf der Client-Seite … man zerstört nicht die Website. :-)

Mit der letzten Funktion "Use Border Box Model" wechselt man in den so genannten Quirks-Modus. In diesem Modus werden die Angaben zum Rahmen (border) und zum inneren Abstand (padding) nicht auf die Angaben der Breite (width) und Höhe (height) dazu addiert.

Der Hauptpunkt "Forms"

Formulare einsehen und manipulieren

Formulare einsehen und manipulieren

Für mich persönlich ist dieser Bereich sehr unspektakulär, weil ich ihn eigentlich noch nie benutzt habe. Hier kann man Informationen rund um die eingesetzten Formulare einsehen und die Eigenschaften der einzelnen Formular-Elemente beeinflussen.

Diesen Artikel weiterempfehlen:

Verwandte Artikel:

Eigenwerbung: unsere Bücher (WordPress und Webwork-Tools)

 — 

5 Kommentare zu “Web Developer Toolbar 1”

  1. […] 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 der Serie. […]

  2. […] in der ich einen meiner Lieblingstools, die "Web Developer Toolbar vorstelle. Hier geht es zum ersten Teil und zum zweiten Teil der […]

  3. […] hinaus setze ich noch Firefox samt den Erweiterungen Firebug und Web Developer Toolbar […]

  4. Genau sowas brauche ich. Ein herzliches Dankeschön!

  5. […] der Web Developer Toolbar, welche ich hier, hier und hier beschrieben habe, ist Firebug die Firefox-Erweiterung, die ich am meisten einsetze […]