Remote Debugging von .JS WebApps unter iOS

Für eine WebApp möchte ich das Event orientationchange verwenden. Jenes wird ausgelöst sobald ein Smartphone/Tablet vom Nutzer gedreht wird. Ich will es benutzen um die angezeigten Inhalte zu verändern, sobald die App von der Vertikalen in die Horizontale bewegt wird.

Tatsächlich wird dieses Event aber nur auf Mobilgeräten ausgelöst, womit die Entwicklung auf dem Desktop -nun ja- schwieriger wird.

Glücklicherweise gibt es mit dem iOS remote Webinspektor eine Lösung.

Schritte:

  1. IOS Simulator starten
  2. „Einstellungen / Safari / Erweitert / Webinformationen“ aktivieren
  3. Webseite auf Mobilgerät öffnen
  4. Safari „Einstellungen / Erweitert / Entwickler-Menü anzeigen“ aktivieren
  5. Safari „Entwickler / iOS Simulator / .. „ öffnen. Wobei „..“ der Name der im Simulator geöffneten Seite ist.
  6. Im nun geöffneten „Web Inspector“ das .js Skript suchen welches das gesuchte Event auswertet. Dort per Klick auf die Zeilennummer nen Breakpoint setzen.
  7. Je nach verwendetem Web-Framework muss man nun auf dem Mobilgerät die Seite neu laden. Bei Meteor ist das nicht notwendig.
  8. Nun im iOS Simulator „Hardware / Rotate Left“ auswählen
  9. Voila: Der Debugger springt an und verrät bspw. den Inhalt des Objektes

Muss es wirklich Safari sein?

Soweit ich weiß, kann Chrome nur mit den mobilen Chrome Varianten spielen und Firefox WebIDE scheint noch etwas unfertig. Letztere habe ich ausprobiert und musste aber feststellen, das der Debugger Properties von Objekten nicht auflöst. Da es ja ein bisschen witzlos ist, zu wissen, das der Browser hier mit dem Objekt „this“ hantiert ohne zu wissen welche Eigenschaften es hat, ist Safari momentan die einzig sinnvolle Variante für iOS Devices.

Schreibe einen Kommentar