So verwenden Sie Web Inspector zum Debuggen von Mobile Safari (iPhone oder iPad)

Das Entwickeln von Webseiten für mobile Geräte oder das Debuggen Ihrer Hybrid-App ist oft schwierig. Aber zum Glück für Leute, die unter iOS entwerfen, bietet Apple seit iOS 6 eine Remote-Webinspektorfunktion in iOS an.

Web Inspector ermöglicht Entwicklern von Web- und mobilen Apps, macOS und OS X Safari Developer Tools zu verwenden, um Webinhalte oder Hybrid-Apps in mobiler Safari auf dem iPad oder iPhone aus der Ferne zu debuggen.

Es ist eine einfache und praktische Möglichkeit, Ihre Webseiten oder Hybrid-Apps auf iOS zu debuggen, zu optimieren und zu ändern.

Um auf diese Entwicklungstools zuzugreifen, aktivieren Sie das Menü "Entwickeln" in den erweiterten Einstellungen Ihres Macs.

Schnelle Tipps

Befolgen Sie diese schnellen Tipps, damit der Web Inspector funktioniert, damit Sie Ihre Website oder App für Safari debuggen können

• Setzen Sie Ihre Standort- und Datenschutzeinstellungen auf Ihrem iPhone, iPad oder iPod touch zurück. Gehe zu Einstellungen > Allgemein > Zurücksetzen > Standort & Datenschutz zurücksetzen
• Stellen Sie sicher, dass Sie sich auf dem Computer mit derselben Apple-ID wie Ihr iPhone, iPad oder iPod touch anmelden
• Aktivieren Sie die Safari iCloud-Synchronisierung sowohl für den Computer als auch für jedes iPhone, iPad oder iPod touch
• Gehen Sie auf dem iPhone oder iPad zu Einstellungen > Safari > Erweitert und einschalten Webinspektor
• Öffnen Sie auf dem Computer Safari und gehen Sie zu Safari-Menü > Einstellungen > Erweitert und Häkchen Menü "Entwickeln" in der Menüleiste anzeigen

In Verbindung stehende Artikel

• Zeigen Sie den HTML-Quellcode der Webseite auf dem iPad oder iPhone an. Keine App erforderlich!
• So zeigen Sie HTML-Quellcode in Safari an
• So zeigen Sie Favicons in Safari für iPhones und Macs an

Mac-Computer erforderlich

Tut mir leid, Windows-Leute, aber der Web Inspector von Safari ist nur mit Macs kompatibel!

Verwenden Sie dieselbe Apple-ID und iCloud Sync!

Stellen Sie sicher, dass sowohl Ihr iDevice als auch Ihr Mac mit derselben Apple-ID angemeldet sind und dass Sie Safari in iCloud einschalten.

Für Ihr iDevice: Einstellungen > Apple-ID-Profil > iCloud > Safari > EINGESCHALTET

Für Ihren Mac: Apple-Menü > Systemeinstellungen > Apple ID oder iCloud > Safari > Häkchen

Und überprüfen Sie, ob Safari auch die gleiche Version ist

Stellen Sie sicher, dass Safari auf Ihrem Mac dieselbe Version wie Safari auf Ihrem iDevice hat. Möglicherweise müssen Sie Ihre iOS-Version oder Ihre Safari-Version, die auf Ihrem Mac ausgeführt wird, aktualisieren.

Setzen Sie Ihre Standort- und Datenschutzeinstellungen zurück

1. Gehe zu Einstellungen > Allgemein
2. Auswählen Zurücksetzen
3. Entscheiden Standort & Datenschutz zurücksetzen

Pro Keyboard ShortCut-Tipp auf dem Mac für Webentwickler

Wenn Sie in Safari STRG+Befehl+R drücken, können Sie sehen, wie eine Website auf einem bestimmten Gerät aussehen würde, indem Sie das Gerät auswählen.

Verwenden Sie Web Inspector, um mobile Safari zu debuggen

