Poder debuggear o depurar una web de forma remota en nuestro Android gracias a Chrome DevTools es una gran noticia para los desarrolladores.  De esta forma, podremos depurar una web en una pestaña de nuestro navegador, así como elementos WebView (pequeños navegadores incrustados en una app Android nativa) o hacer un screencasting, entre otras cosas.

Activando la opción para depurar remotamente una web

En primer lugar debemos configurar nuestro dispositivo para que la depuración remota esté disponible. Para ello, necesitaremos:

• Tener instalado Chrome (versión 32 o posterior) en nuestro ordenador
• Un cable USB para conectar el dispositivo Android
• Para depuración del navegador: Android 4.0 o superior y Chrome para Android
• Para depuración de aplicación nativa: Android 4.4 o posterior y un WebView configurado para depuración

Tras ver que tenemos los requisitos mínimos, nos toca dejar el dispositivo preparado para poder hacer uso de la depuración remota. Para ello, debemos activar las opciones de desarrollador:

Ajustes -> Información del teléfono -> Número de compilación –> Hacer tap 7 veces

Una vez tenemos activas estas opciones, debemos activar la depuración por USB:

Ajustes –> Opciones de desarrollador –> Activar depuración USB

Hecho esto, conectamos nuestro dispositivo al ordenador. Se nos mostrará un diálogo en el dispositivo Android para confirmar que permitimos la depuración USB con dicho ordenador, y al darle a OK el ordenador empezará a instalar los drivers del mismo.

Depurando una web en remoto

Hecho esto, podemos proceder a conectar el depurador en remoto. Para ello, lo primero será acceder a la siguiente dirección desde Chrome en nuestro ordenador:

chrome://inspect/#devices

Aquí podremos darle a inspect para depurar la web, con lo que ya podremos ver el código y la consola de depuración en nuestro ordenador, y por ejemplo marcar elementos en el mismo y ver cómo resaltan en el dispositivo.

Depurando WebViews

Si tenemos Android 4.4 o posterior, podemos también depurar el contenido de un WebView que se encuentra en una aplicación nativa. Para ello, en primer lugar debemos tener activa la depuración para WebView en nuestra aplicación, para lo cual debemos incluir el siguiente código:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
      WebView.setWebContentsDebuggingEnabled(true);
}

Esto afectará a todos los WebViews de la aplicación. Hecho esto, podremos ver la lista de WebViews disponibles en nuestro dispositivo a través del enlace:

chrome://inspect

De forma similar al anterior caso, elegimos el que deseemos y empezamos a depurarlo. Simple, ¿no?

Mostrando la pantalla del dispositivo en nuestro ordenador

También podemos hacer un screencasting y de esta forma visualizar en nuestro ordenador lo que el navegador o el WebView nos está mostrando en el dispositivo.  Para ello, basta con que una vez estamos depurando uno de estos elementos, hagamos click en el botón para ver el screencast:

Hecho esto ya visualizaremos la misma web en nuestro ordenador, en tiempo real, tal como podemos ver a continuación:

Redireccionamiento de puertos y host mapping

Pero la cosa no queda ahí, pues podremos perfectamente es gestionar un redireccionamiento de puertos de forma que nos resulte más sencillo testear una web en el móvil. Para ello, haremos que un puerto TCP esté en modo escucha y mapee a otro puerto TCP de nuestro ordenador, de modo que la comunicación se establece a través del USB, sin depender de la configuración de la conexión.

Para ello, seguiremos los siguientes pasos:

1. Entrar en chrome://inspect
2. Hacer click en Port Forwarding
3. En el puerto de Dispositivo, poner el número de puerto en el que queremos que nuestro dispositivo Android escuche
4. En el puerto de Anfitrión, poner la dirección IP o nombre de máquina y el número de puerto donde la aplicación web está funcionando.
5. Tras rellenar los datos, basta habilitar. En la misma web tendremos indicadores de si el redireccionamiento ha sido correcto o no.

Esto nos viene de perlas cuando trabajamos en local. Sin embargo, si usásemos un dominio local personalizado, basta con que nos planteemos un mapeo de anfitrión virtual, el cual se hace de forma bastante similar.

La potencia del depurador, clave para el programador

Estas herramientas nos permiten como programadores depurar una web, consiguiendo no sólo la calidad idónea de la misma, sino ahorrar mucho tiempo en problemas que vamos encontrando durante su desarrollo. Y es que debemos saber aprovechar al máximo las herramientas que como programadores tenemos disponibles, pues nos harán mejores profesionales y sacaremos mejores productos en el menor tiempo posible.

Más información Web de desarrolladores de Chrome