Depurar iOS 6 + 7 Mobile Safari usando Chrome DevTools

iOS 6 viene con soporte incorporado para depuración remota ( screencast de 1 minuto ). Funciona bien con el nuevo Safari Web Inspector, que parece ser una bifurcación de WebKit Inspector de hace un año. Falta algunas características como la edición de JS y la inspección de marcos de WebSocket.

El inspector web de Safari utiliza el protocolo de depuración remota WebKit. Sin embargo, Safari no usa TCP / HTTP como capa de transporte, por lo que es incompatible con Chrome.

dice Timothy Hatcher (también conocido como Xenon), empleado de Apple

• ¿Qué utiliza Safari para la capa de transporte?
• ¿Puedo crear un proxy desde esta misteriosa capa de transporte a HTTP para que funcione con Chrome DevTools?

El proyecto iOS WebKit Debug Proxy permite esto.

Para comenzar, instale con homebrew:

brew install ios-webkit-debug-proxy

Ejecute el simulador (si está ejecutando el simulador):

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

Ejecute el proxy:

ios_webkit_debug_proxy

Compruebe si hay errores

Busque en el dispositivo un mensaje de error:

No se pudo conectar con lockdownd. Saliendo .: No existe tal archivo o directorio. No se puede adjuntar el inspector ios_webkit_debug_proxy

Luego, verifique el dispositivo en busca de un mensaje como este (ejemplo de iOS 7 :)

¿Confía en la computadora actualmente conectada?

Elija "Confiar" e intente volver a ejecutar el proxy:

ios_webkit_debug_proxy

Abrir devtools por defecto

Entonces abre http://localhost:9221

Las DevTools son, de forma predeterminada, una versión anterior (de Chrome 18 alrededor de marzo de 2012).

Prueba las herramientas de desarrollo modernas

Debido a cambios en el protocolo , es posible que algunas partes de la interfaz moderna de DevTools no funcionen por completo. Puedes probar abriendo

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

donde los valores porty pageson los valores que está viendo http://localhost:9221. Una vez más, esto puede tener errores.

Lea más documentos en la página del proyecto ios-webkit-debug-proxy .

Actualización: esto también funciona con iOS7 . Actualización : se agregaron nuevas instrucciones de interfaz de devtools a través de patrick . Actualización : se cambió devtools.html a inspector.html para Chrome 45 , y el nuevo wstruco a través de Scheintod.

Según https://github.com/andydavies/node-iosdriver ,

Safari usa los mismos comandos de depuración que Chrome pero envueltos como plists binarios sobre RPC en lugar de JSON sobre websockets.

Entonces, sí, sería posible escribir un proxy.

Encontré este hilo mirando qué conexiones TCP estaba haciendo Safari mientras estaba conectado al inspector de MobileSafari, viendo que estaba conectado a un proceso llamado webinspectordy buscando en Google eso:

# 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