Debuggen Sie iOS 6 + 7 Mobile Safari mit den Chrome DevTools

78

iOS 6 bietet integrierte Unterstützung für Remote-Debugging ( 1 Minute Screencast ). Es spielt sich gut mit dem neuen Safari Web Inspector, der eine 1-jährige Gabelung von WebKit Inspector zu sein scheint. Einige Funktionen wie die JS-Bearbeitung und die Überprüfung von WebSocket-Frames fehlen.

Der Webinspektor von Safari verwendet das WebKit-Remote-Debugging-Protokoll. Safari verwendet jedoch kein TCP / HTTP als Transportschicht und ist daher nicht mit Chrome kompatibel.

sagt Timothy Hatcher (auch bekannt als Xenon), Apple-Mitarbeiter

  • Was verwendet Safari für die Transportschicht?
  • Kann ich einen Proxy von dieser mysteriösen Transportschicht zu HTTP erstellen, damit er mit Chrome DevTools funktioniert?
ios  safari  mobile-safari  google-chrome-devtools  web-inspector 
— NVI
quelle
2
— NVI
1
Der oben angegebene Link devforums.apple.com funktioniert nicht.
— Steve
Es funktioniert, aber Sie müssen sich anmelden.
— NVI
1
Es hat auch bei mir nicht funktioniert, selbst nachdem ich mich mit meinem Entwicklerkonto angemeldet habe. Ich erhalte die Seite "Fehler aufgetreten".
— Mbafford
4
Für diejenigen ohne Anmeldung lautet die Antwort: "Der Webinspektor von Safari verwendet das WebKit-Remote-Debugging-Protokoll. Safari verwendet jedoch kein TCP / HTTP als Transportschicht und ist daher nicht mit Chrome kompatibel."
— Erik Kristensen

Antworten:

93

Das iOS WebKit Debug Proxy- Projekt ermöglicht dies.

Bildschirmfoto

Installieren Sie zunächst mit Homebrew:

brew install ios-webkit-debug-proxy

Führen Sie den Simulator aus (falls der Simulator ausgeführt wird):

SIM_DIR=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer
  "$SIM_DIR/Applications/iPhone Simulator.app/Contents/MacOS/iPhone Simulator" \
  -SimulateApplication \
  $SIM_DIR/SDKs/iPhoneSimulator6.1.sdk/Applications/MobileSafari.app/MobileSafari

Führen Sie den Proxy aus:

ios_webkit_debug_proxy

Auf Fehler prüfen

Suchen Sie auf dem Gerät nach einer Fehlermeldung:

Verbindung zu lockdownd konnte nicht hergestellt werden. Beenden: Keine solche Datei oder kein solches Verzeichnis. Inspektor ios_webkit_debug_proxy kann nicht angehängt werden

Dann überprüfen die Vorrichtung für eine prompte wie diese (IOS 7 Beispiel:)

Dem aktuell angeschlossenen Computer vertrauen?

Wählen Sie "Vertrauen" und versuchen Sie, den Proxy erneut auszuführen:

ios_webkit_debug_proxy

Öffnen Sie die Standard-Devtools

Dann öffnen http://localhost:9221

Die DevTools sind standardmäßig eine ältere Version (ab Chrome 18, ca. März 2012).

Probieren Sie moderne Devtools

Aufgrund von Protokolländerungen funktionieren Teile des modernen DevTools-Frontends möglicherweise nicht vollständig. Sie können versuchen, indem Sie öffnen

chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/pag‌​e/2

Dabei sind die Werte portund pagedie Werte, von denen aus Sie sehen http://localhost:9221. Auch dies kann in der Tat fehlerhaft sein.

Weitere Dokumente finden Sie auf der Projektseite von ios-webkit-debug-proxy .

Update: Dies funktioniert auch mit iOS7 . Update : hinzugefügt frisch devtools Frontend Anweisungen über patrick .. Update : Veränderte devtools.html zu inspector.html für Chrome 45 , und der neue wsHack über Scheintod.

— NVI
quelle
3
Bitte Jungs, lasst mich wissen, ob es eine Windows-Version dafür gibt. Tks!
— ed1nh0
5
Verbindung zu lockdownd konnte nicht hergestellt werden. Beenden: Keine solche Datei oder kein solches Verzeichnis. 66c5cb9cc4d362b2aecf208axxxxxxxxxxxxxx inspector kann nicht angehängt werden
— tmaximini
4
@ ed1nh0 gerade fertig Win32 Port github.com/artygus/ios-webkit-debug-proxy-win32
— Artygus
2
@pppeater Ja, funktioniert am besten mit iOS6. Das Tool hat einige Probleme mit iOS7. Ich schlage vor, die neuesten Devtools (nur für iOS7) zu verwenden, die mit Chrome gebündelt sind - es löst einige Probleme. aber im Allgemeinen "hackish" Regeln bricht Stile Tab
— Artygus
2
Ich habe dies nur über wsParameter zum Laufen gebracht. Sie können eine Webservice-URL erhalten, wenn Sie anrufen localhost:9222/jsonund diese dann wie folgt anhängen:chrome-devtools://devtools/bundled/devtools.html?ws=localhost:9222/devtools/page/2
— Scheintod
3

Laut https://github.com/andydavies/node-iosdriver ,

Safari verwendet dieselben Debugging-Befehle wie Chrome, wird jedoch als Binärliste über RPC und nicht als JSON über Websockets verpackt.

Ja, es wäre also möglich, einen Proxy zu schreiben.

Ich habe diesen Thread gefunden, indem ich mir angesehen habe, welche TCP-Verbindungen Safari während der Verbindung mit dem MobileSafari-Inspektor hergestellt hat. Dabei habe ich festgestellt, dass er mit einem Prozess namens verbunden ist, webinspectordund habe Folgendes gegoogelt:

# pgrep -lf /Applications/Safari.app
33170 /Applications/Safari.app/Contents/MacOS/Safari -psn_0_21144617
# lsof -p 33170 | grep TCP
Safari  33170 ryan   16u    IPv6 0x799d5f43b472a241       0t0      TCP localhost:54892->localhost:27753 (ESTABLISHED)
# lsof -i :27753
COMMAND     PID USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
launchd     371 ryan   42u  IPv6 0x799d5f43b472aa01      0t0  TCP localhost:27753 (LISTEN)
Safari    33170 ryan   16u  IPv6 0x799d5f43b472a241      0t0  TCP localhost:54892->localhost:27753 (ESTABLISHED)
webinspec 33182 ryan    6u  IPv6 0x799d5f43b472aa01      0t0  TCP localhost:27753 (LISTEN)
webinspec 33182 ryan    7u  IPv6 0x799d5f43b181a621      0t0  TCP localhost:27753->localhost:54892 (ESTABLISHED)
# ps p 33182
  PID   TT  STAT      TIME COMMAND
33182   ??  S      0:00.28 /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator6.1.sdk/usr/libexec/webinspectord
— ebenfalls
quelle
2
Ich benutze jetzt den ios-webkit-debug-proxy und habe aufgehört, an node-iosdriver zu arbeiten
— Andy Davies
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.