Webseiten durchleuchten mit dem Web Inspector
ml, den 8. Februar 2008
Seit Safari die Version 3 erreicht hat, ist darin das Werkzeug Web Inspector integriert, der jedoch bislang nur über einen im Terminal umzulegenden Schalter zugänglich gemacht werden kann. Wir zeigen, wie das funktioniert, und was man mit dem Web Inspector alles anfangen kann.
Unter Mac OS X muss dafür im Terminal die Zeile defaults write com.apple.Safari WebKitDeveloperExtras -bool true eingegeben werden. Dann ist ein Neustart von Safari nötig.
Was kann der Web Inspector?
Zunächst ist der Web Inspector für zwei Benutzergruppen entwickelt worden: für Webdesigner und für Entwickler, die am WebKit herumschrauben. Wenn man so will, dann kann man den Web Inspector als Debugger für HTML verstehen, denn mit ihm ist es möglich im Detail die Struktur einer Webseite zu analysieren und gleichzeitig das Verhalten des WebKits beim Rendern der Seite zu beobachten.
Debugger für HTML
Nachdem man den Web Inspector mit der oben beschriebenen Methode aktiviert hat, kann man mit Hilfe eines Rechtsklicks bzw. Ctrl-Klicks auf ein beliebiges Element der Webseite den Inspector im Kontextmenü aufrufen. In einem neuen Fenster mit 3-spaltigem Layout wird dann zentral der HTML-Code angezeigt. Das gewählte Element wird farblich hervorgehoben. In der rechten Spalte werden die CSS-Eigenschaften des gewählten Elements angezeigt und aus welchen CSS-Klassen sich diese ableiten. In der Spalte lassen sich weitere Metriken und auch die WebKit-Klassenhierarchie anzeigen. Durch Anklicken der WebKit-Elemente lassen sich übrigens sämtliche Eigenschaften des jeweiligen Objekts anzeigen.
In der linken Spalte werden die einzelnen Bestandteile der Webseite aufgelistet. So ist auf einen Blick erkennbar, welche weiteren Bestandteile zu der Webseite gehören. Interessanter als die einzelnen Bestandteile ist jedoch der Punkt „Network“. Denn hier bekommt man statistische Informationen zu der Webseite angezeigt: wie lang dauerte es jedes Element vom Webserver zu übertragen, wie groß ist die komplette Seite und welche Teile machen den Löwenanteil aus. Zusätzlich findet man neben einigen Elementen (z. B. CSS-Dateien) einen Hinweis, wie sich z. B. Bandbreite sparen lässt.
Aus HTML für HTML
Ein wirklich herausragendes Merkmal des Web Inspectors muss an dieser Stelle noch erwähnt werden: er ist zum größten Teil in HTML und CSS geschrieben. Die Basis besteht aus wenigen hundert „echten“ Programmzeilen. Der Rest wurde mit Hilfe existierender Web-Technologien programmiert. Damit kann auch ein bislang in der Anwendungsentwicklung unbedarfter HTML-Entwickler den Web Inspector bei Bedarf anpassen, weiterentwickeln oder von Fehlern befreien. Gleichzeitig ist der Web Inspector ein Beispiel dafür, wie die Grenzen zwischen traditionellen und Web-Anwendungen verwischen.
Fazit
Mit dem Web Inspector haben die WebKit-Entwickler ein für Designer als auch Entwickler gleichermaßen mächtiges Werkzeug geschaffen. Damit sollte es zukünftig schneller möglich sein, den Schuldigen für ein fehlerhaftes Seiten-Rendering zu finden. Häufig sind nämlich nicht Fehler der Browser-Engine an der verkorksten Darstellung schuld sondern falscher HTML-Code. Für Web-Designer ergibt sich damit die Möglichkeit solche Fehler schneller zu finden und ihre Seiten ggf. an geltende Web-Standards anzupassen. Umgekehrt haben Entwickler mit dem Web Inspector eine komfortable Möglichkeit die Elemente in ihrem Quellcode zu identifizieren, die für Fehler verantwortlich sind.