Las aplicaciones web modernas se diseñan pensando en móviles. Es lo que se llama diseño "Mobile First". Y se van "ampliando" hacia anchos de pantalla mayores para abarcar todo tipo de dispositivos de mayor pantalla: desde tabletas hasta monitores 4K.
Para poder hacer el diseño y ver cómo quedan los componentes en la pantalla, los emuladores que ofrece cualquier navegador hoy en día, son más que suficientes. Solo tienes que abrir las herramientas del navegador (F12 o CTRL+MAYs+I en Windows o Linux, ⌘+⌥+I en macOS) y utilizar el botoncito de emulación (o CTRL+MAYs+M en Windows/Linux, ⌘+⇧+M en macOS):
Con esto podemos emular no solo cualquier ancho del viewport, sino también dispositivos concretos, que incluso podemos personalizar. Con esto, la parte de probar el aspecto de la aplicación o página web está solucionada. Pero ¿qué pasa cuando se produce un error o algún "poltergeist" cuando lo probamos en un dispositivo real (cosa que deberíamos hacer siempre)? Pues que los navegadores móviles no tienen herramientas del desarrollador, ni siquiera una consola para poder mirar los errores, así que vamos a ciegas.
Nota: existen proyectos JavaScript que podemos "inyectar" en el navegador móvil a través de "bookmarklets", que nos proporcionan una consola básica para poder interactuar mínimamente con la página actual e intentar intuir qué está pasando. Son esfuerzos encomiables pero que no proporcionan ni de lejos la capacidad de depuración de un navegador de escritorio.
¿No sería genial poder depurar tu aplicación móvil directamente desde el ordenador de escritorio y tener acceso a las mismas herramientas en tiempo real?
Pues esto precisamente es lo que vamos a ver hoy, para móviles Android (los móviles iPhone tienen algo parecido, pero lo dejamos para otro día) y con el sistema operativo de escritorio Windows. Vamos a ello.
Paso 1: Modo desarrollador en tu móvil Android
Lo primero que tenemos que hacer es habilitar el menú del desarrollador en tu móvil, de modo que podamos establecer los parámetros necesarios. Para ello:
- Vete a la configuración (la ruedecita que normalmente está arriba a la derecha cuando deslizas tu dedo desde la parte superior de la pantalla)
- Ahora ve al apartado
Acerca del teléfono > Información de Software y localiza la sección que pone Número de compilación que contendrá un número muy largo.
- Pulsa el número de compilación 7 veces seguidas con el dedo.
- Introduce tu PIN para permitir que se habilite el menú de desarrollador.
- Listo: ya te debería aparecer abajo del todo en la configuración.
En este mini vídeo puedes ver todo el proceso:
Paso 2: Habilitar la depuración por USB
Ahora que ya tienes el menú del desarrollador disponible, debes activar la opción Depuración por USB que encontrarás un poco más abajo de dicho menú, pero que puedes buscar con facilidad usando la lupa de la parte superior:
Paso 3: Conectar el móvil al ordenador
Necesitarás un cable USB que vaya desde tu Android a tu ordenador con Windows. Simplemente hay que "pinchar" uno al otro con el móvil desbloqueado. Al hacerlo se mostrará una pantalla pidiéndonos permiso para permitir la depuración remota:
Puedes marcar la opción de Permitir siempre desde este ordenador para poder olvidarte y no tener que contestar cada vez que los conectes. Esto es lo recomendable si es tu ordenador personal y no estás utilizando un equipo compartido.
Paso 4: Detecta tu móvil desde Chrome
Ahora ya podemos utilizar Chrome (u otro navegador basado en Chromium como Edge o Brave) para depurar nuestra aplicación en el móvil.
Accede a la aplicación que quieras depurar desde el móvil, utilizando Chrome (o Edge, etc..., los basados en Chromium), asi ya la tendrás abierta y lista para depurar.
En el ordenador abre el navegador y escribe lo siguiente en la barra de direcciones:
chrome://inspect
Ya te irá directo a los dispositivos seguramente, pero si no es así, pulsa en Devices en el lateral para ir a la zona de descubrimiento de dispositivos remotos:
Asegúrate de tener marcada la opción de Discover USB Devices (o sea, de descubrir dispositivos USB). Si no has autoizado aún tu dispositivo desde el móvil te mostrará el mensaje de la figura anterior, diciendo que estás pendiente de autorizarlo.
Cuando lo autorices, al cabo de unos segundos, verás ya tu dispositivo en la lista de objetivos remotos:
Fíjate en que, si ya tienes alguna pestaña abierta en el navegador te la mostrará, y tendrás enlaces para inspeccionarla, poner el foco en la pestaña, recargarla, cerrarla.
Nota: aunque te ponga que el navegador remoto es más nuevo que el del ordenador, no tiene por qué ser cierto. En la captura anterior no era así y lo mostraba igual. En ese y otros casos te puede aparecer un enlace adicional Inspect fallback como en la figura que, si es un problema real y no te funciona Inspect, podría arreglártelo.
Pulsa el enlace Inspect para abrir las herramientas del desarrollador. Se abrirá otra ventana con las herramientas que ya conoces para el escritorio, pero con tu navegador móvil:
Ahora ya puedes utilizar toda la potencia de las DevTools con tu aplicación móvil de la misma manera que lo harías con una web local, depurando JavaScript, deteniendo la ejecución, inspeccionando el HTML y CSS, etc.
¡Espero que te resulte útil!