Webview: Débogguer sur iPhone avec le DevTools

05 novembre 2019 clemdesign

Vous développer avec Ionic, PhoneGap, Cordova et vous souhaitez debogguer sur iPhone, comme sur Android? Voici la solution.

La configuration de l'environnement de debogguage n'est pas facile à comprendre sur les outils d'Apple, et la recherche sur Internet peut être parfois laborieuse.
Je vous donne les principaux éléments afin de mieux comprendre et configurer votre environnement.

1. Configuration de l'iPhone.

Tout d'abord, il faut commencer par activer l'inspecteur Web à cet endroit: Réglages > Safari > Avancé > Inspecteur Web

Connectez votre iPhone au Mac et faite confiance quand cela est demandé.

Durant cette étape, vous autorisez le navigateur Safari à accéder aux webviews de votre iPhone, élément qui sera utilisé pour afficher votre application.

2. Debogage sur Macbook

Il y a deux possibilités pour débogguer une WebApp dans une webview depuis son Mac: utiliser Safari ou DevTools de Chrome.

Safari a l'avantage d'avoir tous les outils d'échanges pré-configurés.

2.1. Débogguer avec Safari

Lancez votre app sur votre iPhone.

Ouvrez le navigateur Safari depuis votre Mac.

Vérifiez le menu Développement. Si non disponible, cliquez sur Safari > Preferences > Advanced > Show development menu in bar

Cliquez sur Développement > iPhone de ... > Votre app

L'outil de debogage propre à Safari apparaît tout comme celui du DevTool de Chrome.

2.2. Debogguer avec Chrome

Pour pouvoir debogguer avec Chrome, il faut utiliser un proxy développé par google: ios-webkit-debug-proxy.

Pour l'installer, il vous faut HomeBrew. Installez le si vous ne le possédez pas.

Installez ensuite l'outil ios-webkit-debug-proxy:

brew install ios-webkit-debug-proxy

Une fois cela fait, lancez votre app sur iPhone.

Sur votre Mac, exécutez l'outil avec cette commande:

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

Dans Chrome, accédez à l'URL suivante: 

chrome-devtools://devtools/bundled/inspector.html?ws=localhost:{port}/devtools/page/1

Le {port} correspond à:

  • 9221: La liste des devices
  • 9222: Le device A
  • 9223: Le device B
  • ...
  • 9322: Le device max

Il faut installer la dernière version de libimobiledevice pour éviter des erreurs de connexion à votre app. Consultez cet article partie Troubleshooting pour plus d'informations.

Vous pouvez donc utiliser l'outil de débogage propre à Chrome pour votre App iPhone.

3. Un peu plus loin

Sur iPhone, la webview est gérée par le navigateur propriétaire d'Apple, Safari.
Sur Android, c'est celui de Google qui est utilisé, Chrome.

Sur iPhone, il est donc nécessaire d'utiliser une passerelle (entre Chrome et Safari) pour pouvoir utiliser le deboggueur de Chrome.

J'espère que cet article vous a été utile, et je vous dis à plus pour le prochain. xD

Liens utiles:

Article précédent Article suivant

Ajouter un commentaire