Version: GSB 7Tipps und Tricks

Das folgende Kapitel gibt einen Überblick über eine Auswahl zur Verfügung stehender Entwicklerwerkzeuge.

Firebug für den Mozilla Firefox

„Firebug“ ist ein Add-On für den Browser Mozilla Firefox und kann kostenlos direkt aus dem Browser über Extras > Add-Ons > Erweiterungen herunterladen installiert werden. Der „Firebug“ wird nach der Installation über F12 aufgerufen oder über ein grünes Symbol am rechten unteren Rand des Browsers.

Ein Element auswählen

Aktivieren Sie im „Firebug“ links oben auf das Icon zum Auswählen. Wenn Sie nun über ein Element der Website fahren wird es farblich umrandet und im unteren Bereich eine Ansicht des Quelltextes und der zugehörigen Stylesheets angezeigt. Durch das Klicken auf ein Element wird diese Ansicht fixiert. Sie können nun im rechten Bereich im Reiter Styles die zugehörigen Stylesheets editieren. Änderungen werden sofort im oberen Fenster angezeigt. Zudem zeigt der „Firebug“ auch an, in welcher Datei bzw. in welchem GSB-Dokument die entsprechende CSS-Definition zu finden ist.

Änderungen im „Firebug“ verschwinden nach dem Neuladen der Seite wieder, denn alle CSS Definitionen werden nur „temporär“ bzw. lokal im Browser geändert.

ACHTUNG: Für die lokale Installation von (OpenSource-)Software kann weder Support noch Haftung übernommen werden. Die Nutzung erfolgt auf eigenes Risiko.

IE Developer Toolbar für Microsoft Internet Explorer

Die Microsoft Internet Explorer „Developer Toolbar“ wird von Microsoft kostenlos zur Verfügung gestellt und kann für ältere Browser von der Microsoft Homepage heruntergeladen und installiert werden. Nach der Installation wird die Toolbar in älteren Browsern über Ansicht > Explorer Leiste > IE Developer Toolbar aufgerufen. Ab Version 8 ist die 'IE Developer Toolbar' fester Bestandteil des Internet Explorers und unter Extras > Entwicklertools oder über die Taste F12 zu finden.

Ein Element auswählen

Aktivieren Sie Suche > Element durch Klick auswählen oben links in der Toolbar. Wie beim „Firebug“ werden die Elemente, über die man mit der Maus fährt, blau umrandet und deren Quelltext und Stylesheets im unteren Fenster angezeigt. Mit einem Klick wird die Anzeige fixiert. Hier können Elemente nun nicht direkt geändert werden, sondern CSS Angaben können in dem mittleren Fenster überschrieben werden, indem man sie mit dem neuen Wert einträgt (z.B. color: #000;). Änderungen gelten immer nur für das markierte Element und zeigen nicht an, ob andere Elemente von dieser Änderung ebenfalls betroffen sind.

Änderungen in der IE Developer Toolbar verschwinden nach dem Neuladen der Seite wieder, denn alle CSS Definitionen werden nur „temporär“ bzw. lokal im Browser geändert.

Ab dem IE8 können die einzelnen Klassen die für ein Element herangezogen werden in der rechten Seite über "Format nachverfolgen" angezeigt und geändert werden. Neue CSS Attribute werden im Reiter "Attribute" eingetragen.

ACHTUNG: Für die lokale Installation von (OpenSource-)Software kann weder Support noch Haftung übernommen werden. Die Nutzung erfolgt auf eigenes Risiko.

Weitere Tools

Auch andere Browser, wie z.B. Opera bieten ähnliche Tools zum Testen an. Bei Opera heißt das Programm "Dragonfly" und ist ab Version 10.50 fester Bestandteil des Browsers. Es kann mit einem Rechtsklick auf die Seite und 'Elemente untersuchen' aufgerufen werden. Für frühere Versionen bietet Opera einen Download von Dragonfly an.