Comment utiliser Web Inspector pour déboguer Mobile Safari (iPhone ou iPad)

Développer des pages Web pour les appareils mobiles ou déboguer votre application hybride est souvent difficile. Mais heureusement pour les personnes qui conçoivent sur iOS, en commençant par iOS 6, Apple propose une fonction d'inspecteur Web à distance dans iOS.

Web Inspector permet aux développeurs d'applications Web et mobiles d'utiliser macOS et OS X Safari Developer Tools pour déboguer à distance du contenu Web ou des applications hybrides dans Safari mobile sur iPad ou iPhone.

C'est un moyen simple et pratique de déboguer, d'optimiser et de modifier vos pages Web ou vos applications hybrides sur iOS.

Pour accéder à ces outils de développement, activez le menu Développer dans les préférences avancées de Safari de votre Mac.

Astuces rapides

Suivez ces conseils rapides pour faire fonctionner l'inspecteur Web afin de pouvoir déboguer votre site ou votre application pour Safari

• Réinitialisez vos paramètres de localisation et de confidentialité sur votre iPhone, iPad ou iPod touch. Aller à Paramètres > Général > Réinitialiser > Réinitialiser la localisation et la confidentialité
• Assurez-vous de vous connecter au même identifiant Apple sur l'ordinateur que votre iPhone, iPad ou iPod touch
• Activez la synchronisation Safari iCloud pour l'ordinateur et tout iPhone, iPad ou iPod touch
• Sur l'iPhone ou l'iPad, accédez à Paramètres > Safari > Avancé et activer Inspecteur Web
• Sur l'ordinateur, ouvrez Safari et accédez au Menu Safari > Préférences > Avancé et coche Afficher le menu Développer dans la barre de menus

Articles Liés

• Afficher le code source HTML de la page Web sur iPad ou iPhone. Aucune application requise !
• Comment afficher le code source HTML dans Safari
• Comment voir les favicons dans Safari pour iPhones et Mac

Ordinateur Mac requis

Désolé les utilisateurs de Windows, mais l'inspecteur Web de Safari n'est compatible qu'avec les Mac !

Utilisez le même identifiant Apple et la synchronisation iCloud !

Assurez-vous que votre iDevice et votre Mac sont connectés avec le même identifiant Apple et que vous activez Safari dans iCloud.

Pour votre iDevice: Paramètres > Profil d'identification Apple > iCloud > Safari > activé

Pour votre Mac: Menu Apple > Préférences Système > Identifiant Apple ou iCloud > Safari > Coché

Et vérifiez que Safari est également la même version

Assurez-vous que Safari sur votre Mac est la même version que Safari sur votre iDevice. Vous devrez peut-être mettre à jour votre version iOS ou votre version de Safari exécutée sur votre Mac.

Réinitialiser vos paramètres de localisation et de confidentialité

1. Aller à Paramètres > Général
2. Sélectionner Réinitialiser
3. Choisir de Réinitialiser l'emplacement et la confidentialité

Astuce Pro Keyboard ShortCut sur Mac pour les développeurs Web

Si vous appuyez sur CTRL+Commande+R dans Safari, vous pouvez voir à quoi ressemblerait un site Web sur un appareil particulier en sélectionnant l'appareil.

Utiliser Web Inspector pour déboguer Safari mobile

1. Sur votre iPad, iPhone ou iPod touch, touchez Paramètres > Safari > Avancé et activer Inspecteur Web. Et activez JavaScript s'il n'est pas déjà activé

2. Sur votre Mac, lancez Safari et accédez à Menu Safari > Préférences > Avancé puis vérifier "Afficher le menu Développer dans la barre de menus" si vous ne l'avez pas déjà fait

3. Connectez votre appareil iOS à votre Mac avec le câble USB. Ceci est essentiel: vous devez connecter les appareils manuellement, à l'aide d'un câble. Cela ne fonctionne pas via WiFi!

4. Maintenant, sur votre iPad, ouvrez le site Web que vous souhaitez déboguer, puis, sur votre Mac, ouvrez Safari et accédez au "Développer" menu. Vous voyez maintenant votre iDevice que vous avez connecté à votre Mac. Si aucune page n'est ouverte sur votre iDevice, un message indiquant « Aucune application inspectable » s'affiche.

5. Déboguez maintenant la page ouverte sur Safari mobile comme vous le feriez sur Mac, inspectez les éléments DOM, modifiez CSS, mesurez les performances de la page et exécutez des commandes Javascript.

Utilisez l'outil de débogage pour vous aider à trouver la cause de toute erreur JavaScript sur votre page Web. Vous pouvez ajouter des points d'arrêt, déboguer le javascript et inspecter la valeur des variables lors de l'exécution.

Safari devrait également détecter toute erreur CSS, HTML et JavaScript. Et vous verrez les détails de chaque erreur dans le débogueur.

iDevice ne s'affiche pas dans le menu Développement de Safari ?

•  Videz votre cache Safari et vos cookies
• Mettez à jour Safari sur votre Mac et iDevice si une mise à jour est disponible.
  • Si vous exécutez une version bêta iOS ou macOS, vous devrez peut-être exécuter la dernière version bêta sur tous les appareils
• Essayez un autre câble et/ou port sur votre Mac. Sois sûr que le câble est un véritable câble Lightning Apple ou certifié MFI (Made For iPhone)
• Vérifiez que Web Inspector est activé. Les mises à jour iOS rétablissent parfois le paramètre OFF par défaut. Alors assurez-vous simplement de vérifier Paramètres > Safari > Avancé > Inspecteur Web
  • Essayez de désactiver Web Inspector, attendez 10 secondes et réactivez-le
• Essayez plutôt le navigateur Safari Technology Preview
• Quittez Safari sur votre Mac et redémarrez-le. Voyez si Safari de votre Mac reconnaît ensuite votre appareil et autorise le débogage
• Vérifiez que vous n'utilisez pas le mode de navigation privée de Safari iSi votre iDevice n'apparaît que brièvement dans le menu Développer de Safari, puis disparaît
• Ouvrez Activity Monitor et vérifiez ce qui se passe avec Safari

Conseils aux lecteurs 

• Si vous utilisez un ancien iDevice avec iOS 6 ou une version antérieure, le navigateur Web Safari de votre appareil dispose de sa propre console de débogage intégrée! Accédez simplement à la console de débogage de Safari en allant sur Paramètres > Safari > Développeur > Console de débogage