Debugger ses applications mobiles hybrides sur Android

Chez We Are One, nous adorons le développement mobile, que ce soit natif Android ou Hybride avec Ionic. Nous travaillons depuis peu avec une Startup, pour l’instant confidentielle, mais qui pour son prototype a besoin d’une application mobile hybride. Par chance la stack technique était déjà en place avec Ionic, Phonegap et Gulp. Bref, pile dans nos technologies favorites.

Au fur et à mesure des développements nous avons eu à tester l’application sur différents supports et de différentes façons. Pour les supports nous utilisons 3 supports :

• Le navigateur Chrome en mode émulation mobile
• L’émulateur Android Genymotion avec plusieurs tailles et plusieurs versions d’Android (19 -> 22)
• Des téléphones Android (notre équipement personnel)

Pour le navigateur Chrome, pas de soucis de débogage grâce à la console intégrée à DevTools. Par contre pour l’émulateur et les vrais devices, cette partie s’avère moins triviale.

Il y a plusieurs domaines que l’on souhaite suivre pendant le développement :

• Le code javascript et son comportement
• La mise en page réalisée grâce au CSS et qui, comme chacun le sait, a tendance à s’afficher différemment selon les appareils.

Pour ce faire, je vous propose un panel d’outils bien pratiques pour gagner du temps dans le « debugging » de vos applications hybrides pour devices Android.

Le Code

Le controller :

[pastacode lang= »javascript » message= »Controller » highlight= » » provider= »manual »]

angular.module('starter.controllers', [])
.controller('AccountCtrl', function($scope, $log) {
  $scope.settings = {
    enableFriends: true
  };

  $scope.submit = function() {
    $log.log(JSON.stringify($scope.settings));
  }
})

[/pastacode]

La vue :

[pastacode lang= »markup » message= »VIew » highlight= » » provider= »manual »]

<ion-view view-title="Account">
  <ion-content>
    <ion-list>
      <ion-toggle  ng-model="settings.enableFriends">
        Enable Friends
      </ion-toggle>
    </ion-list>
    <label class="item item-input">
      <input type="text" placeholder="First Name" ng-model="settings.firstName">
    </label>
    <button class="button button-full button-positive" ng-click="submit()">
      Validate
    </button>
  </ion-content>

  <div class="bar bar-footer" style="text-align:center">
    <img src="img/logo_200.png" style="height: 35px; width: auto;">
  </div>

</ion-view>

[/pastacode]

Résultat :

Le code est très simple pour les besoins de cet article.

Deux inputs, une view et un controller.

Lorsque l’on appuie sur le bouton « Validate« , on affiche dans la console l’objet settings construit.

1. LOGCAT (Android)

Si on développe pour la plateforme Android, la première chose (et probablement la moins pratique) est d’utiliser la commande « adb » du SDK. Il faut savoir que l’output de la webview est écrit dans les logs Android. On peut donc utiliser la commande « adb logcat » pour tracer ces actions avec par exemple un « console.log() » ou un « $log.info().

La commande que l’on utilise est :

$ adb logcat chromium:V *:S | grep "INFO:CONSOLE"

Une petite explication sur cette ligne :

• adb logcat : affiche les logs du terminal
• chromium:V : filtre les logs liés au tag « chromium » qui ont le level « VERBOSE »
• *:S : passe sous silence tous les autres logs  (S –> SILENT)
• | grep « INFO:CONSOLE » : ne conserve que les messages ayant la chaîne INFO:CONSOLE.

Ce qui nous donne :

2. WEINRE

Nous sommes bien d’accord ce n’est pas le plus pratique mais avec des logs bien placés et activables / désactivables à la volée on peut se sortir de certaines situations assez triviales. On cherche maintenant à aller plus loin et à trouver la possibilité de voir le DOM et encore mieux d’avoir une console Javascript pour debugger notre app.

Commençons avec weinre (http://people.apache.org/~pmuellr/weinre-docs/latest/). Weinre est surtout pratique pour les devices Android dont la version est inférieure à 4.4. Sinon Chrome Dev Tools fait quasiment la même chose, sans rien avoir besoin d’installer.

Weinre est disponible sous forme de package npm, il vous faut donc Node et NPM d’installés. Ensuite :

$ npm -g install weinre
$ weinre --boundHost -all-

Weinre fonctionne de la façon suivante :

• Il déploie un script sur le port choisi (8080 par défaut) : « http://localhost:8080/target/target-script-min.js »
• On référence ce script dans notre code (index.html en général) (avec une IP visible, du genre 192.168.1.x)
• On démarre l’application mobile
• Sur le browser on ouvre la page « http://localhost:8080/client »
• Si tout fonctionne on doit voir une ligne dans la page web par device connecté au serveur weinre.

Démo :

Pour les plus :

• Pas besoin de connecter son device à l’ordinateur, ce qui est pour moi une fonctionnalité réellement utile (en mode démonstration client) ;
• Pas besoin de mettre son téléphone en mode debug USB.

Malgré ce côté un peu magique, weinre reste limité et contraignant :

• Le support du CSS n’est pas forcement complet
• Il faut installer un package npm
• C’est assez lent

Pour pallier à ces manques nous pouvons utiliser Chrome Dev Tools ou GapDebug que nous détaillons ci-dessous.

3. CHROME DEV TOOLS

Tout d’abord pour pouvoir utiliser Dev Tools il vous faut :

• Pour Android, une version > 4.4
• Pour iOS à priori une version > 6 (http://stackoverflow.com/questions/11262236/ios-remote-debugging)
• Son device en mode debug USB (Option développeur > USB Debug) et connecté à l’ordinateur

Une fois ces étapes réalisées, dans la barre d’URL de chrome :

chrome://about:inspect

On arrive normalement à cette vue :

où C6903 est le nom de mon device (Xperia z1 pour le test).

Ensuite on démarre l’application :

et on clique sur le lien « inspect » lié au device en cours de debug.

Tadam !

On retrouve donc tous nos outils favoris disponibles avec Dev Tools. A noter que la vue de gauche est exactement celle qui se trouve sur le device. Lorsque l’on change d’écran via le debugger, l’application change aussi d’écran sur le device.

4. GAPDEBUG

Enfin, depuis peu nous utilisons un autre outil, un peu plus complet pour debugger nos applications hybrides Android (et iOS) : GapDebug

Au menu des features :

• Drag and Drop installation
• Reprise d’une session de debug
• Liste des applications debuggables

On commence de la même façon qu’avec Chrome Dev Tools, en connectant le mobile en mode USB Debug à l’ordinateur.

L’interface de GapDebug est facile d’utilisation et on retrouve les outils Dev Tools pour la partie Debug :

On aime donc GapDebug car il permet d’avoir toutes les fonctionnalités de Chrome Dev Tools dans un environnement plus pratique. Comme Dev Tools, la navigation dans l’application sur la fenêtre de gauche est « répercutée » sur le terminal mobile.

Conclusion

Nous avons donc à disposition de nombreux outils qui nous permettent de débugger nos applications mobiles très facilement. Je recommande weinre pour, par exemple, debugger une app sur le terminal d’un client distant. Pour le reste GapDebug ou Chrome Dev Tools sont beaucoup plus pratiques.

Voilà c’est la fin de cet article, n’hésitez pas à commenter, à nous poser vos questions sur le sujet ou encore à nous contacter pour plus d’informations.

Merci de m’avoir lu et à très bientôt sur le Blog We Are One.