Firefox-Addons

Seitenbestandteile anzeigen und Code-Fehler aufspüren

Mittwoch, 23.04.2014 | 09:58 von 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:







Mittwoch, 23.04.2014 | 09:58 von Hans-Christian Dirscherl
Kommentieren Kommentare zu diesem Artikel (7)
  • Thor Branke 09:29 | 24.04.2014
  • mike_kilo 09:11 | 24.04.2014
  • kalweit 09:05 | 24.04.2014

    Zitat: Thor Branke
    Mit dem Classic Theme Restorer 1.1.8 kann man das gut ausbügeln.
    Seit dem HiDPI Update sind die Geckos für mich komplett unbrauchbar. Die Chancen stehen gut, dass mich nach 20 Jahren der IE doch noch kriegt. Gut gemacht Mozilla. :spitze:

    Antwort schreiben
  • Thor Branke 08:52 | 24.04.2014

    Zitat: deoroller
    24.5 ESR erscheinen. (Geplante Neuerungen: Sicherheitsaktualisierungen der ESR Version 24.)
    24.5.0esr liegt schon seit vorgestern auf Mozillas FTP-Server und ist bereits bei mir installiert. Der 29iger läuft bis jetzt als "Portable" zu Testzwecken wegen des neuen Profils. Wo findet man eigentlich die RC-Versionen? :grübel: @ kalweit Mit dem Classic Theme Restorer 1.1.8 kann man das gut ausbügeln. Habe mir aus den verschiedenen Welten jetzt die persönlich geeignetsten Einstellungen heraus gesucht. Das ist dann eben doch immer wieder das Schöne am Firefox. Man kann den Designer-Fundamentalismus mit machen, man muss aber nicht. Im Gegensatz zur Windows-8-Falle ... :böse:

    Antwort schreiben
  • deoroller 08:43 | 24.04.2014

    Zeitgleich zum Firefox 29 soll 24.5 ESR erscheinen. (Geplante Neuerungen: Sicherheitsaktualisierungen der ESR Version 24.)

    Antwort schreiben
113154