Verwendung des 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. Glücklicherweise bietet Apple für iOS-Entwickler, die bereits mit iOS 6 begonnen haben, eine Remote-Webinspektorfunktion in iOS an.

Mit Web Inspector können Entwickler von Web- und mobilen Apps die MacOS- und OS X Safari-Entwicklertools verwenden, um Webinhalte oder Hybrid-Apps in Mobile Safari auf iPad oder iPhone remote zu debuggen.

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

Um auf diese Entwicklungstools zuzugreifen, aktivieren Sie das Menü "Entwickeln" in den erweiterten Einstellungen Ihres Mac für Safari.

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

  • Setzen Sie Ihren Standort und Ihre Datenschutzeinstellungen auf Ihrem iPhone, iPad oder iPod touch zurück. Gehen Sie zu Einstellungen> Allgemein> Zurücksetzen> Standort und 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 schalten Sie den Web Inspector um
  • Öffnen Sie auf dem Computer Safari und gehen Sie zum Menü Safari> Einstellungen> Erweitert und aktivieren Sie das Menü Entwickeln anzeigen in der Menüleiste

Mac Computer erforderlich

Sorry Windows Leute, aber Safari's Web Inspector 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 in iCloud auf Safari umschalten.

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

Für Ihren Mac: Apple-Menü> Systemeinstellungen> Apple ID oder iCloud> Safari> Aktiviert

Und überprüfen Sie, ob Safari auch dieselbe Version hat

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 auf Ihrem Mac ausgeführte Safari-Version aktualisieren.

Setzen Sie Ihren Standort und Ihre Datenschutzeinstellungen zurück

  1. Gehen Sie zu Einstellungen> Allgemein
  2. Wählen Sie Zurücksetzen
  3. Wählen Sie, um Standort und Datenschutz zurückzusetzen

Pro Keyboard ShortCut Tipp auf Mac für Web-Entwickler

Wenn Sie in Safari STRG + Befehl + R drücken, können Sie durch Auswahl des Geräts sehen, wie eine Website auf einem bestimmten Gerät aussehen würde.

Schalten Sie die Tastenkombination um, um die Webentwicklungsansicht zu verlassen.

Verwenden Sie Web Inspector, um mobile Safari zu debuggen

1. Tippen Sie auf Ihrem iPad, iPhone oder iPod touch auf Einstellungen> Safari> Erweitert und schalten Sie Web Inspector ein. Und aktivieren Sie JavaScript, falls es noch nicht aktiviert ist

2. Starten Sie auf Ihrem Mac Safari und gehen Sie zu Safari-Menü> Einstellungen> Erweitert. Aktivieren Sie dann " Entwicklungsmenü in Menüleiste anzeigen ", falls Sie dies noch nicht getan haben

3. Verbinden Sie Ihr iOS-Gerät mit dem USB-Kabel mit Ihrem Mac. Dies ist wichtig - Sie müssen die Geräte manuell über ein Kabel anschließen. Es funktioniert nicht über WiFi!

4. Öffnen Sie nun auf Ihrem iPad die Website, die Sie debuggen möchten. Öffnen Sie dann auf Ihrem Mac Safari und gehen Sie zum Menü „ Entwickeln “. 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 überprüfbaren Anwendungen" angezeigt.

5. Debuggen Sie nun die Seite, die in Mobile Safari geöffnet ist, genau wie Sie es auf einem Mac tun würden, überprü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 für JavaScript-Fehler 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 werden die Details jedes Fehlers im Debugger sehen.

iDevice wird in Safari nicht im Entwicklungsmenü angezeigt?

  • Leeren 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 für iOS oder MacOS ausführen, müssen Sie möglicherweise die neueste Beta auf allen Geräten ausführen
  • Versuchen Sie es mit einem anderen Kabel und / oder Anschluss an Ihrem Mac. Stellen Sie sicher, dass das Kabel ein echtes Apple Lightning-Kabel oder ein MFI-zertifiziertes Kabel (Made For iPhone) ist.
  • Überprüfen Sie, ob der Web Inspector aktiviert ist. iOS-Updates schalten dies manchmal auf die Standardeinstellung AUS zurück. Stellen Sie also sicher, dass Sie Einstellungen> Safari> Erweitert> Web Inspector aktivieren
    • Schalten Sie den Web Inspector aus, warten Sie 10 Sekunden und schalten Sie ihn wieder ein
  • Versuchen Sie stattdessen den Safari Technology Preview-Browser
  • Beenden Sie Safari auf Ihrem Mac und starten Sie es neu. Überprüfen Sie, ob die Safari Ihres Mac Ihr Gerät erkennt und das Debuggen ermöglicht
  • Stellen Sie sicher, dass Sie den privaten Browsermodus von Safari nicht verwenden, wenn Ihr iDevice nur kurz im Safari-Entwicklungsmenü angezeigt wird und dann verschwindet
  • Ö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 Einstellungen > Safari > Entwickler > Debug-Konsole gehen