Im Folgenden finden Sie ein paar sehr nützliche Erweiterungen für den Firefox.

View Source Chart – die Kästchen im Quelltext sichtbar machen

Webseiten bestehen aus rechteckigen Kästchen, die im Browserfensterübereinander-, nebeneinander- und ineinandergestapelt werden, und es gibt eine kleine, aber feine Firefox-Erweiterung namens View Source Chart, die den Quelltext als grafische Übersicht darstellt.

Um die nur 21 KByte große Erweiterung zu installieren, surfen Sie mit dem Mozilla Firefox zur folgenden Adresse:

• https://addons.mozilla.org/firefox/655/

Im Kontextmenü (rechte Maustaste) finden Sie nach einem Neustart des Firefox den Befehl SEITENQUELLTEXT FORMATIERT ANZEIGEN. Wenn Sie auf diesen Befehl klicken, wird Ihnen der Quelltext ungefähr so angezeigt:

Abbildung 20.1: Eine Webseite besteht aus rechteckigen Kästchen …

Web Developer – das Schweizer Offiziersmesser

Web Developer ist eine Sammlung von wichtigen Werkzeugen und für viele Webentwickler eine der wichtigsten Firefox-Erweiterungen. Beim Programmierer Chris Pederick wird automatisch eine deutschsprachige Version installiert, sofern in Ihrem Firefox deutsch als bevorzugte Sprache eingestellt ist :

• http://chrispederick.com/work/web-developer/

Mit der Web Developer Toolbar können Sie unzählige Dinge tun: Webseiten analysieren, Barrierefreiheit prüfen, CSS von beliebigen Webseiten anzeigen und editieren, Grafiken ausblenden, Objekte pixelgenau abmessen und vieles mehr.

Zum Beispiel lässt sich von jeder Webseite, die Sie im Firefox betrachten, das aktuell verwendete CSS links in der Sidebar anzeigen und bearbeiten:

Abbildung 20.2: CSS live bearbeiten mit der Web Developer Toolbar

Der Browser zeigt Ihre Änderungen live im Browserfenster an, sodass man auf diese Weise spielend die Auswirkungen von CSS-Befehlen lernen kann.

Zur Prüfung und Analyse ist Web Developer ein wirklich unverzichtbares Werkzeug. Nehmen Sie sich ein bisschen Zeit zum Kennenlernen, und schon nach kurzer Zeit werden Sie sich fragen, wie Sie jemals ohne dieses Werkzeug arbeiten konnten.

Firebug – das Analysetool

Das Add-on Firebug bietet fantastische Möglichkeiten zur Analyse des Quelltextes bis hin zum Live-Editieren der Seite.

Zum Installieren und Kennenlernen surfen Sie zu folgender Site:

• http://www.getfirebug.com/

Abbildung 20.3: Firebug ist ein hervorragendes Analysetool

Nach dem üblichen Firefox-Neustart gibt es im Kontextmenü (rechte Maustaste) den unscheinbaren Befehl INSPECT ELEMENT (oder auf deutsch ELEMENT UNTERSUCHEN).

Abbildung 20.3 zeigt den Firebug mit ausgewählter ul im Navigationsbereich. Rechts werden alle relevanten Styles angezeigt, inklusive Vererbung und Quelle. Im Web gibt es eine deutschsprachige Einführung zu Firebug von mir. Auf diesem Artikel basierend gibt es in »Little Boxes, Teil 2« auch ein Firebug-Tutorial.

ColorZilla – die Farbenwahl

Haben Sie auf einer Webseite schon mal eine Farbe gesehen, deren genauen Farbwert Sie gerne gewusst hätten? Dann ist ColorZilla das Tool der Wahl, denn es liefert Ihnen mit zwei Klicks den Farbwert einer beliebigen Farbe.

Eine deutsche Version finden Sie auf der ColorZilla-Homepage:

• http://colorzilla.com/firefox/

Nach der Installation sitzt das Tool links unten im Firefox-Fenster. Zur Aktivierung einfach mit der linken Maustaste einmal draufklicken und dann mit dem zum Fadenkreuz gewordenen Mauszeiger
auf die gewünschte Farbe im Browserfenster zeigen und klicken.

Nach einem Rechtsklick bekommen Sie ein Menü mit weiteren Befehlen:

Abbildung 20.4: Das Kontextmenü von ColorZilla