Depuración remota de iOS

Con el reciente lanzamiento de Chrome para iOS, me preguntaba cómo habilitar la depuración remota para Chrome iOS.

Actualización: con el lanzamiento de iOS 6, la depuración remota ahora se puede hacer con Safari .

Actualizar:

Esta ya no es la mejor respuesta, siga los consejos de Gregers .

Nueva respuesta:

Usa Weinre .

Vieja respuesta:

Ahora puede usar Safari para la depuración remota. Pero requiere iOS 6.

Aquí hay una traducción rápida de http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector

1. Conecta tu iDevice a través de USB con tu Mac
2. Abra Safari en su Mac y active las herramientas de desarrollo
3. En su iDevice: vaya a configuración> safari> avanzado y active el inspector web
4. Ve a cualquier sitio web con tu iDevice
5. En su Mac: abra el menú de desarrollador y elija el sitio desde su iDevice (está en el menú superior de Safari)

Como señaló Simons, se debe desactivar la navegación privada para que la depuración remota funcione.

Configuración> Safari> Navegación privada> DESACTIVADO

La respuesta seleccionada es solo para Safari. Por el momento, no es posible realizar una depuración remota real en Chrome en iOS, pero como con la mayoría de los navegadores móviles, puede usar WeInRe para una depuración simple. Es un poco difícil de configurar, pero le permite inspeccionar el DOM, ver el estilo, cambiar el DOM y jugar con la consola.

Para configurar:

• Instalar nodejs
• npm install -g weinre
• weinre --boundHost -all-
• Abra http: // {wifi-ip-address}: 8080 / y copie el código del script de destino
• Pegue la etiqueta del script en su página (o use el bookmarklet)
• Haga clic en el enlace a la interfaz de usuario del cliente de depuración (http: // {wifi-ip-address}: 8080 / client / # anonymous)
• Cuando obtiene una línea verde debajo de Clientes, el navegador está conectado

El bookmarklet es un poco más complicado de instalar. Es más fácil si tiene activada la sincronización de marcadores para Chrome de escritorio y móvil. Copie la URL del bookmarklet del servidor local weinre (igual que el anterior). Lamentablemente, no funciona porque no está codificado correctamente en la URL. Abra la consola de JavaScript y escriba:

copy(encodeURI('')); // paste bookmarklet inside quotes

Ahora debería tener el marcador codificado en URL en su portapapeles. Péguelo en un nuevo marcador en Marcadores móviles . Llámalo weinre o algo simple de escribir. Debe sincronizarse con su teléfono móvil bastante rápido, así que cargue la página que desea inspeccionar. Luego escriba el nombre del marcador en la barra de direcciones, y debería ver el marcador como una sugerencia de autocompletar. Haga clic para ejecutar el código bookmarklet :)

Actualmente no puede depurar remotamente Chrome en iOS. Utiliza un uiWebView que puede actuar sutilmente diferente a Mobile Safari.

Tienes pocas opciones.

Opción 1: Safari móvil de depuración remota utilizando el inspector de Safari. Si su problema se reproduce en Mobile Safari, esta es definitivamente la mejor manera de hacerlo. De hecho, pasar por el simulador de iOS es aún más fácil.

Opción 2: use Weinre para una experiencia de depuración reducida . Weinre no tiene muchas funciones, pero a veces es lo suficientemente bueno.

Opción 3: depuración remota de un uiWebView adecuado que funciona igual.

Aquí está la mejor manera de hacer esto. Deberá instalar XCode .

1. Vaya a github.com/paulirish/iOS-WebView-App y "Descargar Zip" o clone.
2. Abra XCode, abra el proyecto existente y elija el proyecto que acaba de descargar.
3. Abra WebViewAppDelegate.m y cambie urlStringpara que sea la URL que desea probar.
4. Ejecute la aplicación en el simulador de iOS.
5. Abra Safari, abra el menú Desarrollar , elija simulador de iOS y seleccione su vista web.
6. Safari Inspector ahora inspeccionará tu uiWebView.

Según tengo entendido, Google Chrome utiliza UIWebView de iOS en lugar de una implementación completa de Chrome como la contraparte de Android.

Muchas consolas remotas funcionan bien. http://farjs.com es mi proyecto, y pude depurar con éxito problemas específicos de Crome iOS y no suceder en un safari al usarlo. (y probablemente todos los demás navegadores móviles)

El problema es que inyectar el código de depuración es un poco complicado ya que Chrome no le permite instalar marcadores.

En su lugar, podría abrir una pestaña en la página que depuraría y otra en farjs.com y luego hacer clic en "el marcador"

Copie el código JS de bookmarklet, regrese a la primera pestaña, con la página que debe depurarse, y pegue el código de bookmarklet en la barra de ubicación.

El último paso es desplazarse al comienzo de la barra de ubicación y agregar "javascript:", ya que Chrome lo eliminará.

Recomiendo Vorlon , funciona como weinre. Me gusta la interfaz de usuario de Vorlon, y es compatible con SSL , mi aplicación está en HTTPS, probé con ngrok, ghostlab y vorlon, solo vorlon funciona bien.

No lo he probado, pero el proxy de depuración de iOS WebKit (ios_webkit_debug_proxy / iwdp) supuestamente le permite depurar UIWebView de forma remota. Desde el archivo README.md

El ios_webkit_debug_proxy (también conocido como iwdp) permite a los desarrolladores inspeccionar MobileSafari y UIWebViews en dispositivos iOS reales y simulados a través de la interfaz de usuario de Chrome DevTools y el protocolo de depuración remota de Chrome. Las solicitudes de DevTools se traducen en llamadas de servicio de Remote Web Inspector de Apple.

