So prüfen Sie Elemente auf dem iPhone: Alles, was Sie wissen müssen

Falls Sie es nicht wissen: Eine Webseite besteht aus einer Reihe von Elementen, die so formatiert sind, dass sie als eine einzige Einheit erscheinen. Webentwickler müssen jedes dieser Elemente verstehen, wissen, wie sie auf einer Webseite angeordnet sind, und sehen, wie jedes einzelne Element für sich funktioniert.

Windows- und Mac-Benutzer kennen die Option „Inspizieren“ oder „Element prüfen“, die verfügbar ist, wenn man mit der rechten Maustaste auf eine beliebige Webseite klickt. Diese Option bietet die Möglichkeit, den Quellcode einer Website anzuzeigen, alle ihre Elemente und die Codezeile dahinter zu sehen und Javascript, HTML, CSS und alle anderen darauf befindlichen Mediendateien zu bearbeiten. Auf diese Weise können Sie nicht nur lernen, wie eine bestimmte Website funktioniert und funktioniert, sondern auch Änderungen daran in Ihrem eigenen Browser vornehmen, ohne dass diese Auswirkungen auf die eigentliche Webseite haben. 

Obwohl die Inspect-Option bekanntermaßen ein „Entwickler“-Tool ist, profitieren nicht nur Entwickler davon. Auch Anfänger und Nicht-Entwickler können mit diesem Tool lernen, wie eine Website aufgebaut ist und wie die einzelnen Elemente zusammenwirken. Wenn Sie sich darauf freuen, beim Surfen im Internet auf einem iPhone die Option „Elemente prüfen“ zu verwenden, sollte Ihnen dieser Beitrag dabei helfen, eine Möglichkeit zu finden, dies zu tun. 

Verwandt: So prüfen Sie ein Element auf Android

Können Sie Webelemente direkt in Safari überprüfen?

Die einfache Antwort ist nein. Safari auf iOS bietet Ihnen wie viele andere mobile Browser kein natives Inspektionstool zum Anzeigen der Entwicklung einer Webseite. Apple nennt keinen Grund, warum es eine solche Option nicht gibt, aber wir glauben, dass es damit zusammenhängt, wie klein die Displays von Smartphones sind. Eine kleinere Anzeigegröße kann es für Benutzer schwieriger machen, durch die überprüften Felder zu navigieren, da Sie den Cursor möglicherweise vorsichtig platzieren müssen, wenn Sie den Code einer Webseite bearbeiten oder sogar einen finden möchten. 

Ein weiterer Grund dafür könnte die mangelnde Rechenleistung von Smartphones sein. Obwohl moderne iPhones über genügend Leistung verfügen, um grafikintensive Spiele auszuführen, kann es schwierig sein, die Seiteninformationen einer Website anzuzeigen, da nicht alle Websites gleich erstellt sind. Einige Websites verfügen möglicherweise über zahlreiche Ressourcen und Ebenen, die sorgfältig erstellt wurden, um ein nahtloses Erscheinungsbild zu gewährleisten. Bei der Überprüfung kann es jedoch einige Zeit dauern, bis dieselben Ressourcen geladen sind. 

Verwandt: Ein Video auf dem iPhone schleifen lassen [Anleitung]

Inspect Element auf dem iPhone: Welche anderen Optionen haben Sie?

Obwohl Sie das Tool „Inspect Element“ in der Safari-App unter iOS nicht nativ verwenden können, gibt es dennoch Möglichkeiten, diese Einschränkung zu umgehen. Im Folgenden finden Sie drei Möglichkeiten, wie Sie Elemente von Webseiten überprüfen können, die Sie in Safari auf Ihrem iPhone besuchen. 

Methode Nr. 01: Safari auf Ihrem Mac verwenden

Wenn Sie zusätzlich zu Ihrem iPhone ein macOS-Gerät besitzen, können Sie Webseiten weiterhin direkt über die Safari-App überprüfen, allerdings auf dem Mac. Mit den Entwicklungstools von Apple können Sie Webseiten von Safari auf iOS wie auf dem Mac debuggen. Während das Debuggen einer Site relativ einfach ist, kann die Ersteinrichtung länger dauern, als Sie vielleicht erwarten. Aber keine Sorge, wir erklären Ihnen den Einrichtungsprozess auf einfachste Weise und helfen Ihnen, die Seiten nach dem ersten Mal problemlos zu überprüfen. 

Aktivieren Sie Web Inspector auf iOS

Um Webelemente debuggen zu können, müssen Sie zunächst Web Inspector für die Safari-App auf iOS aktivieren. Öffnen Sie dazu die Einstellungen-App und wählen Sie „Safari“.

