Cómo debugar una web app en Chrome

Cuando hacemos una web app, ya sea con jQuery Mobile, con Ionic, con Sencha Touch, etc., una de las cosas que más quisiéramos tener es poder actuar con la web app con F12 y ver y depurar todos los procesos. Es cierto que podemos abrir la app con el navegador, pero no es lo mismo, ya que muchas llamadas u otros procesos se pierden.

Pues bien, entre otros métodos que analizaremos en futuros artículos, hoy queremos comentar la herramienta que nos ofrece Google Chrome. Así es, debugar una aplicación web con Google Chrome es posible a partir de Android 4.0!

Tenéis toda la documentació en la página de desarrollo de Chrome, pero vamos a ver los pasos principales.

Paso 1: Requisitos

Como desarrolladores de web apps, ya tendréis habilitada la conexión USB developer entre el teléfono y el ordenador (en caso de que no fuera así, el tutorial de Chrome incluye también instrucciones, o podéis también consultar aquí: http://www.fandroides.com/que-es-y-como-habilitar-la-depuracion-usb-en-android/; recordad también de instalar los controladores usb de vuestro dispositivos, que normalmente se encuentran en la web del fabricante o incluido en los paquetes de instalación (como el KIES en el caso de Samsung). Para la conexión es lo único que necesitamos.

Paso 2: Google Chrome

En Chrome nos vamos a:

Menú -> Más Herramientas ->Inspeccionar dispositivos

Se abrirá la pestaña de DevTools y el apartado devices.

Menú > Más Herramientas > Inspeccionar Dispositivos

Menú > Más Herramientas > Inspeccionar Dispositivos

Paso 3: Debugar

Nos aseguramos de que “Discover USB devices” está marcado, y nos aseguramos de que nuestro dispositivo ha sido encontrado.

Si tenemos alguna web view activa (nuestra app u otra), ésta se mostrará; si no en cuanto la abramos se mostrará.

Una vez se muestre la app, podemos hacer click en “inspect”, y se mostrará nuestro conocido F12 (en caso de que no sea conocido, podéis echarle un vistazo a este tutorial: https://developer.chrome.com/devtools )

Chrome DevTools - Inspect Devices

Chrome DevTools – Inspect Devices

Como hemos dicho, hay otras herramientas, pero esta es una rápida y magnífica manera de conseguir debigar de verdad una web app!