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.
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.
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.
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.
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.
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.
Ü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.