1. Tippen Sie auf Ihrem iPad, iPhone oder iPod touch auf Einstellungen > Safari > Erweitert und einschalten Webinspektor. Und aktiviere JavaScript, falls es noch nicht aktiviert ist

2. Starten Sie auf Ihrem Mac Safari und gehen Sie zu Safari-Menü > Einstellungen > Erweitert dann überprüfe "Menü "Entwickeln" in der Menüleiste anzeigen” falls noch nicht geschehen

3. Verbinden Sie Ihr iOS-Gerät über das USB-Kabel mit Ihrem Mac. Dies ist entscheidend – Sie müssen die Geräte manuell mit einem Kabel anschließen. Es funktioniert nicht über WLAN!

4. Öffnen Sie nun auf Ihrem iPad die Website, die Sie debuggen möchten, öffnen Sie dann auf Ihrem Mac Safari und gehen Sie zu „Entwickeln" Speisekarte. Sie sehen jetzt Ihr iDevice, das Sie mit Ihrem Mac verbunden haben. Wenn auf Ihrem iDevice keine Seite geöffnet ist, wird die Meldung „Keine inspizierbaren Anwendungen“ angezeigt.

5. Debuggen Sie jetzt die Seite, die auf der mobilen Safari geöffnet ist, genau wie auf dem Mac, prüfen Sie DOM-Elemente, ändern Sie CSS, messen Sie die Seitenleistung und führen Sie Javascript-Befehle aus.

Verwenden Sie das Debugger-Tool, um die Ursache von JavaScript-Fehlern auf Ihrer Webseite zu finden. Sie können Haltepunkte hinzufügen, das Javascript debuggen und den Wert der Variablen zur Laufzeit überprüfen.

Safari sollte auch CSS-, HTML- und JavaScript-Fehler erkennen. Und Sie sehen die Details zu jedem Fehler im Debugger.

iDevice wird in Safari nicht im Entwicklungsmenü angezeigt?

•  Löschen Sie Ihren Safari-Cache und Ihre Cookies
• Aktualisieren Sie Safari auf Ihrem Mac und iDevice, wenn ein Update verfügbar ist.
  • Wenn Sie eine Beta-Version von iOS oder macOS ausführen, müssen Sie möglicherweise die neueste Beta-Version auf allen Geräten ausführen
• Probieren Sie ein anderes Kabel und/oder einen anderen Anschluss an Ihrem Mac aus. Stelle sicher das Kabel ist ein echtes Apple Lightning-Kabel oder MFI-zertifiziert (Made For iPhone)
• Vergewissern Sie sich, dass Web Inspector eingeschaltet ist. iOS-Updates schalten dies manchmal auf die Standardeinstellung AUS zurück. Also einfach nachschauen Einstellungen > Safari > Erweitert > Webinspektor
  • Versuchen Sie, Web Inspector auszuschalten, warten Sie 10 Sekunden und schalten Sie es wieder ein
• Probieren Sie stattdessen den Safari Technology Preview-Browser aus
• Beenden Sie Safari auf Ihrem Mac und starten Sie es neu. Prüfen Sie, ob Safari Ihres Macs Ihr Gerät erkennt und das Debuggen zulässt
• Vergewissern Sie sich, dass Sie den privaten Browsermodus von Safari nicht verwendenf Ihr iDevice taucht nur kurz im Entwicklermenü von Safari auf und verschwindet dann wieder
• Öffnen Sie den Aktivitätsmonitor und überprüfen Sie, was mit Safari los ist

Lesertipps 

• Wenn Sie ein älteres iDevice mit iOS 6 oder früher verwenden, verfügt der Safari-Webbrowser Ihres Geräts über eine eigene integrierte Debug-Konsole! Greifen Sie einfach auf die Debug-Konsole von Safari zu, indem Sie zu. gehen Einstellungen > Safari > Entwickler > Debug-Konsole