Scrollen Sie in Safari nach unten und tippen Sie auf „Erweitert“. 

Tippen Sie im nächsten Bildschirm auf den Schalter neben „Web Inspector“, bis er grün wird. 

Ersteinrichtung auf Mac

Nachdem Sie Web Inspector für Safari auf iOS erfolgreich aktiviert haben, ist es nun an der Zeit, die Einrichtung auf Ihrem Mac durchzuführen. Öffnen Sie auf dem Mac die Safari-Anwendung, klicken Sie in der Menüleiste auf die Option „Safari“ und wählen Sie „Einstellungen“. 

Wählen Sie im angezeigten Fenster oben die Registerkarte „Erweitert“ und aktivieren Sie das Kontrollkästchen „Entwicklungsmenü in der Menüleiste anzeigen“. 

Jetzt sollte oben in der Menüleiste die Option „Entwickeln“ angezeigt werden. 

Stellen Sie nun mit dem mit Ihrem iPhone gelieferten USB-Kabel eine Verbindung zwischen iPhone und Mac her. Wenn Ihr iPhone mit dem Mac verbunden ist, können Sie in der Menüleiste auf „Entwickeln“ klicken und prüfen, ob Ihr iPhone in der Geräteliste angezeigt wird. Wenn ja, klicken Sie in dieser Liste auf den Gerätenamen. 

Um sicherzustellen, dass Sie Webseiten drahtlos überprüfen können, ohne dass ein USB-Kabel erforderlich ist, wie Sie es gerade getan haben, klicken Sie beim Öffnen des iPhone-Menüs auf die Option „Über Netzwerk verbinden“. 

Jetzt können Sie Ihr iPhone vom Mac trennen und weiterhin Webseiten überprüfen, ohne ein Kabel dazwischen anzuschließen. 

Untersuchen Sie Webseiten von iOS auf einem Mac

Nachdem Sie nun „Über Netzwerk verbinden“ im Menü „Entwickeln“ aktiviert haben, können Sie Webseiten aus Safari unter iOS direkt auf Ihrem Mac überprüfen. Sie müssen lediglich sicherstellen, dass sowohl das iPhone als auch der Mac mit demselben drahtlosen Netzwerk verbunden sind, um Webseiten drahtlos debuggen zu können. 

Öffnen Sie dazu die Safari-App auf Ihrem iPhone und rufen Sie die Webseite auf, die Sie untersuchen möchten. 

Wenn Ihr iPhone entsperrt und die ausgewählte Webseite geöffnet ist, wechseln Sie zu Ihrem Mac und öffnen Sie dort die Safari-Anwendung. Klicken Sie hier in der Menüleiste auf „Entwickeln“ und gehen Sie zu „iPhone“. 

Wenn Sie mit der Maus über Ihr „iPhone“ fahren, sollte eine Liste der Webseiten angezeigt werden, die unter iOS geöffnet sind. Klicken Sie in dieser Liste auf die Webseite, die Sie überprüfen möchten. 

Auf dem Mac wird ein neues Fenster geöffnet, in dem alle Informationen angezeigt werden, die auf der ausgewählten Webseite eingesehen werden können. 

Während Ihrer Inspektion können Sie jederzeit erkennen, auf welchen Teil der Seite eine Codezeile verweist, indem Sie auf Ihrem iPhone nach einem blauen Bereich suchen.

Dieser blaue Bereich zeigt an, dass der Code, über den Sie auf dem Mac fahren, das hervorgehobene Element für diese bestimmte Webseite darstellt. Wenn Sie zwischen verschiedenen Codezeilen wechseln, wird diese blaue Markierung in Echtzeit über verschiedene Teile der Seite auf Ihrem iPhone verschoben. 

Verwandte Themen: So behalten Sie Effekte in FaceTime bei

Methode Nr. 02: Verknüpfungen unter iOS verwenden 

Wenn Sie keinen Mac besitzen oder direkt von Ihrem iPhone aus einen kurzen Blick auf eine Website werfen möchten, werden Sie sich über die iOS-Shortcuts-App dafür freuen. Die Shortcuts-App auf iOS bietet eine Reihe vorgefertigter Auswahlmöglichkeiten, mit denen Sie den Quellcode einer Seite anzeigen, eine Webseite bearbeiten, Bilder von einer Website abrufen und in der Safari-App nach älteren Versionen einer Webseite suchen können. Leider gibt es unter iOS keine einzige Verknüpfung, die ein umfassendes Web-Debugging ermöglicht. Daher müssen Sie für jeden dieser Zwecke eine Verknüpfung hinzufügen. 

