Safari Dev Tools die Zweite

03.05.2013

[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]

Wer eine Website mittels den Safari-Entwickler-Tools analysieren will, dem habe ich bereits in meinem Blogpost Safari Dev-Tools und iPhone Simulator gezeigt, wie dies über den iOS Simulator zu realisieren ist.

Es gibt jedoch auch eine Möglichkeit, "nativ" auf dem iDevice, also iPad oder iPhone, analysieren und debuggen zu können.

Dazu sind ein paar kleine zur Vorbereitung nötig:

Screenshot: iPad Homescreen

Schritt 1: Einstellungen öffnen

Auf dem Homescreen des iPad oder iPhone die Einstellungen öffnen

Screenshot: iPad Safari Einstellungen

Schritt 2: Safari Einstellungen

In den Einstellungen den Punkt Safari wählen und auf der sich öffnenden Seite auf "erweitert" navigieren.

Screenshot: iPad Safari erweiterte Einstellungen

Schritt 3: Erweiterte Safari Einstellungen

Den Regler "Webinformationen" in den erweiterten Safari-Einstellungen einschalten. Im Anschluss das iDevice via USB mit dem Mac verbinden.

Screenshot: Safari Entwickler-Menü - Geräteauswahl

Schritt 4: Safari Entwickler-Tools öffnen

Die gewünschte Website auf iPad oder iPhone öffnen und auf dem Mac im Safari über das Entwickler-Menü das entsprechende Gerät auswählen.

Safari Entwickler Tools - Webinformationen (alt+cmd+I)

Schritt 5: Website analysieren

Nun öffnet sich der "Webinformationen"-Dialog, über den sich die Website analysieren lässt...

Nun lässt sich die Website am Mac im Zusammenspiel mit dem iDevice "nativ" ohne Simulator testen. Leider sind Windows-Nutzer auch hierbei außen vor, in der letzten Safari Windows Version (5.1.7) taucht die Geräte-Auswahl nicht auf.

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.

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.

Safari Dev-Tools und iPhone Simulator

Für "normale" Webseiten kaum wegzudenken – Tools wie Firebug oder die Entwickler-Tools der Webkit-Browser. Hier ein kleiner Tipp wie sich die Safari-Entwickler Tools auch im iPhone-Simulator nutzen lassen.

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.