Activer le debug avec Chrome

Que vous construisiez des applications natives ou hybrides (web+webview) sur Android, l'une des fonctionnalités intéressante (parfois indispensable) de l'environnement est de pouvoir débugger le contenu de ses WebView directement dans Google Chrome.

Avec la console de développement, comme n'importe quelle application web !

On pourrait se dire que compiler votre application en mode "debug" et non en mode "release" suffirait à activer cette possibilité, mais ce n'est pas le cas.

En réalité ce n'est plus le cas depuis la version KitKat de l'OS !

Il faut donc activer cette fonctionnalité directement à l'intérieur de votre application, heureusement l'activation est très simple, il vous suffit de rajouter ces trois lignes dans votre contrôleur :

// MainController.java
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

Mais attention car cela activera globalement le debuggage pour toutes les webviews de votre application (on appelle la méthode statique sur l'entièreté de la classe) et cela ne prendra pas en compte le mode de compilation de votre app (si le flag debuggable est activé ou non). Pour se faire, il faudra plutôt opter pour cette version du code :

// MainController.java
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE))
    { WebView.setWebContentsDebuggingEnabled(true); }
}

Pour aller plus loin

Si vous ne connaissez pas le reste de la démarche pour débugger vos applications hybrides avec Chrome, je vous invite à suivre le reste des étapes sur le site de Google : https://developer.chrome.com/docs/devtools/remote-debugging/webviews/

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !

Photo par Jonathan Kemper sur Unsplash