Cómo depurar (debug) tu aplicación de cordova en un dispositivo con Google Chrome

Cómo depurar (debug) tu aplicación de cordova en un dispositivo con Google Chrome

Aunque la depuración de una aplicación Android usando Android Studio (para una aplicación nativa claro está) es realmente sencillo y cómodo. Sin embargo, la depuración de una aplicación cordova puede llegar a convertirse en una verdadera pesadilla si no tienes las herramientas correctas. Tu mismo te darás cuenta de que ver que algo en tu aplicación no funciona, hacer algunos cambios en el código, compilar, verificar en el dispositivo, ver que el error sigue ahí, modificar código nuevamente y compilar otra vez no es para nada productivo.

Para depurar una aplicación cordova correctamente vamos a usar la herramienta incorporada en Google Chrome en la versión de escritorio (Chrome debugging tool).

Requisitos

  • Paciencia (En algunos computadores, la configuración puede tardar bastante).
  • Un dispositivo android (versión 4.4 o mayor es necesaria pues versiones anteriores no funcionan) y un cable USB que permita la conexión del dispositivo con el computador.
  • Google Chrome (versión 30 o mayor).
  • Más paciencia.

Preparando la depuración

El proceso consistirá en 3 sencillos pasos.

  1. Activa el modo de desarrollador en tu dispositivo Android.
  2. Configura el módo de inspección en Google Chrome de escritorio.
  3. Inicia la depuración.

Nota: algunos dispositivos necesitan que tu computadora tenga los Drivers del dispositivo apropiado instalado. Por ejemplo, si tienes un dispositivo Motorola, necesitarás los drivers de Motorola que puedes conseguir en el sitio web oficial y luego funcionará todo correctamente.

1. Activar modo de desarrollador

Con el fin de depurar tu aplicación Android con tu computadora, debes permitir la depuración en el dispositivo via USB. El modo de desarrollador está desactivado de manera predeterminada así que necesitamos activarlo, para hacerlo abre la configuración y ve a Configuración de Android > Acerca del dispositivo (ultima opción).

Primero, oprime (toca) 7 veces seguidas en la opción Build number (que es tambien la última opción), luego un mensaje de "Ahora eheres un desarrollador" aparecerá. A continuación, vuelve a Configuración de android y ahora encontrarás una nueva opción disponible en el menú (Developer options - Opciones de desarrollador).

Developer options

Selecciona Developer options y ve hacia el area de depuración (debugging) y activa la opción USB Debugging (Permitir la depuración cuando el dispositivo sea conectado a la computadora).

Developer options

Ahora podrás depurar tu aplicación cordova en Chrome sin ninguna limitación.

2. Accede al módo de inspección

Ahora que tu dispositivo permite la depuración, conecta tu dispositivo a la computadora. En tu dispositivo saldrá casi inmediatamente un dialogo de confirmación que pregunta si deseas permitir la depuración desde la computadora (a lo cual debes responder afirmativamente).

Luego navega a chrome://inspect en Chrome y si todo funciono correctamente, podrás ver tu dispositivo listado en el menú:

How to debug

Seleciona en "inspect" de acuerdo a la aplicación que deseas depurar y que se encuentra activa en tu dispositivo, ahora podrás inspeccionar de la misma manera en la que lo haces con proyectos web.

3. Inicia la depuración

Finalmente podrás iniciar con la depuración en tu aplicación sin ningun límite.

Que te diviertas !

Esto podría ser de tu interes

Conviertete en un programador más sociable