Inspeccionar elementos, depurar en el móvil o tablet

Es una acción que desde el móvil o tablet y, actualmente, con independencia del navegador utilizado no es posible realizar. Es algo que los desarrolladores web echamos de menos, y desde codection siempre que trabajamos en proyectos responsive (la mayoría) precisamos de una herramienta con la que poder conocer perfectamente lo que está cargándose desde la vista móvil (o tablet) real.

Muchos dirán que bastará con redimensionar el navegador para que cargue la vista móvil, o incluso cambiar el userAgent del sistema para enganchar con esa vista. Pero eso no es cierto, ya que el motor de renderizado no está ejecutando sobre la misma plataforma.

Pues bien, ¿cómo solucionarlo? Desde Google nos proponen la siguiente solución a través de su navegador, sí Google Chrome; con Chromium no lo vinculé por tener una versión anterior (me sirve para pruebas). A grandes rasgos es tan sencillo como:

1. Conectamos el móvil/tablet por USB al ordenador
2. Vinculamos los navegadores
3. Y ya podemos inspeccionar y depurar cuanto queramos

Ahora, paso a paso. Antes de nada necesitamos:

• Un dispositivo Android con la aplicación Chrome for Android instalada y actualizada desde Google Play
• Un cable USB para conectar el dispositivo. En Linux no hace falta configurar nada, así que nos ahorramos pasos 🙂
• Google Chrome (v32 o superior) instalada en nuestro equipo

Bien, vamos por puntos:

1. Configurar nuestro dispositivo. Hemos de habilitar el modo depuración. Según la versión de terminal que tengamos esta será la forma:

• En Android 4.0 y 4.1: Ajustes -> Opciones de desarrollador (Settings -> Developer options)
• En Android 4.2 o superior es un poco más complicado, pero poco más. Las opciones de desarrollador están ocultas por defecto, para habilitarlas nos dirigimos a Ajustes -> Sobre el teléfono (Settings -> About phone) y hacemos click en el número de versión (Build number) 7 veces seguidas. Ahora vuelve atrás y ya verás las opciones de desarrollador.

2. Si usas windows (espero que no) tendrás que instalar los siguientes drivers para habilitar la configuración entre Windows y el dispositivo. Poco más que explicar aquí, que después presumen de que es todo muy fácil de instalar. Pues ahí va.

3. Descubrir los dispositivos. Simplemente, desde la barra de navegador accedemos a about:inspect y verificamos que la opción Discover USB Devices está marcada.

4. Conectar el dispositivo. Ahora sí, es el momento, lo conectamos, entramos en opciones de desarrollador y habilitamos USB Debugging, aceptamos el permiso para depurar desde el ordenador (el mismo móvil nos lo preguntará) y desde la pestaña about:inspect lo seleccionamos y a disfrutar 🙂