Seitenbestandteile anzeigen und Code-Fehler aufspüren

Ein wichtiges Tool ist der Dom Inspector. Mit dem DOM-Inspector (DOM steht für Document Object Model, das die Struktur einer Website beschreibt) können Sie die Struktur und die Bestandteile einer in Firefox geladenen Webseite mit all ihren HTML-, CSS- und Script-Bestandteilen sowie deren Methoden und Eigenschaften in einem neuen Fenster baumartig anzeigen lassen und damit leichter analysieren. Im Rahmen des DOM-Modells kann man beispielsweise mit Javascript auf die Bestandteile einer Website zugreifen. Links in der Baumansicht suchen Sie das Sie interessierende Element (den so genannten Knoten) aus, rechts werden dann dessen Daten angezeigt. In der Browser-Ansicht können Sie die einzelnen Bestandteile einer Website hervorheben um sie leichter aufspüren zu können. Leere Textknoten („#text") lassen sich ausblenden um die Darstellung übersichtlicher zu machen: Nehmen Sie dazu im DOM-Menü „Ansicht, Leere Textknoten anzeigen“ das Häkchen weg. Alle mit einem „+“ gekennzeichneten Knoten lassen sich per Mausklick öffnen und anzeigen. Praktisch ist die Suchfunktion, mit der Sie gezielt nach bestimmten Knoten suchen können.

Für den DOM-Inspector hält Mozilla übrigens noch eine Reihe ergänzender Addons bereit. Eine solche Ergänzung ist beispielsweise Event Spy für Javascripts.

Mit dem Firefox-Addon HTML-Validator können Sie Webseiten komfortabel auf HTML-Fehler durchsuchen und sicherstellen, dass sie mit den Vorgaben des W3-Konsortiums übereinstimmen. Vor der Benutzung können Sie zwischen unterschiedlichen Test-Verfahren wählen (Hinweis: einen umfassenden Überblick über Validierungs-Tools für HTML, CSS und Co. finden Sie hier).

Mit einem doppelten Mausklick auf das Icon lässt sich der Seitenquelltext samt den Fehlermeldungen anzeigen. Wenn Sie auf die Fehlermeldungen klicken, wird die betreffende Stelle im Quelltext angesprungen.

Download: HTML Validator

Die Firefox-Erweiterung X-Ray ("Röntgenstrahl") erlaubt es, den Quelltext einer Webseite mit zu sehen. Im Unterschied zu der in Firefox schon integrierten Funktion zur Anzeige des Quellttextes, zeigt X-Ray den Quelltext nicht etwa in einem extra Fenster an, sondern direkt in der Webseite. Die Tags werden also in der Website-Ansicht im Browser angezeigt. Auf diese Weise lässt sich schnell nachvollziehen, wie ein Dokument aufgebaut ist, ohne lange im Quelltext suchen zu müssen. Die Ansicht selbst ist allerdings etwas verwirrend und erfordert ein geübtes Auge. Um X-Ray zu starten, klicken Sie mit der rechten Maustaste auf die Seite und wählen dann im Kontextmenü des Mauszeigers X-Ray.

Download: X-Ray

Das Addon zeigt die Header-Informationen einer Website inklusive der darin befindlichen Skripte und CSS-Informationen an.

Download: Professor X

Webmaster-Tools für Suchmaschinen-Optimierung und Traffic-Analyse

Webmaster-Tools für HTML, CSS, Javascript und Web-Apps

Firebug: Webseiten untersuchen mit Firefox-Addon