Depurar iOS 6 + 7 Mobile Safari usando Chrome DevTools


78

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?


1
el enlace devforums.apple.com publicado arriba no funciona.
Steve

Funciona, pero debe iniciar sesión.
NVI

1
Tampoco funcionó para mí, incluso después de iniciar sesión con mi cuenta de desarrollador. Aparece una página de "error ocurrido".
mbafford

4
Para aquellos sin inicio de sesión, la respuesta dice: "El inspector web de Safari usa 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".
Erik Kristensen

Respuestas:


93

El proyecto iOS WebKit Debug Proxy permite esto.

captura de pantalla

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.


3
Por favor, háganme saber si hay una versión para Windows. ¡Tks!
ed1nh0

5
No se pudo conectar con lockdownd. Saliendo: No existe tal archivo o directorio No se puede adjuntar 66c5cb9cc4d362b2aecf208axxxxxxxxxxxxx inspector
tmaximini

4
@ ed1nh0 acaba de terminar el puerto win32 github.com/artygus/ios-webkit-debug-proxy-win32
artygus

2
@pppeater sí, funciona mejor con iOS6 ... la herramienta tiene algunos problemas con iOS7, sugiero usar las últimas herramientas de desarrollo (solo para iOS7) incluidas con Chrome; resuelve algunos problemas. pero en general las reglas "piratas" rompen la pestaña de estilos
artygus

2
Solo conseguí que esto funcionara a través del wsparámetro. Puede obtener una URL de servicio web si llama localhost:9222/jsony luego agrega esto así:chrome-devtools://devtools/bundled/devtools.html?ws=localhost:9222/devtools/page/2
Scheintod

3

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

2
Ahora uso el ios-webkit-debug-proxy y dejé de trabajar en node-iosdriver
Andy Davies
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.