78 votes

Déboguer iOS 6+7 Mobile Safari en utilisant les Chrome DevTools

IOS 6 est livré avec un support intégré pour le débogage à distance (screencast d'1 minute). Il fonctionne bien avec le nouvel Inspector Web Safari qui semble être un fork de l'Inspector WebKit datant d'il y a 1 an. Il manque quelques fonctionnalités telles que l'édition JS et l'inspection des trames WebSocket.

L'inspecteur Web de Safari utilise le protocole de débogage à distance WebKit. Cependant, Safari n'utilise pas TCP/HTTP comme couche de transport, le rendant ainsi incompatible avec Chrome.

dit Timothy Hatcher (alias Xenon), employé d'Apple

  • Que utilise Safari comme couche de transport ?
  • Puis-je faire un proxy de cette mystérieuse couche de transport vers HTTP pour le faire fonctionner avec les outils de développement Chrome ?

93voto

NVI Points 3846

Le projet iOS WebKit Debug Proxy permet cela.

capture d'écran

Pour commencer, installez avec homebrew :

brew install ios-webkit-debug-proxy

Exécutez le simulateur (si le simulateur est en cours d'exécution) :

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

Exécutez le proxy :

ios_webkit_debug_proxy

Vérifiez les erreurs

Regardez sur l'appareil pour un message d'erreur :

Impossible de se connecter à lockdownd. Sortie. : Aucun fichier ou dossier de ce type. Impossible de joindre l'inspecteur ios_webkit_debug_proxy

Ensuite, vérifiez l'appareil pour une invite comme celle-ci (exemple iOS 7 : )

Faites-vous confiance à l'ordinateur actuellement connecté ?

Choisissez "Faire confiance" et essayez de relancer le proxy :

ios_webkit_debug_proxy

Ouvrir les outils de développement par défaut

Ensuite, ouvrez http://localhost:9221

Les DevTools sont, par défaut, une version plus ancienne (à partir de Chrome 18, environ mars 2012).

Essayer les outils de développement modernes

En raison des modifications du protocole, certaines parties de l'interface utilisateur moderne des DevTools peuvent ne pas fonctionner complètement. Vous pouvez essayer en ouvrant

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

où les valeurs port et page sont les valeurs que vous voyez à partir de http://localhost:9221. Encore une fois, cela peut en effet être bogué.

Lisez plus de documentation sur la page du projet ios-webkit-debug-proxy.


Mise à jour : Cela fonctionne également avec iOS 7 également. Mise à jour : Ajout d'instructions fraîches pour l'interface utilisateur des outils de développement via patrick. Mise à jour : Changement de devtools.html à inspector.html pour Chrome 45, et le nouveau hack ws via Scheintod.

3voto

also Points 619

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

Safari utilise les mêmes commandes de débogage que Chrome mais encapsulées en tant que plists binaires sur RPC plutôt que JSON sur websockets.

Donc, oui, il serait possible d'écrire un proxy.

J'ai trouvé ce fil de discussion en regardant quelles connexions TCP Safari établissait en étant connecté à l'inspecteur MobileSafari, voyant qu'il était connecté à un processus appelé webinspectord et en faisant des recherches sur cela :

# 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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X