Web Developer Toolbar 3
Das hier ist der dritte Teil der Artikel-Serie, in der ich einen meiner Lieblingstools, die "Web Developer Toolbar vorstelle. Hier geht es zum ersten Teil und zum zweiten Teil der Serie.
Der Hauptpunkt "Resize"
Fenstergröße ändern
Dieser Bereich ist sehr wichtig wenn es darum geht das Layout bzw, die Website unter verschiedenen Fenstergrößen zu testen … es geht darum die verschiedenen Monitorgrößen mit unterschiedlichen Abmessungen zu simulieren. Hier ein paar Beispiele: 1280×1024 Pixel ist die Standardauflösung eines 19" LCD-Monitors, 1024×768 ist die Standardauflösung eines 17" Röhrenmonitors und 1280×800 ist eine sehr häufige Auflösung bei den 15,4" und den 14,1" Laptops.
Neben den bereits eingestellten Größen kann man beliebig weitere Größen einfügen. Dabei kann man entscheiden ob die Ausmaße sich auf das komplette Browserfenster oder auf den Viewport – den sichtbaren Bereich – beziehen.
Der Hauptpunkt "Tools"
Diverse Tools: Vlidatoren und Inspectoren
In diesem Bereich befinden sich diverse Tools, die den Quelltext und die Zugänglichkeit der Website unter die Lupe nehmen. Zuerst kann man das (X)HTML, CSS, den Feed und sogar die Links durch den Validator jagen. Sollten sich dort Fehler befinden, dann wird man es hier erfahren.
Mit "Validate Section 508" und "Validate WAI" wird die Website maschinell auf ihre Zugänglichkeit getestet und die beiden Dienste liefern ausführliche Testergebnisse.
Unter "Edit Tools…" kannst du die bestehenden Tools bearbeiten und Neue hinzufügen.
Der "DOM Inspector" ist ein Tool um die Elemente eines Dokumentes live einzusehen und zu verändern. Seit Firefox 3 ist der DOM Inspector allerdings nicht mehr mit an Board und daher kann die Toolbar nicht darauf zurückgreifen. Allerdings gibt es den DOM-Inspector mittlerweile in Form einer Firefox-Erweiterung. Nach der Installation dieser Erweiterung funktioniert auch der Eintrag in der Toolbar.
Die "Error Console" dokumentiert sowohl Javascript- als auch CSS-Fehler. Mit den letzten beiden Funktionen kannst du eine (X)HTML- oder CSS-Datei prüfen, die nur lokal, also auf deinem Rechner, vorhanden ist.
Der Hauptpunkt "View Source"
View Source
In diesem Bereich hast du die Möglichkeit dir den Quelltext des jeweiligen Webdokuments anzuschauen. Der erste Punkt ist der Klassiker und er greift auf das, was auch der Browser üblicherweise als Quelltext ausliefert.
"View Frame Source" ist relevant wenn du dich auf einer Website befindest wo Frames ("normale" oder eingebettete) zum Einsatz kommen. Dann hast du die Möglichkeit, dir den Quelltext eines bestimmten Frames anzuschauen.
"View Generated Source" zeigt dir den "wirklichen" Zustand des Dokumentes bzw. des Quelltextes an. Sind Javascripte im Dokument referenziert, die z. B. dazu dienen das HTML zu manipulieren oder auszugeben, dann wird auch deren Ergebnis angezeigt.
Mit dem letzten Punkt kannst du bestimmen ob du den Quelltext in einer externen Anwendung betrachten möchtest und wenn ja in welcher. Beispiel wäre hier dein favorisierter Texteditor.
Der Hauptpunkt "Options"
Optionen
Der letzte Bereich lässt sich schnell erklären. Die Funktion "Persist Features" ist dafür zuständig, die Veränderungen an einer Website durch die Toolbar, die beim nächsten Neuladen des Browsers verloren gehen würden zu behalten. Leider funktioniert bei mir die Funktion nicht immer wirklich zuverlässig.
"Reset Page" setzt alle Manipulationen zurück, "Help…" führt in den Hilfebereich der Website von Chris Pederick und unter "About…" verbirgt sich ein kleiner Fenster mit dem Hinweis auf die Version und ein Link auf die Website der Web Developer Toolbar. So, dass war's nun mit der Web Developer Toolbar.
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 »»
[...] Lieblingstools, die "Web Developer Toolbar vorstelle. Hier geht es zum ersten Teil und zum dritten Teil der [...]
[...] umfangreiche "Web Developer Toolbar" vorstelle. Hier geht es weiter zum zweiten und zum dritten Teil der Serie. Web Developer [...]
[...] der Web Developer Toolbar, welche ich hier, hier und hier beschrieben habe, ist Firebug die Firefox-Erweiterung, die ich am meisten einsetze und die mir [...]