Firefox-Addons

Seitenbestandteile anzeigen und Code-Fehler aufspüren

15.06.2015 | 15:42 Uhr | Hans-Christian Dirscherl

DOM Inspector
Vergrößern DOM Inspector

DOM-Inspector: Alle Bestandteile einer Website anzeigen

Ein wichtiges Tool ist beziehungsweise 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 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.

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 zeigen die Fehler einer Webseite
an
Vergrößern HTML Validator/HTML Tidy zeigen die Fehler einer Webseite an

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.

Download: HTML Validator

X-Ray: Mit einem Mausklick blendet Ihnen das Tool die
HTML-Tags direkt in die Seite ein.
Vergrößern X-Ray: Mit einem Mausklick blendet Ihnen das Tool die HTML-Tags direkt in die Seite ein.

X-Ray: HTML-Tags einblenden

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

Professor X liefert Hintergrundinformationen zur
Webseite
Vergrößern Professor X liefert Hintergrundinformationen zur Webseite

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.

Download : Professor X

Lese-Tipps:







113154