Die gängigen Browser haben nette Entwickerwerkzeuge. Bei Firefox findet man im Kontextmenü die praktische Funktion Element untersuchen. Er öffnet den Seiteninspektor. Bei Chrome geht es mit Untersuchen analog: Man kann sich den Code der Website ansehen und ihn sogar verändern. (Natürlich nur in der lokalen Ansicht, nicht auf dem Webserver – das wäre ja noch schöner.) Man erfährt, welche Schriften eine Site nutzt, wie das Boxmodell greift und welche CSS-Regeln vorhanden sind.
Chrome listet auch die verknüpften Quellen, gibt in der Console Fehlermeldungen aus, die während des Renderns aufgetreten sind und schlüsselt in der Timeline das Ladeverhalten einer Site auf. Damit kann man stundenlang spielen, selbst wenn man keine eigene Webseite hat, deren Aussehen oder Leistung man verbessern könnte. Nein, das ist auch interessant, wenn man lediglich gerne hinter die Kulissen schaut. Denn hinter den Kulissen einer Website findet sich nun einmal HTML-Code und CSS.
Zwei weitere praktische Erweiterungen für diesen Zweck empfehle ich für Chrome:
Wappalyzer
Wappalyzer (Store) liefert eine technische Übersicht zu einer Website: Betriebssystem, Webserver, Widgets und Scripts, Frameworks, Analysetools, Werbenetzwerke, etc. Man kann diese Erweiterung auch sportlich nutzen. Nämlich mit der Aufgabe: Wer findet zuerst eine Website, auf der nur reines HTML läuft – und keine Sharing-Widgets, Analysescripts, Javascript-Frameworks und der ganze Overhead?
CSS Peeper
CSS Peeper (Store) ist auf Gestalter zugeschnitten. Die Erweiterung zählt die in der CSS-Stildatei definierten Farben mit Hex-Farbcode auf. Man sieht, welche Schriften hinterlegt sind und, IMHO am interessantesten, kann unter Assets die verlinkten Grafiken einsehen und bei Bedarf auch in einem separaten Fenster öffnen und speichern. Für letzteres benutze ich in Firefox gerne den Befehl Extras > Seiteninformationen und den Reiter Medien. Das hier geht aber schneller.