MACNOTES

Veröffentlicht am  8.02.08, 22:05 Uhr von  

Webseiten durchleuchten mit dem Web Inspector

SafariSeit Safari die Version 3 erreicht hat, ist in ihm ein Werkzeug integriert, welches wohl die Wenigsten bislang zu Gesicht bekommen haben: den Web Inspector. Der Grund dafür dürfte sein, dass Apple den Web Inspector nur über einen im Terminal umzulegenden Schalter zugänglich macht. Unter Mac OS X muss dafür im Terminal die Zeile

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

eingegeben werden. Unter Windows müssen in die Datei
C:Documents and SettingsUSERNAMEApplication DataApple ComputerSafariWebKitPreferences.plist
die Zeilen

<key>WebKitDeveloperExtras</key>
<true/>

eingetragen werden. Dann ist jeweils ein Neustart von Safari nötig.

Und was kann man jetzt damit anfangen? 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 en Detail die Struktur einer Webseite zu analysieren und gleichzeitig das Verhalten des WebKits beim Rendern der Seite zu beobachten.

[singlepic id=434 w=434]
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.

[singlepic id=433 w=433]
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.

[singlepic id=432 w=432]
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.

 Und wie ist deine Meinung?  Schreib uns einfach!

 7 Kommentar(e) bisher

  •  MM2410 sagte am 8. Februar 2008:

    Super… Das kommt ja schon fast an das Firefox-Addon Firebug heran.
    Sowas habe ich echt schmerzlich beim Safari vermisst. Danke für den wertvollen Tipp!

    Antworten 
  •  Adam Riese sagte am 8. Februar 2008:

    Komisch – ich hab rechts neben der Hilfe die Option “Debug”, hinter der sich ein gigantisches Pulldown-Menü verbirgt, welches unter anderem auch “Web Inspector” beinhaltet.
    Ich weiß nur nicht mehr, wie ich dazu gekommen bin – jedenfalls nicht durch einen Terminal-Eintrag, glaub ich.

    Antworten 
  •  ha sagte am 8. Februar 2008:

    Evtl. durch ein Plugin wie Saft oder SafariStand?

    Antworten 
  •  Christoph sagte am 9. Februar 2008:

    Es gibt ihn übrigens auch in Omniweb. Webkit halt. Ich find ihn unschlagbar, gerade zum überprüfen von ladezeiten. etc

    Antworten 
  •  ml sagte am 9. Februar 2008:

    Das Debug-Menü lässt sich auch im Terminal aktivieren:

    defaults write com.apple.Safari IncludeDebugMenu 1

    Antworten 
  •  tinbert sagte am 9. Februar 2008:

    Witzigerweise kann man “Inspect Element” auch auf den Debugger selbst anwenden :)

    Antworten 
  •  ekko sagte am 11. Februar 2008:

    Schade das sich nicht wie beim Firebug die Werte verändern lassen. Gerade beim “Desigenen” finde ich diese Möglichkeit extrem wertvoll!

    Antworten 

Kommentar verfassen

 0  Tweets und Re-Tweets
       0  Likes auf Facebook
         0  Trackbacks/Pingbacks
          Werbung
          © 2006-2013 MACNOTES.DE. Made with insanely great for all things Mac. Apple.de