Débugger une appli android phonegap et/ou HTML5 avec Weinre

Aujourd'hui j'ai envi de vous parler du débuggage d'applis android. Mais pas n'importe quelle sorte d'appli android ! Je vais m'intéresser aux applis phonegap, et plus généralement, les applis qu'on peut appeler "hybride".

Ce que j'appelle une appli hybride, c'est :

1. Une application native (ios / android / windowsphone / ...)
2. Qui sert de coquille
3. Pour embarquer une WebView
4. Qui contient HTML/JS/CSS
5. Qui est commun entre toute les plateformes (ios / android / windowsphone / ...)

Le développeur travaille sur la partie web, et l'inclut dans les WebView des applications natives. L'avantage semble évident : un seul développement permet de créer plusieurs applications. Mais vient le moment fatal de lancer l'application sur un device ou dans le simulateur!...

Et là, tout ne marche pas comme prévu. Le développeur web qui est habitué à travailler dans un navigateur web avec console de débug (typiquement webkit ou firebug) sera vite démuni. Ces consoles sont très utiles pour par exemple :

• Débugger le javascript, avec points d'arrêts
• Changer les règles css
• Ecrire du javascript en direct
• Visualiser les connexions
• Mesurer les performances graphiques
• etc...

Donc voila ma question : comment débugger à distance son appli hybride ? Et plus particulièrement android, qui actuellement ne dispose pas des outils que l'on peut trouver sur iOS.

Une solution existe : Weinre. Cet outils permet de faire pointer une console webkit vers une page Html à distance. Le principe est simple, l'installation peut l'être un peu moins. Je vous propose de suivre ce guide.