Seitenbestandteile anzeigen und Code-Fehler aufspüren
DOM-Inspector: Alle Bestandteile einer Website anzeigen
Ein wichtiges Tool ist bzw. war 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 sogenannten 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.
Der DOM-Inspector wird allerdings großenteils durch das oben erwähnte Add-in Firebug sowie durch die in Firefox integrierten Entwicklerwerkzeuge im Menü "Extras" ersetzt.
HTML Validator/HTML Tidy: Quelltext auf Fehler überprüfen
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.
X-Ray: HTML-Tags einblenden
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 Quelltextes 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.
Professor X: Header-Informationen anzeigen
Das Addon zeigt die Header-Informationen einer Website inklusive der darin befindlichen Skripte und CSS-Informationen an. Professor X wird ebenfalls über das Kontextmenü der rechten Maustaste gestartet: Also mit der rechten Maustaste in die Webseite klicken und im Kontextmenü dann "Professor X" auswählen.
(PC-Welt)