mobile - style - Inicie los navegadores móviles con depuración remota de webkit ENCENDIDO

meta viewport user-scalable

Question

En Google I / O 2011: Chrome Dev Tools Reloaded , Paul Irish y Pavel Feldman introdujeron la nueva función de depuración remota , que de paso estaba incluida en el kit web .

-

Esta es una gran noticia, especialmente para los desarrolladores web móviles. Pero, ¿cómo lo habilitamos, por ejemplo, ejecutando el simulador IOS o simplemente ejecutando Safari Mobile en un iPhone? (para Chrome, esto se hace tradicionalmente con la --remote-debugging-port=9222 ).

Intenté habilitar el modo de desarrollador en la configuración de safari ( Settings > Safari > Developer > Debug Console: ON ) pero sin éxito ...

No sé nada de Android aquí, pero ¿alguien sabe cuándo Apple (Safari Mobile) o Google (el navegador de Android) incluirán esta nueva función para que podamos disfrutar de la depuración remota en el desarrollo móvil?

Gracias.

Ref: http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/#comment-63113

Answer 1

Actualmente, ningún navegador móvil está implementando el protocolo de depuración remota de webkit. (Tal vez puedas obtener compilaciones personalizadas para Android que lo admitan)

Sin embargo, existe weinre, que le proporciona una versión remota del web-inspector. Pero debe incluir algún código en su página para poder respaldarlo. (Porque no es una función del navegador).

Sitio web de Weinre

Weinre github repo

Answer 2

Ahora es compatible con Chrome para Android .

Answer 3

Eche un vistazo a este script bash para iniciar el inspector remoto con el simulador iOS: https://gist.github.com/2241976

Answer 4

El hecho de que una característica se implemente en un puerto de WebKit (en este caso, Apple y Chromium), no significa que siempre esté disponible en otra parte. Escribí esto en detalle en mi blog sobre diferentes implementaciones de puertos WebKit .

Hasta el momento, el único puerto móvil WebKit que tiene la función de depuración remota es el navegador RIM Playbook.

Para iOS, es muy difícil de saber porque Apple no proporciona ninguna información sobre su futuro producto. Al menos sabemos que iOS 5 no lo tendrá ya que las versiones beta no muestran nada relacionado.

Para Android, definitivamente se lanzará en un futuro, ya que los usuarios de Android están adoptando Chromium como la nueva base para su WebKit.

Answer 5

La utilidad Shadow de Adobe (que acaba de lanzarse) le permite depurar de forma remota utilizando weinre sin necesidad de insertar ningún código en sus páginas web. Funciona con Chrome en Windows y Mac como el navegador "maestro" y sincronizará todas las páginas de navegación con cualquier cantidad de dispositivos que ejecuten el cliente iOS o Android.

Tenga en cuenta que weinre en sí mismo es algo limitado. Por ejemplo, no tendrá acceso a la pestaña Red.

Answer 6

Thomas señala un recurso excelente para la depuración remota, sin embargo, él indica que debe agregar el código a la página web. Esto no es estrictamente cierto, ya que también permite la interacción a través de bookmarklets. Parte de la página here (en la sección convenientemente llamada "Usar un bookmarklet"), dice que debería funcionar para Android 2.2+ e iOS.

Algunas cosas relevantes a tener en cuenta:

1. No le permitirá depurar errores de inicio (la página ya debe estar cargada para abrir el bookmarklet).
2. No parece reconectarse si pierde la conexión (debe actualizar la página para volver a conectarse).
3. Si tu js ya está roto, ya estará roto.

También es posible (lo he hecho yo mismo) "depurar" el código del navegador Android utilizando una vista web. Puede hacer que la vista web capte todas las llamadas a los métodos (es decir, console.log). Con eso, puede capturar y guardar, o reenviar los mensajes a Logcat.

En relación con el método que ya has probado, cuando habilitaste la consola Debug en iOS, ¿dónde estabas buscando la salida de interacción / registro? Más particularmente, ¿se registró en la consola de depuración en el simulador xCode / iPhone?

Answer 7

Nathan de Vries descubrió cómo hacer esto en iOS5 corriendo en el simulador. Se trata de llamar al método privado _enableRemoteInspector .

Léelo. El resumen sigue:

Para habilitar esto para Mobile Safari, conéctelo con gdb y llame al método:

MobileSafari_PID=$(ps x | grep "MobileSafari" | grep -v grep | awk ''{ print $1 }'')
if [ "$MobileSafari_PID" == "" ]; then
echo "Mobile Safari.app must be running in the Simulator to enable the remote inspector."
else
cat <<EOM | gdb -quiet > /dev/null
attach $MobileSafari_PID
p (void *)[WebView _enableRemoteInspector]
detach
EOM

fi

Luego acceda al inspector en http://localhost:9999/ .

Con un UIWebView incrustado, habilítelo así:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// ...Snipped...
[NSClassFromString(@"WebView") _enableRemoteInspector];
// ...Snipped...
}

En un dispositivo real no funciona, probablemente porque el puerto está cortafuegos: si tiene un dispositivo liberado, puede solucionarlo (actualícenos si lo hace).

Answer 8

Safari en iOS 6 En iOS6 ahora puede depurar remotamente desde Safari 6 (solo OS X). En el dispositivo, abre Configuración> Safari> Avanzado> Habilitar Inspector web. Abra Preferencias de Safari, Avanzado, marque "Mostrar menú de Desarrollo en la barra de menú". Conecte su iPhone / iPad con un cable USB. Ahora, debajo de la barra de menú Desarrollar, debes obtener un submenú para tu dispositivo con las pestañas que tienes abiertas en Safari en tu dispositivo.

Safari en iOS 7 Además de los requisitos anteriores, necesitará Safari 6.1, que en este momento (8 de octubre de 2013) solo está disponible como una semilla para desarrolladores: https://developer.apple.com/downloads/index.action?name=Safari%206.1

Chrome en Android 4 Es un poco más complicado en Android. Instrucciones para la depuración remota en Chrome para Android aquí: https://developers.google.com/chrome/mobile/docs/debugging No he encontrado una forma de habilitar la depuración remota en el navegador predeterminado de Android (v4.04).