Testumgebung für standardkonforme Webentwicklung
Nützliche Plugins für den Firefox
Darüber haben sicher schon viele Entwickler geschrieben: Die passende Testumgebung möglichst mit freien Tools zusammenzustellen. Ich mache das mal als eigene Gedächtnisstütze und für die, die es brauchen können 
.
- Entwicklerleiste
Die Entwicklerleiste ist inzwischen standardmäßige im FF vorhanden.
Sie enthält diverse Validatoren, CSS-Editor, Browser-Verkleinerer, Funktionen zum Ausblenden von CSS, Bildern, Leeren von Cache und Cookies u.v.m. Einige Funktionen lassen sich nach Bedarf anpassen. - DOM Inspector
Ist ebenfalls bereits im FF enthalten, muss aber bei der Installation im Modus “benutzerdefiniert” über die Checkbox aktiviert werden.
Der Inspector ist ein mächtiges Tool zur Analyse der Seitenstruktur samt der enthaltenen Elemente (DIVs, H1-6, p, img usw.). Neben den Elementen werden jeweils die CSS-Eigenschaften angegeben. Darüber hinaus lassen sich Elemente entfernen oder CSS-Angaben verändern und life anzeigen. Verschiedene Szenarien können damit direkt ausprobiert bzw. Styles auf Machbarkeit geprüft werden. Ein Einsteiger-Tutorial in deutsch gibt’s bei stichpunkt.de. - IE Tab und Launchy
sind brauchbare Plugins für den Browser-Test. IE Tab zeigt die aktuelle Seite mit der jeweils installierten IE-Browser-Engine direkt in FF an. Auch lässt sich festlegen, ob bestimmte Seiten immer per IE Tab aufgerufen werden sollen. Das ist dann interessant, wenn Zugriffe auf die Seite (Formulare, Web-Editoren etc.) nur für den IE optimiert sind. Launchy startet sonstige Browser und Programme, die auf dem Rechner installiert sind. Welche Programme das sein sollen, lässt sich konfigurieren. Beide Aktionen werden jeweils über die rechte Maustaste in der aktuellen Seite aufgerufen. - Measure-It und Colorzilla
sind sehr hilfreich, um die angezeigte Webseite zu vermessen bzw. Farbwerte zu kontrollieren. Bilder, Div-Boxen, Schrifthöhen oder Abstände zwischen den Elementen einer Webseite lassen sich mit Measure-It abmessen, allerdings nur in Pixelwerten. Die Pipette von Colorzilla gibt den Hex-Wert der angesteuerten Farbe aus. - Flash-Switcher
finde ich ein tolles Tool, denn damit kann ich ältere Versionen des Flash-Players simulieren oder das Plugin deinstallieren. Ich muss nicht mehr verschiedene Plugin-Versionen in meinem Browsern vorhalten, sondern kann Browserweichen und Alternativ-Texte bequem über den Switcher testen. - HTML Validator (CSE HTML Validator)
Das Validator-Plugin benötigt die CSE HTML Validator-Engine zur Anzeige von Skriptfehlern, Zeilennummern oder CSS-Hinweisen. Neben dem FF-Plugin muss daher zusätzlich der CSE-Validator auf dem Rechner installiert sein. Ruft man den Quellcode auf, erhält man detaillierte Fehlerhinweise. - Fangs
ist hilfreich bei der Erstellung barrierefreier Seiten. Es simuliert den Leseablauf eines Screenreaders. In der Hauptansicht zeigt es die Abfolge der Überschriften (h1-h6), gibt Links an und kennzeichnet vorhandene Sprachwechsel. In zwei weiteren Reitern werden a) alle genutzten Überschriftenformate in der vorhandenen Reihenfolge und b) Linktexte angezeigt. Damit lässt sich leicht überprüfen, ob H-Formate ordnungsgemäß geschachtelt sind und Links sprechende Bezeichnungen haben oder diese evtl. doppelt vorkommen. - Greasemonkey
Mit Greasemonkey lassen sich alternative Stylesheets managen und auf die angezeigte Seite anwenden. Das ist hilfreich bei der Entwicklung barrierefreier Seiten, um die Auswirkung von nutzerdefinierten Styles (bestimmte Farbwelten oder größere Schriften) auf das eigene CSS-Arangements zu zeigen. Auch ein Styleswitcher lässt sich so lokal ohne Server simulieren. - Firebug
Und dann gibt es noch Firebug. Dieses Tool legt gegenüber dem DOM-Inspector noch ein paar Funktionen drauf. Damit lassen sich nicht nur HTML, CSS und Javascript inspizieren, man kann seine Skripte damit auch editieren und debuggen. Die Anzeigefunktionen sind zudem komfortabler als im DOM-Inspector. Allerdings musste ich mich erstmal einarbeiten, was ich bisher noch nicht wirklich geschafft habe.
Aber es gibt auch dafür einige hilfreiche Tuts z.B.:
Klar gibt es noch mehr Tools. Aber das sind für mich die wichtigsten und es soll ja auch übersichtlich bleiben in der Testumgebung 
.
Geschrieben am 10.09.2007 um 21:02:07 Uhr in der Kategorie Allgemein, Fortgeschrittene, Tools, Feed: RSS 2.0. Sie können einen Kommentar schreiben.