Tutorial

Element untersuchen auf dem iPhone: So funktioniert’s

Melden

Hier ist ein ausführliches Tutorial, wie du die „Element untersuchen“-Funktion (Inspect Element) auf deinem iPhone nutzen kannst. Da iOS keine direkt integrierte Funktion dafür in Safari hat, gibt es drei gängige Wege: über einen Mac, per App oder über eine Safari-Erweiterung.

Die Funktion „Element untersuchen“ ist für Webentwickler und Designer essenziell, um Fehler zu finden oder das Layout einer Website zu testen. Auf dem iPhone ist diese Funktion standardmäßig versteckt. Hier sind die besten Methoden, um sie freizuschalten.

Methode 1: Über einen Mac (Der professionelle Weg)

Dies ist die leistungsstärkste Methode, da sie dir die kompletten Webkit-Entwicklertools (wie am Desktop) zur Verfügung stellt.

Schritt 1: Am iPhone vorbereiten

  1. Öffne die Einstellungen auf deinem iPhone.
  2. Scrolle nach unten zu Safari.
  3. Scrolle ganz nach unten und tippe auf Erweitert.
  4. Aktiviere den Schalter bei Web-Inspektor.

Schritt 2: Am Mac vorbereiten

  1. Öffne Safari auf deinem Mac.
  2. Klicke oben in der Menüleiste auf Safari > Einstellungen (oder Cmd + ,).
  3. Gehe zum Reiter Erweitert.
  4. Aktiviere ganz unten das Häkchen bei Menü „Entwickler“ in der Menüleiste anzeigen.

Schritt 3: iPhone und Mac verbinden

  1. Verbinde dein iPhone per USB-Kabel mit dem Mac.
  2. Öffne Safari auf deinem iPhone und besuche die Website, die du untersuchen möchtest.
  3. Öffne Safari auf deinem Mac.
  4. Klicke in der Menüleiste auf Entwickler.
  5. Suche den Namen deines iPhones in der Liste und wähle die geöffnete Website aus.
  6. Ein Fenster öffnet sich am Mac, in dem du den Code der mobilen Website live untersuchen und bearbeiten kannst.

Methode 2: Safari-Erweiterungen nutzen (Ohne Computer)

Wenn du keinen Mac hast, kannst du eine App verwenden, die sich in Safari integriert. Eine der bekanntesten Apps dafür ist "Web Inspector".

  1. Lade die App Web Inspector (oder eine ähnliche wie „Inspect Browser“) aus dem App Store herunter.
  2. Öffne Safari und gehe auf eine beliebige Webseite.
  3. Tippe auf das „AA“-Symbol (oder das Teilen-Symbol) in der Adressleiste.
  4. Wähle Erweiterungen verwalten.
  5. Aktiviere Web Inspector.
  6. Tippe erneut auf das „AA“-Symbol und wähle Web Inspector aus.
  7. Es erscheint eine Konsole am unteren Bildschirmrand, mit der du HTML und CSS direkt auf dem iPhone untersuchen kannst.

Methode 3: Der "Bookmarklet"-Trick (Für einfache Textänderungen)

Wenn du lediglich Text auf einer Seite live bearbeiten möchtest (z.B. für Screenshots), hilft ein kleiner JavaScript-Trick.

  1. Öffne Safari und erstelle ein beliebiges Lesezeichen für eine Seite.
  2. Gehe zu deinen Lesezeichen, tippe auf Bearbeiten und wähle das neue Lesezeichen aus.
  3. Benenne es in „Seite bearbeiten“ um.
  4. Lösche die URL und füge stattdessen diesen Code ein:
    javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
  5. Speichere das Lesezeichen.
  6. Wenn du nun eine Website besuchst und dieses Lesezeichen anklickst, kannst du jeden Text auf der Seite direkt antippen und verändern.

Zusammenfassung: Welche Methode ist die beste?

  • Für Profis: Methode 1 (Mac & Safari), da du hier vollen Zugriff auf die Konsole, CSS-Styles und Netzwerk-Analyse hast.
  • Für unterwegs: Methode 2 (Safari-Erweiterung), da sie schnell und ohne Zusatzgeräte funktioniert.
  • Für kleine Spielereien: Methode 3 (Bookmarklet), um Texte schnell anzupassen.
0