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.

Empecemos activando la depuración remota

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

Lee también: Chrome se actualiza a la versión 39 en Android

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 haciendo lo siguiente:

Ajustes -> Información del teléfono -> Número de compilación –> Y tocar 7 veces en esa opción

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

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 modo 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 (copia y pegala en la barra de direcciones):

chrome://inspect/#devices

 

Aquí podremos haver clic en 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 dentro de aplicaciones

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?

 

Cómo ver la pantalla del dispositivo Android la PC/Computadora

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.

Lee también: Tutoriales y guías de Appbb Inc. para nuestros lectores

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 habilidad de depurar es una herramienta clave para desarrolladores

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.

Fuente: elandroidlibre, con información adicional de la Web de desarrolladores Chrome