Techniques de Débogage pour l'Écosystème Apple

Lors du développement d’un projet Web, il peut être compliqué de vérifier le bon fonctionnement de nos applicatifs sur un parc d’appareils de plus en plus large et hétérogène : PC à écrans ultra-larges, laptops, tablettes, smartphones, foldables etc…

L’écosystème Apple présente à lui seul une complexité de débogage importante : Google ayant décidé d’utiliser son propre moteur de rendu dans Chrome/Chromium, Safari nécessite désormais des tests spécifiques pour valider le bon fonctionnement des projets développés.

Le développement d’apps mobiles iOS/iPadOS nécessite forcément un environnement de développement Apple, ce qui n’est pas le cas lorsqu’on développe pour le Web : n’importe quel PC (Windows, Linux ou macOS) peut servir à concevoir des apps Web complexes. Tout l’enjeu est de s’assurer que nos apps tourneront sans accroc sur les devices à la pomme.

Quelle que soit la solution choisie, il est important de bien tester sur un large panel d’appareils pour s’assurer de l’absence de bugs lors des mises en production, d’autant plus dans des secteurs dont les clients sont majoritairement friands de produits à la pomme, tels que le luxe, pour qui les parts de marché Apple sont très importantes, et le testing associé est donc indispensable.

Dans cet article, nous allons étudier plusieurs solutions, nécessitant ou non des devices Apple différents pour chacune.

ngrok : la solution facile, pas toujours disponible

ngrok est un outil permettant d’exposer une application HTTP locale sur une URL distante, accessible depuis Internet. Après installation, une simple commande :

ngrok http 3000

va permettre de disposer d’une URL vers votre localhost:3000. Ainsi, avec un device physique, vous pourrez accéder à votre environnement de développement depuis Safari, que ce soit sur iOS, iPadOS, ou macOS.

Sur le free plan, ngrok expose une URL auto-générée : https://8443-89-207-175-15.ngrok-free.app dans l’exemple ci-dessous.

Plusieurs plans payants permettent de disposer d’options de monitoring poussées, et d’un domaine fixe, plus pratique pour des tests répétables.

Cependant, en fonction des réglages de sécurité opérés par votre DSI sur le réseau d’entreprise, et votre PC, ngrok n’est pas toujours fonctionnel. Il faut alors se rabattre sur une autre solution.

Exposer un port sur son réseau local

Une autre solution, similaire dans l’approche à celle de ngrok, consiste à exposer le port de développement de son poste sur le réseau local : ainsi, en connectant un device sur le même réseau local que son poste de dev, on peut s’y connecter facilement en récupérant son IP via un simple ipconfig sous Windows, ou ifconfig sur Unix.

Ainsi, en ouvrant l’URL http://10.31.4.66:3000 depuis Safari sur un appareil Apple, on peut accéder à son environnement de dev local et tester son produit.

Votre pare-feu doit simplement accepter les connexions entrantes sur ce port.

Déboguer depuis macOS : la puissance d’Xcode et de ses simulateurs, et le débogueur de Safari à la rescousse

Une solution très confortable consiste à utiliser un Mac comme poste de développement.

Plusieurs avantages : l’accès en natif à Safari Desktop pour tester, et la compatibilité avec Google Chrome, Mozilla Firefox, Opera… Seul Microsoft Edge manque évidemment à l’appel. Via l’installation d’Xcode, l’IDE dédié au développement d’apps natives (mobile, tablette ou desktop) pour les OS Apple, on peut utiliser l’ensemble des outils proposés par Xcode et notamment les simulateurs de devices qui permettent de lancer des devices virtuels tournant sous différentes versions d’iOS/iPadOS, et donc des versions de Safari associées. Attention toutefois à l’espace disque nécessaire, les images sont volumineuses, et Xcode ne fait pas de nettoyage à chaque mise à jour, on se retrouve donc rapidement avec un espace de stockage saturé.

Exemple de page sur laquelle un débug est nécessaire !

Autre avantage : dans les options de développement de Safari, il est possible de lancer une console de débogage sur des sites Web encapsulés dans des Webview, ou bien des simulateurs, ce qui permet d’avoir accès aux requêtes HTTP échangées par l’appli Web, ou à la console Javascript pour voir les erreurs et les warnings. Cette console de débogage est également disponible sur des devices physiques, via un câble USB, de la même manière que Google Chrome propose un dispositif similaire pour les appareils tournant sous Android.

Les outils cloud tels que BrowserStack

Les solutions présentées précédemment nécessitent des appareils physiques Apple (un Mac et/ou des iPhone/iPad). Dans le cas où vous n’en disposez pas, ou bien vous voulez élargir la couverture de vos tests sur de nombreux form factors, BrowserStack est alors un outil de choix pour exécuter des tâches à distance sur des vrais appareils physiques, hébergés dans une ferme de devices accessible depuis Internet. Il devient alors possible de lancer des campagnes de tests automatisés sur un large panel d’appareils, ou de piloter à distance un appareil spécifique sur lequel on a détecté un problème en production.

Conclusion

Dans cet article, on vous a présenté plusieurs pistes pour faciliter le développement de vos apps Web et assurer la qualité de leur rendu sur les appareils Apple. Il existe évidemment d’autres solutions, plus ou moins complexes à mettre en place et onéreuses, mais ces quelques exemples nous semblent représentatifs de situations réelles vécues en agence de développement.