expertinnen-web.de

Das Expertinnen-Web

Testumgebung für standardkonforme Webentwicklung

| Keine Kommentare

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 ;-) .

Autor: Renate

Als Webentwicklerin erstelle ich hauptsächlich Templates für verschiedene CMS. Ich achte dabei besonders auf standardkonforme und barrierefreie Entwicklung. Aktuell interessiert mich vor allem die Entwicklung im Bereich HTML5, CSS3 und Javascript, um Webseiten auch auf Smartphones und Tabletts gut benutzbar zu machen.

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.

*