Safari Dev-Tools und iPhone Simulator

28.11.2012

[Update 19.9.2013:]

Mit iOS7 funktioniert das Ganze derzeitig nicht richtig. So lassen sich zwar die Webinformationen anzeigen, der DOM lässt sich aber nur bis zur ersten Ebene betrachten, danach ist merkwürdigerweise Schluss.

[Update Ende]

Ausgeklapptes Entwickler-Menü im Safari Screenshot von den Safari Entwickler-Tools

Für "normale" Webseiten kaum wegzudenken – Tools wie Firebug oder die Entwickler-Tools der Webkit-Browser. Hiermit lassen sich auf einfachste Weise HTML und CSS begutachten, ein schnelle Prototyping ist ebenso möglich.

Für mobile Webseiten sieht dies bisweilen etwas anders aus, die Debug-Console von iOS' Safari hilft ggfs. wenig. Doch über den Umweg des iPhone Simulators, lassen sich die Entwickler-Tools von Safari unter OSX nutzen.

Dazu muss man den iPhone Simulator starten, den mobilen Safari öffnen und die zu analysierende Website aufrufen. Soweit so gut – jetzt der Trick: Nun unter OSX den Safari öffnen. Über Entwickler > iPhone Simulator kann jetzt die offene Website im iPhone Simulator modifiziert werden. Wichtig: den Punkt "iPhone Simulator" gibt es nur, wenn dieser auch läuft.

Und wo ist der iOS Simulator?

Der iPhone Simulator ist Bestandteil von XCode, dieses muss zuvor installiert werden und ist über den Mac App Store erhältlich. Nach der Installation lässt sich der iPhone Simulator über zwei Wege starten:

XCode Menü zum starten des iOS Simulators

Möglichkeit 1: Start aus XCode heraus

Man startet XCode und wählt auf der Menü-Leiste XCode > Open Developer Tool > iOS Simulator.

Möglichkeit 2: iOS Simulator im App-Ordner ausfindig machen

Der iOS Simulator ist auch unabhängig von XCode ausführbar, dazu muss man jedoch etwas im Finder suchen. Dazu lässt man sich im Finder den Application-Ordner anzeigen. Rechts-Klick auf die XCode-App und "Paketinhalt zeigen". Nun muss man sich durch einige Ordner Navigieren: Contents > Developer > Platforms > iPhoneSimulator.platform > Developer > Applications oder man nutzt einfach den Alias unter Contents > Applications.

weitere Blogposts

Composer, Drush & Hosteurope

Composer und drush auf einem HostEurope WebServer installieren.

Whatsapp über den Browser

Whatsapp lässt sich nun auch über den Browser nutzen. Und so funktioniert's auf einem Windows Phone.

Licht ins Dunkel: Drupal's Render Array

Drupal 7 gibt Themern eine neue mächtige Möglichkeit in die Hand: Den Render Array. Dieses kleine Tutorial soll den Einstieg im Umgang mit den Render Arrays erleichtern.

MacBook Air Flash Storage Firmware Update: FileVault deaktivieren

Wer über den Mac App Store das aktuelle Flash Storage Firmware Update für sein MacBook Air installieren möchte, wird sich unter Umständen wundern, warum sich das MacBook Air nicht wie erwartet verhält.

Safari Dev Tools die Zweite

Wer seine Website mittels Safari-Entwickler-Tools analysieren will, kann dies auch in Verbindung mit seinem iPad oder iPhone tun. Mit nur wenigen Schritten kann dies am Mac realisiert werden.

iPhone: Vibrationsmuster ändern

Wer dem "monotone" Vibrieren seines iPhones überdrüssig ist, kann auch ein neues Vibrationsmuster wählen, gar sein ganz eigenes erstellen.

Drupal: Pathalias aus hierarchischer Taxonomy erzeugen

Über Pathauto lässt sich in Drupal 7 von Haus aus nur der gewählte Term selbst aus einem Taxonomy-Referenz-Feld über Tokens darstellen, wie auch Parent-Terms darstellbar sind, zeigt dieser kurze Beitrag.

OSX: Memcache in Verbindung mit MAMP einrichten

Memcache ist von Hause aus weder Bestandteil von OSX noch von MAMP. Im Netz finden sich viele Tips und Anleitungen, nicht alle haben auf Anhieb funktioniert, daher an dieser Stelle mein Weg der mich nach Rom führte.

PT.II: Power Mac G5 – Webdesign und Webentwicklung?

Teil 2 der Fragestellung, was mit einem Power Mac G5 heute noch möglich ist. Diesmal steht vor allem die Webentwicklung und das einrichten eines Servers im Vordergrund.

PT.I: Power Mac G5 – Webdesign und Webentwicklung?

In Zeiten von MacBooks mit Retina Display, noch dünneren iMacs, stellt sich die Frage, ob ein 8 Jahre alter Power Mac G5 noch für die gegenwärtigen alltäglichen Arbeiten in Sachen Webdesign und Webentwicklung taugt oder nicht.

jQuery Plugin Squeeze Gallery verfügbar

Mein erstes kleines jQuery Plugin Squeeze Gallery steht zum Download bereit. Es handelt sich dabei um ein Image-Accordion.

Geschafft!

Es ist geschafft! Einige Zeit hat es mich gekostet, um meine kleine Portfolio-Seite online zu bekommen. Nun ist es soweit.