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.