Debugging von iOS Safari

Wie debugge ich Safari auf iOS?

Dies sind meine allgemeinen Schritte, beginnend damit, iOS Safari gar nicht erst zu benutzen.

1. Ist das nur ein Problem des kleinen Bildschirms?

Lassen Sie mich kurz den Gerätemodus in Chrome verwenden.

Beachten Sie, dass dies etwas mehr tut, als Ihre Website nur in einem kleineren Bereich anzuzeigen: Es sendet den richtigen User Agent String und die richtigen Client Hints für dieses Gerät.

2. Scheint es tatsächlich spezifisch für Safari zu sein? Lassen Sie uns zuerst Desktop-Safari überprüfen, da dies nur ein paar Klicks entfernt ist.

Jetzt verwenden Sie tatsächlich Safari, was iOS Safari viel näher ist als Desktop-Chrome.

3. Problem hier nicht angezeigt? Dann ist das Problem tatsächlich einzigartig für iOS Safari. Versuchen Sie die Emulation.

Ich habe zufällig einen Mac, also kann ich XCode installiert haben und somit einen iOS-Simulator haben, der ziemlich einfach zu öffnen ist. Und wenn Sie den iOS-Simulator ausführen können, bedeutet das, dass Sie auch Desktop-Safari ausführen können und somit sogar Zugriff auf DevTools haben, die in den Simulator reichen können.

4. Ich habe Fehler nur auf echten Geräten gesehen. Manchmal braucht man ein echtes Gerät.

Wenn Sie einen Mac haben, ist dies ziemlich ähnlich zu dem, was wir gerade getan haben. Sie müssen das Telefon über USB angeschlossen haben (keine drahtlose Ladeverbindung oder so etwas) und dann sehen Sie das Gerät im selben Entwicklungsmenü. Wählen Sie das echte Gerät aus (auf dem Safari auf einer beliebigen Website geöffnet sein muss) und Sie erhalten eine DevTools-Instanz dieser Website.

5. Kein Mac? Verwenden Sie einen Online-Emulator.

Ich habe von Leuten gehört, die zu Best Buy oder einem Apple Store gehen, um schnell etwas an einer Ausstellungsmaschine zu debuggen. Aber das ist – äh – nicht sehr praktisch. Sie können etwas wie CrossBrowserTesting verwenden, um dies direkt im Web zu tun.

Sie schleusen sogar Chrome DevTools irgendwie da rein. Ich habe gerade ein wenig getestet und fand die Chrome DevTools etwas umständlich zu bedienen (ein riesiges linkes Panel wird gerendert, die Klick-zum-Element-Auswahlfunktion funktionierte nicht, und ich verlor immer wieder die WebSocket-Verbindung). Aber hey, es ist cool, dass es möglich ist.

6. Kein Mac und trotzdem auf einem echten Gerät testen müssen?

Ich dachte nicht, dass das wirklich möglich sei, aber dann sah ich Inspect. (Das ist keine Werbung, ich erwähne es nur als sehr cooles Werkzeug.) Mit Inspect kann ich mein echtes iOS-Gerät über USB anschließen und eine Chrome DevTools-Instanz dafür erhalten.

Ich führe Inspect dort auf meinem Mac aus. Ich schätze, der einzige wirkliche Grund, warum ich das tun würde, wäre die Verwendung von Chrome DevTools anstelle von Safari DevTools (was, ehrlich gesagt, ich vielleicht tun würde). Und es sieht so aus, als ob es bald noch mehr Gründe geben wird. Zum Beispiel wird es React-, Vue- und Angular DevTools bündeln, sodass Sie diese sogar für Tests auf dem Gerät haben, plus WLAN-Tests, was bedeutet, dass Sie sich überhaupt nicht anschließen müssen.

Aber ich habe das Gefühl, dass das wirklich entscheidende Merkmal hier ist, dass es auf Windows läuft. Jetzt gibt es also eine wirklich klare Antwort für Windows-Webentwickler, die auf einem echten iOS-Gerät testen müssen.