google-chrome - chrome - remote debug ios webkit

Depuración remota de iOS (15)

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

Debug Safari en iOS (no para Chrome a partir de ahora, lea adelante para más detalles).

¿Cómo funciona esto?

Necesita iniciar una sesión en cualquier dispositivo real (hay emuladores pero necesita iniciar una sesión en un dispositivo real) en BrowserStack, digamos iPhone 6S - Safari / Chrome (todavía no se encuentra en el sitio de Chrome, pero está en nuestra hoja de ruta)
Escriba la URL
Puede activar DevTools para inspeccionar la página web abierta en el dispositivo remoto BrowserStacks. He compartido las pantallas de la misma a continuación.

Usando DevTools con teléfonos reales

Desplácese sobre los elementos, edite HTML, CSS como funciona el navegador de escritorio.

Ejecutar JavaScript en un teléfono real usando DevTools

Cambie a la pestaña Console , ejecute el código JavaScript, revise la salida de console.log() y así sucesivamente ...

Pestaña de red, comprobar encabezados de solicitud, respuesta y así sucesivamente ...

Soporte para DevTools en BrowserStack?

DevTools están disponibles en:
- Real Devices - iOS - Safari (DevTools para iOS Chrome se encuentra en nuestra hoja de ruta)
- Real Devices - 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: Necesitas comprar un plan para probar en todos los dispositivos reales, como usuario gratuito, obtendrás un par de dispositivos Real Android (incluye tabletas) y un par de dispositivos iOS reales (incluye tabletas). Además, enfatizando en la palabra Real Devices porque también proporcionan emuladores.

Más detalles sobre esto, consulte la sección de DevTools en la página de Características móviles .

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 .

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

Desde mi punto de vista, Google Chrome utiliza UIWebView de iOS en lugar de una implementación completa de Chrome como la contraparte de Android.

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

Estaré contento si ayuda a alguien Link

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 esté disponible en Safari.

Incluso estoy buscando la misma característica, y hasta el día de hoy, aún está por implementarse. Sin embargo, puedo pensar en dos opciones,

Noté que el comportamiento de Chrome y Safari es bastante idéntico; Chrome incluso es compatible con el giroscopio y otros eventos relacionados que son compatibles con Safari. Actualmente estoy depurando mi aplicación web habilitando la consola de depuración en Safari (a través de Configuración-> Safari)
Pruebe también con Adobe Shadow, que permite la depuración / inspección remota y la sincronización.

HTH.

La respuesta seleccionada es solo para Safari. Por el momento no es posible realizar la depuración remota real en Chrome en iOS, pero como con la mayoría de los navegadores móviles, puedes usar WeInRe para realizar algunas depuraciones simples. Es un poco difícil de configurar, pero te 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 en Clientes, el navegador está conectado

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

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

Ahora debería tener el marcador de URL codificado en su portapapeles. Pégalo en un nuevo marcador en Mobile Bookmarks . Llámalo weinre o algo simple de escribir. Debería sincronizarse con tu móvil bastante rápido, así que carga la página que deseas inspeccionar. Luego escriba el nombre del marcador en la barra de direcciones, y debería ver el bookmarklet como una sugerencia de autocompletar. Haz clic para ejecutar el código bookmarklet :)

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

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

En su lugar, puede abrir una pestaña en la página que debe depurar, y otra en farjs.com y luego hacer clic en "bookmarklet"

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

El último paso es desplazarse al principio de la barra de direcciones y agregar "javascript:", ya que Chrome lo eliminará.

No lo he intentado, pero el proxy de depuración iOS WebKit (ios_webkit_debug_proxy / iwdp) supuestamente le permite depurar remotamente UIWebView. 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 Inspector web remoto de Apple.

No se puede depurar remotamente directamente Chrome en iOS actualmente. Utiliza uiWebView que puede actuar sutilmente de forma diferente a Mobile Safari.

Tienes pocas opciones.

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

Opción 2: share . Weinre no tiene muchas características, pero a veces es lo suficientemente bueno.

Opción 3: depuración remota uiWebView adecuada que funciona de la misma manera.

Esta es la mejor manera de hacer esto. Necesitarás instalar XCode .

Vaya a github.com/paulirish/iOS-WebView-App y "Descargar Zip" o clone.
Abra XCode, abra un proyecto existente y elija el proyecto que acaba de descargar.
Abra WebViewAppDelegate.m y cambie urlString para que sea la URL que desea probar.
Ejecute la aplicación en el simulador de iOS.
Abre Safari, abre el menú de desarrollo , elige iOS Simulator y selecciona tu vista web.
Safari Inspector ahora inspeccionará su uiWebView.

Open 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 Móvil / 14D27 Safari / 602.1

Utilice las herramientas de inspección de Safari.

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

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

Configuraciones> Safari> Navegación privada> DESACTIVADO

Vorlon.JS es mejor para la depuración remota de iOS o cualquier otro cliente.

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

Tenga en cuenta que este enfoque también se puede utilizar para depurar aplicaciones que no se ejecutan en localhost utilizando ngrok. Ver https://.com/a/45443203/2073920 para detalles

Referencias

http://vorlonjs.com

https://ngrok.com

Renuncia

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

Actualizar:

Esta no es la mejor respuesta, sigue los consejos de gregers .

Nueva respuesta:

Use gregers .

Respuesta anterior:

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

Conecte su iDevice a través de USB con su Mac
Abre Safari en tu Mac y activa las herramientas de desarrollo
En su iDevice: vaya a configuración> safari> avanzado y active el inspector web
Vaya a cualquier sitio web con su iDevice
En tu Mac: abre el menú del desarrollador y elige el sitio desde tu iDevice (está en el menú superior de Safari)

Como señaló Simons, es necesario desactivar la exploración privada para que funcione la depuración remota.

Configuraciones> Safari> Navegación privada> DESACTIVADO