Desarrollo web móvil – Inspeccionando webs en dispositivos moviles

Creo que no hace falta aclarar que desde hace, relativamente, poco tiempo los dispositivos móviles (smartphones, tablets) se volvieron una de las principales fuentes de tráfico a sitios web.
Trabajar con los mismos suele ser engorroso, debido a que no contamos con las facilidades que tenemos en los entornos de escritorio.
Sin embargo, en la mayoría de los browsers modernos, es posible utilizar el inspector web de forma remota para poder debuggear nuestra aplicación en tiempo real.
A continuación, voy a recopilar los métodos para activar esta funcionalidad en los browsers más conocidos e iré actualizando el post en caso de encontrar otro browser.

Safari – iOS 6+

Para poder utilizar el inspector web remoto de Safari, necesitamos la última versión de este browser para escritorio, la cual no esta disponible para ninguna otra plataforma ademas de OSX (que novedad ¿no?)

Activar el inspector en iOS

Debemos dirigirnos a Settings -> Safari -> Advance y habilitar la opción Web Inspector

Activar la inspección remota en Safari

Abrimos las settings de Safari (cmd + ,) vamos a la pestaña Advance y marcamos Show develop menu in menu bar.

Ahora vamos a ver un nuevo menú en la barra superior llamado Develop.  Abrimos el sitio que queremos inspeccionar en el dispositivo iOS con Safari, hacemos click en ese menú y vamos a ver una opción con el nombre del mismo. Dentro veremos una lista de los sitios inspeccionables que tenemos abiertos. Clickeamos en él y tendremos el inspector abierto, pudiendo hacer (casi) todo lo que hacemos con el inspector web de Safari en el escritorio.

Firefox – Android

Para hacer esto, necesitamos Firefox 15+ (Tanto en nuestro escritorio como en Android)

Activar el inspector en Android

Abrimos Firefox , vamos a about:config y cambiamos las siguientes settings:

devtools.debugger.force-local -> false

devtools.debugger.remote-enabled -> true

Reiniciamos el browser (normalmente basta con apretar Home en nuestro dispositivo, pero puede que necesitemos Matar la aplicación usando algún task manager.

Activar el debugging remoto

Abrimos Firefox, en el dispositivo Android, vamos nuevamente a about:config, y cambiamos:

devtools.debugger.remote-enabled -> true.

Reiniciamos el browser y ahora podemos activar el debugger remoto desde el menu  Web developer.

Tenemos que indicar la ip de nuestro teléfono y el puerto (por defecto, 6000.  Se puede cambiar mediante la opción devtools.debugger.remote-port en about:config, desde el dispositivo.)

Chrome – Android

Para esto, necesitamos descargar el SDK de Android.

Habilitar el debugging web

Abrimos Chrome en nuestro dispositivo Android, vamos a Settings -> Developer Tools y marcamos Enable USB web debugging.

Forwardear las conexiones al puerto del debugger

Conectamos mediante USB nuestro dispositivo y nos aseguramos de tener activada la opción USB debugging dentro de las Developer options.

En nuestro escritorio, dentro de la carpeta que contiene al SDK de Android, vamos a ver otra llamada platform-tools y dentro un programa abd.

Ejecutamos: adb forward tcp:9222 localabstract:chrome_devtools_remote

Inspeccionar

Abrimos Chrome en nuestro escritorio y vamos a http://localhost:9222 ahí veremos una lista de las pestañas abiertas en el dispositivo.  Al hacer click en una de ellas se abrirá la ventana del inspector y podremos comenzar a trabajar.

Opera Mobile

Activar DragonFly en el escritorio

Abrimos Opera y vamos a Tools -> Advance -> Opera dragonFly en el menú superior.   Luego buscamos el icono de Remote debugging configuration en el panel de DragonFly, seleccionamos el puerto y hacemos click en apply.

Conectar el dispositivo

Abrimos Opera Mobile e introducimos opera:debug en la barra de direcciones. Luego debemos ingresar la ip del escritorio donde tenemos corriendo Dragonfly y el puerto. Una vez hecho veremos la confirmación de que la conexión se realizo de forma exitosa.

Hecho esto, podemos abrir cualquier url y seleccionarla mediante el icono de debugging context en Dragonfly.

Fuentes:

  • Pablo

    Muy bueno!! Lástima lo de Safari :(

  • Hello! I could have sworn I’ve been to this website before but after browsing through some of the post I realized it’s
    new to me. Anyways, I’m definitely happy I found it and I’ll be bookmarking and checking back often!

  • I think this is among the most important information for me.
    And i am glad reading your article. But want to remark on few general things, The web site
    style is ideal, the articles is really nice : D. Good job, cheers

  • Howdy! I know this is somewhat off topic but I was wondering which blog platform
    are you using for this site? I’m getting tired of WordPress because I’ve had issues with hackers and
    I’m looking at options for another platform. I would be awesome if you could point me in the direction of a good platform.

  • Pingback: Mi primer webapp (En FirefoxOS) « Me.log( ... )()