Webdesign Berlin – WebMatter.de

Firefox Add-On: Firebug

Ebenso hilfreich wie die Webdeveloper Toolbar ist das Firefox-Add-on Firebug.

Nach Installation sieht man in der Statusleiste des Browsers ein kleines Käfer-Icon. Sobald man auf dieses Icon klickt, öffnet sich ein Fenster, in dem verschiedene Möglichkeiten angeboten werden, die aktuell im Browser geöffnete Webseite zu untersuchen.

Hier einige der nützlichsten Funktionen:

1. Untersuchen

Wenn man auf “Untersuchen” und das Untermenu “HTML” klickt, kann man im Quelltext, der sich im unteren linken Fenster öffnet, die Stelle suchen, zu der man nähere Informationen haben möchte. Beim Überfahren der einzelnen HTML Elemente wird der jeweilige Bereich markiert.

Im rechten Bereich kann man unter CSS die sich jeweils auf diesen Bereich auswirkenden CSS Befehle sehen. CSS Regeln, die von einer anderen Regel überschrieben werden, werden durchgestrichen angezeigt. Man hat die Möglichkeit, hier eine geplante Änderung im CSS temporär auszuprobieren, indem man die CSS Regel im rechten Fenster einfach überschreibt.

Ein weiterer nützlicher Tab im rechten Bereich ist “Layout”. Hier kann man sehen, welche Maße der markierte Layoutbereich hat.

2. Ladezeit testen

Um die Ladezeiten zu testen, muss unter dem Tab Netzwerk die Netzwerkkonsole für die zu prüfende Seite aktiviert werden. Beim erneuten Laden der Seite wird nun angezeigt, welche Ladezeiten beim Laden der einzelnen Bilder und Scripts anfallen. So kann man erkennen, wo die Ladezeiten gegebenenfalls optimiert werden müssen.