Depurar páginas web de Android Chrome

Buenas, los que desarrolléis páginas web ya sabréis de los inconvenientes de tener tantos navegadores y la forma de interpretar el HTML que tiene cada uno. Desde hace un tiempo se han unido a la fiesta los navegadores móviles.

Para muchos fueron un alivio las herramientas como Firebug, la cual nos permite con un par de click de ratón ir modificando la apariencia de una web en caliente e ir viendo que piezas debemos de tocar para llegar a obtener la maquetación esperada.

Los navegadores móviles tienen una complicación añadida, para estos era mucho más difícil poder acceder al código fuente de la web para poder hacer modificaciones o saber que estaba pasando en algún punto determinado de nuestros scripts js.

Ahora esto ha cambiado y podemos llegar a utilizar el inspector de Chrome para poder revisar el HTML de una web móvil e incluso modificarlo sobre la marcha para ver que tal queda.

Lo primero que necesitareis es un dispositivo móvil con Android 4 o superior y Chrome instalado en el mismo. Lo de la versión es porque Chrome solo puede instalarse a partir de esta versión.

También necesitareis tener instalado el SDK de Android en vuestro PC.

Abrimos en nuestro dispositivo Chrome y vamos a las opciones: Ajustes > Opciones Avanzadas > Herramientas de desarrollo y aquí habilitamos la depuración web USB.

Enchufamos vía USB nuestro dispositivo a nuestro PC y abrimos un terminal. En el escribiremos lo siguiente:

adb forward tcp:9222 localabstract:chrome_devtools_remote

Esto creará una conexión entre el Chrome de nuestro dispositivo y nuestro PC. En nuestro dispositivo abrimos uno, dos o las páginas que queráis. Y ahora en el Chrome de nuestro PC llamamos a la siguiente url:

localhost:9222

Aparecerá una página con miniaturas de las diferentes páginas web que tenemos en nuestro dispositivo. Pincháis sobre una y el inspector de Chrome se abrirá, ahora ya podéis empezar a modificar desde vuestro PC vuestras páginas web móviles con una comodidad pasmosa. 

Comments are closed.