Wir haben die folgenden Verknüpfungen gefunden, mit denen Sie das Debuggen auf Websites direkt von iOS aus durchführen können. Diese sind:

Quelle anzeigen – Mit dieser Verknüpfung können Sie den Quellcode einer Webseite im Base-Bones-Format anzeigen. 

Webseite bearbeiten – Mit dieser Verknüpfung können Sie den Inhalt einer Webseite lokal bearbeiten, um ein neues Design oder Format zu testen und zu testen, wie es auf Ihrem iPhone aussehen könnte. 

Bilder von der Seite abrufen – Ein Hauptgrund für die Inspektion einer Seite kann darin bestehen, Bilder anzusehen oder Bilder zu speichern, die ansonsten nicht interaktiv sind. Diese Verknüpfung erfasst alle Bilder einer bestimmten Webseite und zeigt sie dann gemeinsam in der Vorschau an. Wie der Screenshot unten zeigt, können Sie jedes einzelne der 24 Bilder anzeigen, die auf der ausgewählten Webseite gehostet werden. 

Wayback Machine – Diese Verknüpfung führt Sie zur Wayback Machine einer Webseite, wo Sie deren vorherige Versionen sehen können, die im Internetarchiv gespeichert bleiben. 

Je nachdem, wie Sie Webseiten auf iOS untersuchen möchten, können Sie jede dieser Verknüpfungen zu Ihrem iPhone hinzufügen, indem Sie entweder auf die entsprechenden Links oben klicken oder unter Verknüpfungen > Galerie danach suchen. 

Tippen Sie in den Suchergebnissen auf die Verknüpfung, die Sie dem iPhone hinzufügen möchten. 

Wenn ein Vorschaubildschirm geöffnet wird, tippen Sie unten auf die Option „Widget hinzufügen“. 

Die Verknüpfungen, die Sie alle haben, werden im Bildschirm „Meine Verknüpfungen“ > „Alle Verknüpfungen“ angezeigt und sind auch im Freigabeblatt von Safari verfügbar.  

Um eine Webseite zu überprüfen, öffnen Sie sie in Safari und tippen Sie unten auf die Schaltfläche „Teilen“. 

Scrollen Sie im angezeigten Freigabeblatt nach unten und suchen Sie nach den Verknüpfungen, die Sie Ihrem iPhone hinzugefügt haben. 

Wenn Sie „Webseite bearbeiten“ auswählen, können Sie Teile der Webseite direkt bearbeiten. Wenn Sie eine der anderen drei Optionen auswählen, werden Sie gefragt, ob Sie über die Verknüpfung auf die Webseite zugreifen möchten. Tippen Sie hier auf „Einmal zulassen“. 

Verwandte Themen: So fügen Sie WidgetSmith zum Startbildschirm hinzu

Methode Nr. 03: Verwendung von Apps von Drittanbietern

Wenn Sie mit den oben genannten Ergebnissen nicht zufrieden sind, müssen Sie Apps von Drittanbietern erkunden, um Elemente einer Webseite untersuchen zu können. Ähnlich wie bei Safari gibt es in den gängigsten Webbrowsern (Chrome, Firefox, Brave usw.) keine Möglichkeit, eine Webseite zu überprüfen. Stattdessen müssen Sie sich auf eine App verlassen, die für diese spezielle Aufgabe erstellt wurde, und Apps wie diese können schwer zu finden sein.

Während eine einfache Suche im App Store Ihnen mehrere Ergebnisse zur Überprüfung von Webelementen liefert, werden Sie nicht so viele Apps finden, die kostenlos erhältlich sind und eine hohe Bewertung haben. Basierend auf dem Feedback der Benutzer empfehlen wir Ihnen, die Apps „Inspect Browser“ oder „Gear Browser“  aus dem App Store zu installieren, die eine Elementprüfung und -bearbeitung in JavaScript, CSS und HTML ermöglichen. 

Das ist alles, was Sie über die Inspektion von Elementen auf einem iPhone wissen müssen. 

VERWANDT

• So fügen Sie auf dem iPhone ein, ohne es gedrückt zu halten
• So hinterlassen Sie eine Gruppentextnachricht auf iMessage und was passiert
• So finden Sie Airtags, die Sie verfolgen
• 30 ungewöhnliche iOS 15-Tricks, die Sie kennen sollten
• So legen Sie auf dem iPhone ein zufälliges Hintergrundbild ohne Wiederholung fest