Entwicklungs-Tool für Safari

In der optischen Entwicklung von Webseiten stößt man oft auf Probleme, wenn die Seite für mehrere unterschiedliche Browser gleich angezeigt werden soll. Im Firefox gibt es hierbei das allgemein beliebte Tool „Firebug“, dass es ermöglicht, Änderungen in dem CSS live einzustellen und zu begutachten. Für den Internetexplorer gibt es seit der Version 8 auch die „Entwicklertools“, die zwar praktisch sind, aber bei weitem noch nicht an den Firebug heranreichen Hierbei ist auch zu beachten, dass sich die Darstellung im IE 8 oft von der im IE7 & IE6 unterscheidet. Hierzu haben wir noch keine komfortable Lösung gefunden.

Nun gibt es aber noch Safari: Auch dieser hat in der Anzeige seine Eigenheiten, und dabei ist noch nicht eimal der Unterschied zwischen Safari auf dem MAC oder Safari auf dem PC gemeint. Es gibt für Safari ein Equivalent zu firebug, genannt „Web Inspector“. Hierbei bekommt Safari im oberen Menu ein weiteres Tab, genannt Entwickler.  Dabei stehen viele Optionen zur Verfügung. Die Seite kann mittels verschiedener Benutzer-Agents angezeigt werden (Safari – MAC/PC, Mobile Safari, IE, FF, Opera usw.). Mit dem Punkt „Webinformationen einblenden“ erhält man eine Ansicht, die der im Firefox Firebug ähnelt.

Die Installation von Web-Inspector ist dagegen nicht ganz so komfortabel wie im Firefox. Weiterhin funktioniert der Web-Inspector nur ab der Version 3.0.0 Hierzu einmal der Ablauf:

  • Downloaden Sie folgendes Paket: WebKit
  • Öffnen Sie die Datei C:Users<Username>AppDataRoamingApple ComputerSafari
  • Fügen Sie vor dem schließenden </dict> Tag folgende Zeile ein: „<key>WebKitDeveloperExtras</key><true/>“ und speichern die Datei.
  • Nun Entpacken Sie das gedownloadete Archiv und führen run-nightly-webkit.cmd aus
  • Nun müssen Sie noch ihren Safari neu starten
  • Als letztes nun noch Bearbeiten-Einstellungen -> Erweitert und einen Hacken in den Punkt: „Menü Entwickler in der Menuleiste anzeigen“ setzen.
  • Fertig.  Webinspector ist nun installiert.