Test, Genymotion, Android – Tracer les flux d’une application avec Charles sur un émulateur genymotion

On avait vu comment utiliser genymotion comme solution pour tester les .apk sur un parc quasi-infini de terminaux Android. Très souvent dans la phase de délicate de la recette et/ou du testing, il est souvent indispensable de tracer le traffic sur l’application, l’appel aux webservices notamment.
C’est à ce moment précis que l’on souhaite coupler cet émulateur d’éventuels outils que l’on utilise par ailleurs dans d’autres contextes notamment comme pour un site web par exemple, je veux parler de Charles.

Petit introduction à Charles, prince du debug


En clair, dans sa définition la plus simple, Charles est un logiciel qui permet de tracer toutes le trafic HTTP et SSL / HTTPS entre votre machine et « le internet ».

Ci-dessous, l’ADN du logiciel Charles livré in-extenso en anglais.

Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).

Configurer un émulateur de Genymotion

Sans s’appesantir en détail, voilà les principales étapes.

On part du principe que vous avez déjà installer Genymotion et que vous êtes en mesure de lancer un terminal Android quelconque. Voilà ensuite les 7 étapes à suivre pour que le trafic de cette émulateur soit pisté dans Charles :

  1. Il faut ouvrir les « Settings » de votre terminal Android sous Genymotion puis appuyer sur l’onglet « Wi-Fi » pour voir les connections sans-fil.
  2. L’onglet « Wi-Fi »
    Test, Genymotion, Android - Monitorer avec Charles un émulateur sous genymotion

  3. Vous voyez apparaitre quelque chose comme « WiredSSID ». En maintenant appuyer un menu va apparaitre vous permettant de configurer la connexion wifi.
  4. Sélectionner « Modify network ».
  5. Test, Genymotion, Android - Monitorer avec Charles un émulateur sous genymotion

  6. Changer le « Proxy settings » pour « Manual ».
  7. Il faut ensuite changer la valeur du champs « Proxy hostname » en tapant 10.0.3.2
    A noter c’est une adresse IP spécifique à Genymotion IP. Inutile d’essayer de la mettre dans la VM directement sur laquelle l’émulateur est adossé, cela ne fonctionnera pas.
  8. Changer la valeur du champs « Proxy port » à 8888.
  9. Appuyer sur « Save ». Le plus sûr est de redémarrer à la fois Charles et Genymotion pour être certain que les changements ont été pris en compte. Pour chaque nouvelle émulateur employé, vous êtes dans l’obligation de faire la même manipulation.

Une capture de Charles couplé à une application Android sur un émulateur de Genymotion
Test, Genymotion, Android - Monitorer avec Charles un émulateur sous genymotion

Dernier conseil, il est possible de faire fonctionner Charles pour tracer l’activité sur un terminal physique, en clair un vrai smartphone. A priori, la condition requise pour un tel usage est de faire pointer le proxy de votre smartphone vers l’IP de votre machine sur le port 888, PC ou Mac, sur laquelle est installé Charles.

Pour conclure, la combinaison des deux outils est un « must-have » étant donné la facilité d’installation de deux logiciels. C’est un gain de temps pour « monitorer, tester, debuger » vos applications mobiles sous iOS comme sur Android.

La connexion de Charles à un terminal physique
Test, Genymotion, Android - Monitorer avec Charles un émulateur sous genymotion

S’assurer dans Charles que votre smartphone pointera vers l’IP de votre machine sur le port 888
Test, Genymotion, Android - Monitorer avec Charles un émulateur sous genymotion

Charles trace une application sur un smartphone
Test, Genymotion, Android - Monitorer avec Charles un émulateur sous genymotion

En savoir plus