Praktische Safari Developer Tools

Der iOS-Simulator ist ein praktisches Tool, um responsive Websites zu entwickeln sowie zu optimieren und sie so real wie möglich zu testen. Er ist Bestandteil von Xcode, der kostenlosen Entwicklungsumgebung für Apple-Anwendungen. Außerdem zeigen wir Ihnen, wie Sie die Webinformationen in Safari einblenden. Das Einzige, was Sie brauchen, ist Ihr Mac.

Der iOS Simulator ist Teil von Xcode, der integrierten Entwicklungsumgebung von Apple für macOS. Sie beinhaltet alles, was Entwickler benötigen, um neue Anwendungen für den Mac, das iPhone, iPad oder die Apple Watch zu entwickeln. Xcode bietet Developern einen einheitlichen Workflow für das User Interface Design, fürs Coden, Testen und Debuggen.

So nutzen Sie den iOS-Simulator

Schritt 1) Laden Sie Xcode herunter!

Wie schon gesagt: Der iOS-Simulator ist eine Anwendung, die im Lieferumfang von Xcode enthalten ist. Xcode finden Sie kostenlos im App Store und laden es sich herunter!

Schritt 2) Öffnen Sie den Simulator!

Er befindet sich im Xcode-Hauptmenü unter Open Developer Tool > Simulator.

Tipp: Um nicht Xcode erneut öffnen zu müssen, sollten Sie das Symbol im Dock fixieren. So können Sie es schnell finden und öffnen.

Das Simulator-Fenster ist wie ein gefaketes Apple-Gerät. Sie können fast alles simulieren (Fernsehen, AppleTV, iPad usw.), indem Sie auf Hardware > Gerät gehen.

Schritt 3) Öffnen Sie Safari und gehen Sie zu einer Website!

Geben Sie die entsprechende URL ein.

Schritt 4) Öffnen Sie Desktop Safari & Web Inspector!

Sie müssen zu Einstellungen > Erweitert gehen und die Option "Debug-Menü" anzeigen markieren. Dann sehen Sie die Option Web Inspector für den Simulator und öffnen sie. Bei geöffnetem Web Inspector können Sie innerhalb des Simulators debuggen, so wie Sie es mit DevTools direkt in einem Desktop-Browser tun könnten.

Simulatoren sind großartig, weil sie einfach und nur mit ein paar Klicks zu nutzen sind. Aber wenn Sie aus irgendeinem Grund an einem realen Gerät testen möchten, können Sie dies auch tun.

So lange wie

• das Gerät per USB an Ihren Computer angeschlossen ist und es als „vertrauenswürdig" eingestuft wird.
• Sie eine „inspizierbare" Anwendung geöffnet haben, wie zum Beispiel Safari.

Webinformationen direkt in Safari einblenden

So blenden Sie die Webinformationen in Safari ein

• Klicken Sie auf das Safari-Item.
• Gehen Sie in die Einstellungen oder drücken Sie ⌘,.
• Gehen Sie dann auf den Fensterbereich „Erweitert“.
• Aktivieren Sie das Kontrollkästchen Entwickler in der Menüleiste.

Wählen Sie den Web Inspector bzw. die Funktion „Webinformationen einblenden“, drücken Sie ⌥ ⌘ I im Menü „Entwickler“ oder klicken Sie mit der rechten Maustaste auf eine beliebige Seite in Safari und wählen Sie „Element inspizieren“.

Sobald die Funktion aktiviert ist, erscheint der Name des aktuellen MacOS-Rechners als Untermenü im Menü „Entwickler" von Safari, so dass er inspiziert werden kann:

So aktivieren Sie die Ferninspektion auf einem iOS-Gerät

• Öffnen Sie die Einstellungen-App.
• Gehen Sie zu Safari.
• Scrollen Sie nach unten zu „Erweitert“.
• Aktivieren Sie die Funktion „Webinformationen“

Sobald diese aktiviert ist und das iOS-Gerät, entweder über ein physisches Kabel oder nach der Konfiguration des drahtlosen Debuggens in Xcode, wie oben schon beschrieben, mit einem beliebigen MacOS-Rechner verbunden wird, erscheint der Name des iOS-Geräts als Untermenü im Menü „Entwickler" von Safari auf dem angeschlossenen MacOS-Rechner.

Viel Spaß beim Entwickeln Ihrer Web-Anwendungen mit Safari Developer Tools!

Quellen:

• Wikipedia Xcode
• Heise online – Tipps+Tricks - Mac: Entwicklertools in Safari aktivieren
• Chip - Safari: Entwicklertools aktivieren - so funktioniert's
• WebKit - Enabling Web Inspector

Titelmotiv - Bild von tookapic auf Pixabay