Mobiles Web-Debugging mit iWebInspector

Geschrieben am von Daniel Koch
Dieser Beitrag ist als alt markiert. Dies bedeutet, dass der Inhalt alte Informationen beinhaltet. Es gibt mittlerweile aktuellere und bessere Lösungen für die behandelten Themen.

Für das Debugging, Testing und die Qualitätssicherung von mobilen Websites existieren noch nicht viele Tools. Neben weinre bieten sich dem Frontend-Entwickler einige Bookmarklets und Emulatoren der jeweiligen Plattformen, diese kommen jedoch meist mit sehr eingeschränkten Möglichkeiten für das Debugging von Websites und -Applikationen daher.

Ein recht neuer Vertreter, der hier einen sehr vielversprechenden Eindruck vermittelt, nennt sich iWebInspector, entwickelt von Max Firtman.

Der nachfolgende Artikel soll kurz die Handhabung dieser Software erklären.

Einsatzgebiete, entnommen der Produkt-Website:

  • iWebInspector is a free tool to debug, profile and inspect web applications running on iOS Simulator (iPhone or iPad).
  • You can check resources, see and change HTML & CSS, use breakpoints on JavaScript code, create charts and more just as if you were on Safari for Desktop, Chrome or Firebug.
  • It works for any web in Safari -the web browser-, for a chrome-less webapp (full-screen) and also for apps using UIWebView -including PhoneGap application.

Die Funktionen, entnommen dem Entwickler-Blog:

  • See and browse every element on your HTML element. You can change attributes, content and styles and see how they apply on Safari
  • See all the resources involved in this page, including Databases, Local Storage, Cookies and ApplicationCache
  • Check all the network traffic on your website
  • See all your scripts, create breakpoints, watches and debug your JavaScript code.
  • Record a timeline showing you rendering, scripting and loading times while you browse on Safari
  • Profile your JavaScript code
  • Audit your code, showing you a report on performance and other stuff
  • See and use the JavaScript console

Die Systemvoraussetzungen und Installation

Der iWebInspector ist nur für Mac OS X 10.6 oder höher verfügbar. Ebenfalls vorausgesetzt wird das Apple Xcode SDK in Version 4.2 (wichtig ist an dieser Stelle das dort enthaltene iOS 5 SDK).

Die Installation ist denkbar einfach. Nach dem Download der .dmg-Datei muss diese gemountet werden, danach kann die iWebInspector.app in den Applikations-Ordner des Betriebssystems kopiert, sowie von dort aus gestartet werden.

Debugging einer mobilen Website mit dem iWebInspector

Es öffnet sich der folgende Startdialog:

Über die Schaltfläche links, oben „Open iOS Simulator“ startet iWebInspector den Simulator des Apple iOS SDK.

Hier nun Safari Mobile starten und die gewünschte Seite aufrufen:

Innerhalb des iWebInspector kann nun über die Schaltfläche „Load from Safari“ eine Liste der aktuell geöffneten Fenster in den Inspektor gezogen werden:

Die gewünschte Seite wählen (hier aktuell nur eine, da nur ein Browserfenster geöffnet ist) und das DOM der Seite wird geladen:

Nun können beliebige Änderungen, Analysen etc. durchgeführt werden. Funktionen und Oberfläche dürften dem ein oder anderen aus der Desktop-Version des Safari (Developer Tools) oder aus Chrome (Devtools) bekannt sein.

Es funktioniert nicht?

Mögliche Ursache könnte sein, dass innerhalb des Simulators nicht die korrekte Gerät-Version ausgewählt ist. Da für die Datenkommunikation mit dem mobilen Safari eine neue API genutzt wird, die erst mit iOS5 eingeführt wurde, muss innerhalb des Simulators unter „Hardware“ > „Version“ die entsprechende Version gewählte sein!

Weitere Hinweise zur Fehlerbehebung bietet ggf. auch die Logging-Konsole von Mac OS oder der Blog des Entwicklers.

Download

Der iWebInspector ist zur Zeit noch im Betastadium (Version 0.9) und kann auf der Produkt-Website: http://www.iwebinspector.com/ heruntergeladen werden.

Happy mobile debugging!