Déboguer une application phonegap distante avec Chrome

    Déboguer une application Phonegap n’est jamais chose évidente surtout lorsqu’elle est déployée sur un appareil mobile. Nous avons tous rencontré cette problématique de vouloir interagir avec le code JavaScript ou HTML de l’application, ne serait-ce que pour voir les logs de la console, mais en vain. Google propose une solution qui répond à cette problématique ne nécessitant rien de plus que l’installation de Google Chrome.

    source: https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?hl=en

    Présentation

    Chrome utilise le « DevTools » qui n’est autre qu’une boite à outils pour le développeur disponible au sein du navigateur. C’est cet outil qui nous permet de déboguer quotidiennement nos merveilleux sites avec les fonctionnalités que nous connaissons tous. Chrome propose aussi une fonctionnalité qui lui permet de réaliser ce même débogage sur des applications ou des sites distants, notamment sur des terminaux Android. Mais comment ca marche ?

    Par distant, il faut donc comprendre qu’il est possible de déboguer votre navigateur chrome, ou votre application Phonegap présents sur votre appareil Android. Lui même devant être relié à votre ordinateur par un câble USB. C’est aussi simple ? Pas tout a fait….il y a malheureusement des prérequis.

    Dans cet article, nous nous concentrerons uniquement sur le débogage d’une application PhoneGap sous Android.

    remote-debug-banner

    Prérequis

    Pour pouvoir bénéficier du débogage à distance:

    • Chrome en version 32 ou supérieure doit être installé sur votre machine de développement.
    • Votre terminal Android doit être relié via USB à votre ordinateur.
    • Une version d’Android qui doit être supérieure ou égale à la version 4.
    • Chrome for Android doit être installé sur votre terminal mobile.
    • La version de Chrome sur votre ordinateur doit être supérieure à celle de votre smartphone.

    Configuration Android

    Coté Android, il vous faut activer les options de développement

    Android < 4.2

    Si vous posséder une version d’Android < 4.2, vous trouverez cette option dans l’application Paramètres de la rubrique Système.

    option_developpeur_android_4

    Android >= 4.2

    Si vous posséder une version d’Android >= 4.2, l’option pour les développeurs est masqué et il vous faut l’activer. Pour cela vous devez aller dans les Paramètres puis sélectionner A propos du téléphone dans la rubrique Système. Il vous faut ensuiter tapoter sept fois sur Numéro de build ou Numéro de version (ce n’est pas une blague) et vous aurez alors un message vous indiquant que les options pour le développeur sont désormais accessible. Ainsi, si vous retourner dans l’application Paramètres, vous devriez voir l’entrée Options pour les développeurs sous la rubrique Système.

    option_dev_android_4_2

    Dans tous les cas, sélectionner Options pour les développeurs sous la rubrique Système et activer le débogage USB sous la rubrique débogage. Un message de confirmation vous sera demandé. N’oubliez pas d’installer Chrome pour Android et ça sera tout pour la partie Android.

    Branchement USB

    Il vous naturellement installer les drivers USB propres à votre smartphone Android. Pour vous aider, utiliser ce lien: https://developer.android.com/tools/extras/oem-usb.html

    Puis il suffit simplement de brancher votre smartphone à votre pc via USB.

    Chrome Inspect

    Sur votre ordinateur, lancer Chrome et dans un nouvel onglet taper: chrome://inspect. Une page comme celle ci devrait s’ouvrir :

    Vérifier bien que la case « Discover USB devices » est cochée.

    chrome_inspect_before

    Si vous branchez votre smartphone à votre pc et que vous lancez votre application PhoneGap, vous devriez voir apparaître votre appareil mobile avec la liste des applications installées qu’il vous est possible d’inspecter.

    chrome_inspect_after

    Pour chaque application, on a un lien « inspect » qui va alors nous ouvrir une console de développement Chrome pour notre application mobile.

    chrome_inspect_console_dev

    chrome_inspect_console_dev_inspect

     

    Génial non ? Il nous est possible de réaliser toutes les opérations habituelles : Inspection du DOM, accès à la console Javascript et donc aux variables, accès aux network, aux ressources, ajouter des points d’arrêts et bien d’autres !

    Il est bien sur possible d’effectuer l’équivalent sur un Mac et pour déboguer un site web et non une application mobile.