Eine weitere schicke Extension für den beliebten Firefox. Mit der Erweiterung “X-Ray” ist es möglich HTML-Tags direkt in der Seite anzeigen zu lassen. Somit weiss man sofort welche Elemente man stylen möchte. Sehr praktisch in Verbindung mit der EditCSS Erweiterung beispielsweise. Im übrigen ein guter Zusatz zu dem bereits sehr mächtigen Tool Webdeveloper Extension welche kürzlich erst Version 1.0 erreicht hat.

Die Bedienung von X-Ray ist simpel. Nach der Installation einfach irgendwo auf einer Seite rechtsklicken und “X-Ray” im Kontextmenü auswählen. Daraufhin werden die HTML-Tags angezeigt. Nicht vergessen den Browser vorher neuzustarten. Der Autor lässt die Tags mit dem CSS Modifier “:before” und “:after” einblenden. Ich benutze diese nicht und kann daher nicht sagen ob das eventuell vorhandene Stile überschreibt.

Leider habe ich noch keinen Weg gefunden das X-Ray auszuschalten nachdem es aktiviert wurde. Da hilft nur das Neuladen der Seite was zur Folge hat, dass EditCSS z.B. ebenfalls keinen Effekt mehr auf die Seite hat. Ansonsten ist es doch recht praktisch und verschafft vorallem einen guten Überblick über seine aktuelle Markup-Topologie und es spart einem oft den Weg in die Quelltextanzeige.

Zum Blog des Autors und zur Installation von X-Ray geht es hier