Webkit: Web Inspector überarbeitet
ml, den 3. Oktober 2008
Mit Hilfe des im WebKit integrierten Web Inspectors können Web-Designer Webseiten auf Herz und Nieren testen, analysieren und debuggen. In einem älteren Artikel haben wir bereits einmal die Möglichkeiten des in Safari integrierten Web Inspectors beleuchtet.
Jetzt hat das WebKit-Team den Web Inspector gründlich überarbeitet und die Ergebnisse lassen sich bereits in den aktuellen Nightly-Builds ausprobieren.
Zunächst haben die Entwickler an der Bedienbarkeit des hauptsächlich in HTML, Javascript und CSS geschriebenen Inspectors gearbeitet. Die Benutzeroberfläche wurde überarbeitet und die Konsole ist jetzt aus jedem Panel heraus verfügbar. Die Bedienbarkeit der Konsole wurde durch Auto- und Tab-Vervollständigung verbessert. Zudem wurde die Kompatibilität mit der Firebug– und window.console-API verbessert.
Neue Panel
Im neuen Element-Panel haben die Entwickler die frühere DOM-Ansicht integriert. Sie aktualisiert sich automatisch, sobald Elemente aus dem DOM-Tree entfernt oder hinzugefügt werden. Einzelne Elemente lassen sich inspizieren und CSS-Eigenschaften lassen sich temporär ausschalten.
Im Resource-Panel hat das WebKit-Team das alte Network-Panel integriert. Die Ergebnisse lassen sich nun anhand unterschiedlicher Kriterien sortieren. Außerdem kann man sich jetzt die Latenz zwischen Anfrage und Server-Antwort anzeigen lassen.
Das Scripts-Panel beinhaltet einen neuen Javascript-Debugger, der den früher als separates Modul entwickelten Javascript-Debugger Drosera ersetzt. Der neue Debugger soll schneller und komfortabler als Drosera sein.
Interessant beim Finish einer Webseite dürfte das Profile-Panel werden. Hier lässt sich erkennen, wo die meiste Zeit beim Ausführen von Javascript-Scripts verbraucht wird. Auch hier haben die Entwickler auf die Kompatibilität zur Firebug console.profile()-API geachtet.
Mit HTML 5 hat das sogenannte Database Local Storage Einzug in den HTML-Standard gehalten. Damit können Web-Anwendungen Daten lokal beim Benutzer speichern, wenn z. B. temporär keine Internetverbindung besteht. Mit Hilfe des Database-Panels lassen sich sämtliche offenen Datenbanken einer Seite anschauen. Zudem lassen sich aus dem Panel heraus auch SQL-Anfragen an die Datenbanken schicken.
Zu guter Letzt wurde die Suche überarbeitet, die jetzt immer lokal in jedem Panel arbeitet und die Ergebnisse dort auch gleich graphisch hervorhebt. Im Element- und Profile-Panel lassen sich sog. spezialisierte Suchanfragen starten, die z. B. nur XPath- oder CSS-Selektoren in die Suche mit einbeziehen.