6 Dinge, die mir bei den Firefox-Entwicklertools neu waren

Firefox-Entwicklertools Inspector

Letztes habe mich intensiver mit den Firefox-Entwicklertools beschäftigt … und doch noch ein paar Dinge entdeckt, die mir vorher entgangen waren.

Ich gehe hier jetzt nicht auf die grundlegende Bedienung der Firefox-Entwicklertools ein. Aber so viel: Man ruft sie beispielsweise auf, indem man in ein beliebiges Element mit der rechten Maustaste klickt und „Element untersuchen“ wählen.

Hier einmal die Ansicht der Entwicklertools. Die Zahlen verweisen auf die Tipps, die unten beschrieben sind.

Firefox-Entwicklertools - Tipps

Regeln – CSS-Stile

Tipp 1: Durch den Tab „Berechnet“ erhält man das Ergebnis von Angaben wie font-size: 1.3em;, erfährt wie viel Pixel das ergibt. Das wusste ich. Neu entdeckt habe ich aber, dass man unter so einer berechneten Angabe auf den kleinen Pfeil klicken kann, dann erhält man die Information, woher die Angaben stammen, die zu dem Ergebnis geführt haben.

Woher berechnete Werte stammen

Tipp 2: Normalerweise zeigen die Entwicklertools bei „Regeln“ nur die Angaben, die aus den eigenen Stylesheets stammen. Möchte man aber auch die CSS-Angaben sehen, die vom Browser selbst stammen, so geht das folgendermaßen: Zuerst die Einstellungen aufrufen über das Zahnrad rechts, dann bei Inspektor „Browser-eigene Stile anzeigen“ ankreuzen.

Firefox-Entwicklertools: browsereigene Stile

Inspektor – linker Bereich

Im Inspektor – dem linken Bereich – habe ich ebenfalls ein paar nützliche Dinge entdeckt.

Tipp 3: Ganz rechts ist ein Suchfeld, da kann man ein bestimmtes Element eingeben und mit „Enter“ kommt man zum nächsten.

Elemente suchen

Tipp 4: Wenn man sich durch die Elemente klickt, dann lassen sich diese expandieren. Durch zusätzlichen Klick mit ALT-Taste auf den Pfeil werden alle Kindelemente auf einem expandiert – das finde ich ebenfalls recht praktisch.

alle Elemente auf einmal expandieren

 

Tipp 5: In der Selektorzeile oben kann man auf einen Selektor klicken und wenn man die Maus gedrückt hält, werden einem auch Geschwisterelemente, d.h. Elemente auf derselben Ebene angezeigt. Damit ist das eine schnelle Möglichkeit, dahin zu navigieren.

Geschwisterelemente anzeigen lassen

 

Übrigens befindet sich im Kontextmenü (Rechtsklick auf ein Element) eine Reihe von praktischen Optionen. „Eindeutigen Selektor kopieren“ erzeugt einem einen Selektor, um exakt dieses Element auszuwählen – auch nützlich.

Bildschirmgrößen testen

Tipp 6: Bildschirmgrößen testen verwende ich häufig und ich finde diese Funktion sehr nützlich für responsive Webseiten. (Aufruf durch Klick auf das kleine Symbol links).

Entgangen war mir aber, dass es dort auch eine Möglichkeit gibt, direkt einen Screenshot zu machen. Der Screenshot landet dann direkt als PNG im Download-Ordner.

Screenshot machen bei Bildschirmgrößen testen

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>