iPhone Entwicklerkonsole verwenden
Netzwerk Offline
Dein Netzwerk ist offline, deshalb laden wir die gesamte Seite aus dem Cache. Beachte: die Inhalte könnten veraltet sein!
Für aktuelle Inhalte aktiviere bitte dein Internet!
Alter Browser
Hallo liebe Nutzer,
da wir als Coding-Plattform und Webentwickler ausschließlich auf aktuelle Technologien setzen, unterstützen wir keine veralteten Internetbrowser. Bitte schau dir doch ein paar der tollen Alternativen an, bestimmt findest du hier einen für dich passenden modernen Browser!

iPhone Entwicklerkonsole in Safari öffnen

Inhaltsverzeichnis
[[TABLE OF CONTENTS]]
Teilen:
access_timeGeschätzte Lesezeit ca. 5 Minuten

Zu Beginn gibt es einige Informationen dazu was benötigt wird, um Safari zu debuggen.

In diesem Artikel werde ich dir zwei Varianten vorstellen, mit denen iOS Safari debugged werden kann. Alle hier vorgestellten Verfahren wurden mit einem MacBook Pro 13 Zoll (2017) und einem iPhone SE (2. Generation) getestet. Das MacBook ist auf Version 11.0.1 (macOS Big Sur) und das iPhone ist auf Version 14.1.

Erste Variante (Echtes iPhone debuggen)

  • iPhone deiner Wahl
  • macOS - (MacBook, iMac, Mac Mini)

Zweite Variante (iPhone Simulator Debuggen)

  • macOS - (MacBook, iMac, Mac Mini)
  • Xcode Simulator (Software)

Safari vorbereiten

Im ersten Schritt müssen wir den Safari Browser vorbereiten. Falls du die Entwicklerkonsole von Safari regelmäßig nutzt, wirst du diesen Schritt wahrscheinlich schon erledigt haben.

Dazu öffnest du die Safari Einstellungen und gehst dort auf die Option "Erweitert". Dort klickst du auf den Punkt "Entwickler" in der Menüleiste.

Jetzt wirst du das folgende Menü in der Safari-Leiste sehen.

Sobald du diesen Punkt erledigt hast, kannst du dich entschieden welche Variante du nutzen willst. Entweder ein echtes Gerät debuggen oder mit dem Xcode Simulator arbeiten.

iPhone debuggen

Um die Variante zu nutzen brauchst du ein iPhone, dann kannst du mit den folgenden Einstellungen fortfahren.

iPhone Einstellungen

  1. iOS Einstellungen öffnen und Safari auswählen
  2. Im Safari Menü nach ganz unten scrollen und "Erweitert" auswählen.
  3. Den Punkt "Webinformationen" aktivieren.

Verbindung zwischen MacOS und iPhone herstellen

Um die Verbindung herzustellen benötigst du ein Lightning zu USB/USB-C Kabel. Falls die Verbindung zum ersten Mal hergestellt wird erscheint eine Anfrage auf dem iPhone, ob du diesem Computer vertrauen kannst. Diese musst du noch bestätigen und danach kannst du auch schon loslegen.

Wenn du nun auf dem iPhone eine Seite im Safari öffnest, bekommst du im Entwicklermenü dein iPhone angezeigt und kannst die geöffneten Webseiten auswählen und die Entwicklerkonsole für dein iPhone verwenden.

Wenn wir nun ein Element in der DOM auswählen, sehen wir dass immer in Echtzeit auf dem iPhone. So können wir wie gewohnt Elemente verändern/hinzufügen oder auch die JavaScript-Konsole abrufen.

Das wär's nun zur Variante mit dem eigenen iPhone - Ein Nachteil ist, dass, wenn man immer das Neuste testen will oder ein Kunde einem ein bestimmtes Gerät mitteilt, so braucht man immer dieses Gerät, weshalb die Variante mit dem Simulator oft nützlicher ist.

iPhone Simulator debuggen

Um den Simulator zu nutzen brauchst du wieder das aktivierte Entwicklermenü und du musst Xcode installiert haben. Das findest du im AppStore auf deinem Mac.

Xcode Herunterladen

Nachdem du Xcode installiert hast, kannst du über die Spotlightsuche (oben rechts die Suche oder CMD + Space) nach "simulator" suchen, dort findest du den Simulator.

Sobald du diesen startest, wird je nach Einstellung entweder direkt ein Gerät geöffnet oder nicht. Falls bei dir keines gestartet wird, kannst du oben über die Menüleiste ein Gerät auswählen.

Zum Testen wählen wir jetzt ein iPhone 12 Pro Max aus, damit testen wir das aktuell neueste Gerät.

Jetzt kannst du sehen wie das iPhone geladen wird und danach auch schon Safari starten. Wenn du nun wieder auf deinem Mac den Safari-Browser startest, kannst du dort über die Entwicklerkonsole die Webseite auswählen, an der du arbeiten willst.

iPads testen

Genau so wie du das iPhone auswählen konntest, kannst du auch die verschiedenen aktuellen iPads testen. Wähle dazu zum Beispiel das iPad Pro (9.7 Zoll) aus und es erscheint auch im Safari Entwicklermenü. Dort kannst deine Webseite debuggen.

Fazit

Der Vorteil vom Simulator liegt auf der Hand. Man spart es sich das Gerät zu kaufen und braucht nur ein macOS Gerät. Ein Nachteil vom Simulator ist, dass man das Userinterface und die Toucheingaben nicht wirklich gut testen kann. Um ein Gefühl für diese Eigenschaften zu bekommen, ist ein natives Gerät immer besser.

Teilen:

Kommentare zum Artikel

Es sind noch keine Kommentare vorhanden? Sei der/die Erste und verfasse einen Kommentar zum Artikel "iPhone Entwicklerkonsole verwenden"!

Kommentar Schreiben

Vom Autor Empfohlen

keyboard_arrow_up
Home Menü Suche
close