Vorlon.JS se puede utilizar para la depuración remota de iOS o cualquier otro cliente.

1. Simplemente instálelo globalmente usando npm i -g vorlon
2. Iniciar servidor usando vorlon
3. Con el servidor en ejecución, abra http: // localhost: 1337 en su navegador para ver el panel de control Vorlon.JS
4. El último paso es habilitar Vorlon.JS agregando esta etiqueta de script a su aplicación:
   <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
5. Todos los clientes conectados, por ejemplo, iPhone, Android estarán disponibles en la lista de clientes en el panel de control de Vorlon.JS

Tenga en cuenta que este enfoque también se puede usar para depurar aplicaciones que no se ejecutan en localhost usando ngrok . Consulte https://stackoverflow.com/a/45443203/2073920 para más detalles.

Descargo de responsabilidad

Solo soy un usuario y no estoy afiliado a Vorlon.JS y ngrok

También debe tener 'Navegación privada' desactivada.

Configuración> Safari> Navegación privada> DESACTIVADO

Incluso estoy buscando la misma función y, a día de hoy, aún no se ha implementado. Sin embargo, puedo pensar en dos opciones,

1. Noté que el comportamiento de Chrome y Safari son bastante idénticos; Chrome incluso admite el giroscopio y otros eventos relacionados que son compatibles con Safari. Actualmente estoy depurando mi aplicación web al habilitar la consola de depuración en Safari (a través de Configuración-> Safari)

2. Pruebe también Adobe Shadow, que permite la depuración / inspección remota y la sincronización.

HTH

Adobe Edge Inspect ( https://creative.adobe.com/products/inspect ) es otra forma de depurar todos sus dispositivos móviles IOS y Android (aunque no Windows Phone). Utiliza weinre para la inspección / cambio remoto de DOM. No es el método más rápido, pero funciona en Windows.

Hay un error abierto en Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=584905

Desafortunadamente, dependen de Apple para abrir una API en WKView para que esto suceda, después de lo cual tal vez la depuración estará disponible desde Safari.

Estoy usando remotedebug-ios-webkit-adapter, funciona bien para mí con IOS y depurador abierto en Chrome en Windows 10.

Se alegrará si ayuda a alguien Link

Nota: No tengo ninguna afiliación con los creadores de Ghostlab Vanamco en absoluto.

Para mí era importante poder depurar problemas específicos de Chrome, así que me propuse encontrar algo que pudiera ayudarme con eso. Terminé felizmente arrojando mi dinero en Ghostlab 3 . Puedo probar los navegadores móviles Chrome y Safari como si los estuviera viendo en mi escritorio. Simplemente me da una dirección LAN para usar en cualquier dispositivo que me gustaría depurar. Cada aplicación que use esa dirección aparecerá en la lista en Ghostlab.

Muy recomendable.

Abra Safari Desktop iOS

Desarrollar -> Modo de diseño receptivo

Haga clic en "Otro" debajo del dispositivo

Pegue esto: Mozilla / 5.0 (iPad; CPU OS 10_2_1 como Mac OS X) AppleWebKit / 602.1.50 (KHTML, como Gecko) CriOS / 56.0.2924.79 Mobile / 14D27 Safari / 602.1

Usa las herramientas de inspección de Safari.

Descargo de responsabilidad: trabajo en BrowserStack. ^{[Confirmado] que si se me permite publicar esto ( ¿Puedo sugerir un producto de la compañía en la que estoy trabajando? )}

Depurar Safari en iOS (no para Chrome a partir de ahora, sigue leyendo para obtener más detalles).

¿Cómo funciona esto?

• Debe iniciar una sesión en cualquier dispositivo real (hay emuladores, pero necesita iniciar una sesión en un dispositivo real) en BrowserStack, por ejemplo, iPhone 6S - Safari / Chrome (todavía no hay herramientas para Chrome, pero está en nuestra hoja de ruta)
• Escribe la URL
• Puede activar DevTools para inspeccionar la página web abierta en el dispositivo remoto BrowserStacks. He compartido las pantallas para lo mismo a continuación.

Usando DevTools con teléfonos reales

Desplácese sobre los elementos, edite HTML, CSS tal como funcionan las herramientas de desarrollo del navegador de escritorio.

Ejecutar JavaScript en un teléfono real usando DevTools

Cambie a la Consolepestaña, ejecute el código JavaScript, verifique la console.log()salida, etc.

Pestaña de red, verificar encabezados de solicitud, respuesta, etc.

¿Soporte para DevTools en BrowserStack?

• DevTools están disponibles en:

  • Dispositivos reales - iOS - Safari (DevTools para iOS Chrome está en nuestra hoja de ruta)
  • Dispositivos reales - Android - Chrome (solo Chrome está disponible en dispositivos Android por ahora)

• El navegador del cliente debe ser Chrome o Firefox. Eso significa que debe usar el navegador Chrome o Firefox en MacOSX o Windows para usar BrowserStack Real Device DevTools.

Nota: debe comprar un plan para probar en todos los dispositivos reales, como usuario gratuito, obtendrá un par de dispositivos Android reales (incluye tabletas) y un par de dispositivos iOS reales (incluye tabletas). Además, haciendo hincapié en la palabra dispositivos reales porque también proporcionan emuladores.

Para obtener más detalles al respecto, consulte la sección DevTools en la página Funciones móviles .