Para los que desarrollamos aplicaciones web, hace ya tiempo que tenemos que probar las páginas en distintos dispositivos móviles para estar seguros que se ajustará como es debido. Para esto los navegadores modernos (Chrome, Firefox, etc.) nos brindan la opción de renderizar las páginas como si estuviéramos en un teléfono o Tablet, gracias a lo cual casi siempre podemos encontrar los problemas de visualización sin necesidad de hacer las pruebas en un dispositivo físico. El problema está cuando en el dispositivo real tenemos problemas que no podemos reproducir en el navegador de la PC. Para solucionar esto Chrome, desde la versión 32, nos brinda la posibilidad de depurar desde nuestra PC lo que estemos navegando en el Chrome de un Android 4.0 o superior de un dispositivo real.
A continuación voy a explicar paso a paso cómo podemos hacer esto.
Conectar el dispositivo
Lo primero de todo es conectar el celular o Tablet a la PC y asegurarnos de tener los drivers necesarios para que se conecte. La mayoría de los dispositivo nuevos de Android son reconocidos automáticamente por las últimas versiones de los sistemas operativos, pero en caso que no sea así, en esta página de Android tenemos una explicación de cómo instalar estos drivers y de dónde bajarlos según la marca de nuestro equipo: Instalar controladores USB de OEM.
Detectar el dispositivo
Una vez hecho esto necesitamos configurar nuestro dispositivo para que se conecte a la PC y poder debugear, para lo cual es necesario entrar en las “opciones de desarrollador” del equipo. Estas opciones las podemos encontrar desde la configuración de Android, siempre y cuando lo hayamos habilitado antes.
A continuación voy a explicar cómo habilitar estas opciones utilizando mi celular como ejemplo, pero los pasos pueden variar según la versión de Android y el fabricante del equipo. Para más información, por favor referirse a la página Habilitación de opciones para el desarrollador en el dispositivo.
Ahora sí, para habilitar las opciones de desarrollador en nuestro equipo primero tenemos que ingresar en “acerca del teléfono” y luego pulsar varias veces sobre la versión de compilación:
Luego de pulsar alrededor de 7 veces sobre el “número de compilación”, nos pedirá la clave de desbloqueo del dispositivo y, tras ingresarla, aparecerá un mensaje diciendo que se activaron las opciones de desarrollador.
Luego de esto, al ingresar en las opciones del equipo veremos que ya está el nuevo ítem “opciones del desarrollador”
Para poder depurar desde nuestra PC conectada con un cable USB a nuestro dispositivo, necesitamos habilitar la opción “depuración de USB”, que podremos encontrar dentro de la nueva sección “opciones de desarrollador”.
Conectar Chrome de nuestra PC con Chrome de nuestro Android
Una vez que tenemos nuestro dispositivo Android configurado para que se puedan debugear a través del USB, podremos verlo desde nuestro Chrome.
Desde el Chrome del PC abriremos las herramientas de desarrollo con F12, y del menú seleccionaremos “more tools” y “remote devices”.
Luego de esto debería abrirse una sección debajo de la ventana mostrando varias opciones de desarrollo remoto.
Lo que haremos ahora es conectar nuestro dispositivo al USB de la PC y, como lo estamos conectando por primera vez con las opciones de desarrollo por USB habilitadas, nos pedirá confirmar los permisos de depuración desde nuestra PC, lo cual tendremos que confirmar:
En caso que nuestro dispositivo no nos pida esta confirmación, es porque nuestra PC no está intentando conectarse con el dispositivo Android para debugear. Si pasa esto, podemos realizar alguna de las siguientes pruebas:
- Desde las opciones de desarrollo de nuestro celular elegir la opción “Revocar autorizaciones de depuración USB”, para que elimine todos los equipos autorizados para debugear en nuestro Android, tras lo cual, deberemos desenchufar y volver a enchufar el equipo al USB
- Si lo anterior no funcionó, podemos intentar instalando y ejecutando manualmente ADB (Android Debug Bridge), la cual es la herramienta de Google para conectar Android Studio o, como en este caso, Chrome con Android para realizar el debuging de las aplicaciones. Si no tenemos ADB instalado (viene con Android Studio), se puede descargar el SDK de Android (el cual incluye ADB) desde este link: SDK Platform Tools. Luego de instalado, se debe ejecutar la siguiente instrucción desde la línea de comandos:
%LOCALAPPDATA%\Android\sdk\platform-tools\adb server
Una vez hecho esto el celular debería pedirnos permisos para debugear.
Cuando nuestro Android esté conectado al PC, desde las “Developer Tools” de Chrome, en la solapa “Remote Devices”, debería mostrarnos del lado izquierdo nuestro dispositivo (o los dispositivos que tengamos conectados) con la leyenda “connected”
Si ves tu dispositivo en esta ventana, quiere decir que ya podemos realizar el debuging desde Chrome.
Navegar sitios desde tu celular e inspeccionarlos desde la PC
Cuando tengas todo conectado, podemos abrir Chrome en el dispositivo e ir a alguna página, por ejemplo, a “Programando a Medianoche”, y desde el Chrome de nuestra PC, en la sección “Remote devices”, seleccionar nuestro dispositivo para ver las páginas que estamos navegando en el dispositivo.
Del lado derecho veremos todas las solapas que tengamos abiertas en Android, con el título y URL de cada página. Si pulsamos en el botón “Inspect” que está al lado de la página, se abrirá otra ventana que nos mostrará del lado derecho las conocidas herramientas de Chrome para seleccionar elementos de HTML, ver sus estilos, la consola de JavaScript, etc., y del lado izquierdo una captura en vivo de cómo se ve la página en el dispositivo, e incluso podemos interactuar con la misma utilizando el mouse y teclado y el comportamiento ejecutará en el dispositivo.
Navegar sitios alojados en tu PC desde tu celular
Esta herramienta de debug remoto de Chrome tiene muchas opciones y herramientas muy útiles, pero una de las que más utilizamos, además de la descripta en el punto anterior, es el “port forwarding”. Lo que nos permite esta opción es agregar reglas para establecer que lo que estemos navegando en un puerto específico dentro del dispositivo, se reenvíe a otro puerto conectándolo a través de la PC. Esto puede resultar útil cuando tenemos en nuestra u otra PC de nuestra red un proyecto que estamos desarrollando y necesitamos probarlo con el celular, entonces podemos poner, por ejemplo, que todo lo navegado desde el celular en el puerto 3333 se reenvíe a nuestra PC en el puerto 80, tras lo cual, cuando desde nuestro dispositivo vayamos a http://localhost:3333 lo que veremos es la página que está en el servidor web de nuestra PC, sin necesidad de ponerlo público, habilitar el firewall, etc.
Esta acción se realiza creando una nueva regla en la sección “Port forwarding” de la solapa “Remote devices”.
Espero que este pequeño “paso a paso” de depuración remota de Chrome les sea de utilidad.
¡Suerte!