Depuración remota de iOS

199

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 .

Hyangelo
fuente
2
La depuración remota ahora se puede hacer con Safari en Mac. Pero si está desarrollando en Linux o Windows, todavía tiene que usar weinre (como se indica en la respuesta de gregers).
Dehalion
3
La depuración remota con Safari solo es compatible con Mobile Safari, no con iOS Chrome.
Matt Jensen
Eche un vistazo medium.com/@nikoloza/…
Machado el

Respuestas:

111

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

F Lekschas
fuente
11
Sí, ya estoy usando este. ¡Finalmente! Sin embargo, apesta que la versión de Safari de Windows no lo tenga.
Hyangelo
55
Espero que Chrome habilite la misma función pronto, para que funcione en todos los sistemas operativos.
F Lekschas
49
Sí, ¡seguro que sería bueno que esto respondiera a la pregunta que se hizo!
Irene Knapp
44
Desactivar la navegación privada ya no es un requisito.
Miles
3
Motivo de rechazo: las preguntas solicitan Chrome, no Safari.
NickG
230

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.

ingrese la descripción de la imagen aquí

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 :)

ingrese la descripción de la imagen aquí

gregers
fuente
27
Esta es la única respuesta correcta, todas las demás están relacionadas con Safari (caminar en un parque)
Mars Robertson
2
¡Instrucciones muy útiles! Solo agregaré eso, para instalar el marcador, en lugar de hacer la copia, puede arrastrar el enlace del marcador "weinre target debug" proporcionado a la barra de herramientas de marcadores (haga que la barra de herramientas sea visible Ctrl-Shift-Bsi no está visible).
Kai Carver
Necesitaba actualizar mi navegador después de instalar el bookmarklet para que funcione.
ooolala
npm install -g weinreno estaba funcionando para mi Así que tuve que ejecutarlo con la versión npm install -g [email protected]. consulte la última versión aquí npmjs.com/package/weinre .
vinesh
1
FWIW, weinre no admite actualmente dom dom de sombra, solo muestra los elementos de nivel superior y su dom de luz. Tampoco funciona para dom sombreado aparte de los elementos de nivel superior y su dom sombreado (y dom ligero también).
Max Waterman
52

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.

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

Paul Irish
fuente
77
¿Cómo inspeccionar iOS (iPhone / iPad) en Windows usando Chrome? ¿Hay algún método para eso?
Surjith SM
@SurjithSM Esta respuesta no ayudará con Windows mientras no pueda instalar XCode en Windows y crear la aplicación ios. Pruebe esto en su lugar stackoverflow.com/a/22047495/1737158
Lukas Liesis
Ya he tenido experiencia con github.com/google/ios-webkit-debug-proxy, que es una herramienta increíble, y ayer intenté depurar Google Chrome con iOS Emulator, la experiencia más increíble. Gracias por # 3
Oleg Andreyev
10

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

Stephan Leroux
fuente
1
Sí, lo descubrí después de que hice esta pregunta. Eso es una lástima para Apple realmente. Dejo esta pregunta abierta en caso de que alguien descubra una manera de hacerlo.
Hyangelo
4

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á.

BlueStory
fuente
4

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.

Tina Chen
fuente
3

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.

jiku
fuente
1
El soporte para la vista web de Chrome se implementa teóricamente a través de: github.com/RemoteDebug/remotedebug-ios-webkit-adapter, que se basa en el proxy de depuración de webkit de iOS. Hasta ahora he tenido un éxito limitado con ese proyecto, pero espero que mejore.
Matt Jensen el
3

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 ingrese la descripción de la imagen aquí

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

Abdul Rauf
fuente
Seguí todos los pasos, pero la perspectiva de mi iPhone no se detecta en el VorlonJS que se ejecuta en Mac
Amarjit Singh
2

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

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

Simon Owen Design
fuente
No estoy seguro de por qué las personas votaron negativamente por esta respuesta. La navegación privada necesita ser apagada para permitir la depuración remota.
código base
14
@basecode Porque es una respuesta complementaria que debería estar en el comentario.
GusDeCooL
2
@GusDeCooL Ya veo, gracias! Un comentario de un votante que explica esto habría sido útil.
código base
0

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

viña
fuente
0

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.

Peter Sinke
fuente
Adobe Edge Inspect ya no figura en Adobe Creative Cloud. Consulte adobe.com/products/edge-inspect.html .
Ron Inbar
Es cierto, sin embargo, aún puede descargarlo con una suscripción actual, a pesar de que ya no está en desarrollo. Vea cómo hacerlo aquí: helpx.adobe.com/creative-cloud/kb/…
HumbleBeginnings
Sin embargo, la aplicación iOS ya no está disponible. Todavía estoy
bg17aw
0

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

Beny
fuente
0

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.

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

Muy recomendable.

Brandon Durham
fuente
-2

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.

usuario3521314
fuente
-3

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.

DevTools en teléfonos reales, depurando sitios web receptivos.


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.

ejecutar JavaScript en teléfonos reales usando devtools


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

Pestaña de red para verificar solicitudes


¿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 .

Señor extranjero
fuente
3
Pidió depurar Chrome en iOS. Soy un cliente browserstack y dueño de una Mac para la depuración de Safari en iOS es posible, pero Chrome no retrasarse la posibilidad de ser debugable forma remota
los Fab
@fabs Tenemos eso en nuestra hoja de ruta. Además, he mencionado que solo funciona en Safari: dispositivos iOS y Chrome para dispositivos Android :)
Sr. Alien
Para problemas de diseño, esto no debería ser un problema, ya que el motor de diseño de ambos navegadores es webkit. En combinación con la función de prueba del servidor local, esto no requiere ninguna configuración adicional para depurar localhost.
Tim Vermaelen
1
La respuesta no aborda la pregunta de ninguna manera. Si bien Browserstack proporciona un gran servicio, esta respuesta está completamente fuera de tema.
Matt Jensen el