Développer des pages Web pour les appareils mobiles ou déboguer votre application hybride est souvent difficile. Mais heureusement pour les gens qui conçoivent sur iOS, à partir du début d'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 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.
Suivez ces conseils rapides pour que l'inspecteur Web fonctionne afin que vous puissiez 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. Accédez à Paramètres> Général> Réinitialiser> Réinitialiser la position 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 basculez sur Web Inspector
- Sur l'ordinateur, ouvrez Safari et accédez au menu Safari> Préférences> Avancé et cochez Afficher le menu Développement dans la barre de menus
Ordinateur Mac requis
Désolé Windows, mais l'inspecteur Web de Safari n'est compatible qu'avec les Mac!
Utilisez le même identifiant Apple et iCloud Sync!
Assurez-vous que votre iDevice et votre Mac sont connectés avec le même identifiant Apple et que vous activez ON Safari dans iCloud.
Pour votre iDevice: Paramètres> Profil Apple ID> iCloud> Safari > activé ON
Pour votre Mac: Menu Apple> Préférences Système> Identifiant Apple ou iCloud> Safari> Coche
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éinitialisez vos paramètres de localisation et de confidentialité
- Allez dans Paramètres> Général
- Sélectionnez Réinitialiser
- Choisissez de réinitialiser l'emplacement et la confidentialité
Astuce de raccourci clavier Pro 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.
Utilisez Web Inspector pour déboguer Safari mobile
1. Sur votre iPad, iPhone ou iPod touch, appuyez sur Paramètres> Safari> Avancé et basculez sur Web Inspector. Et activez JavaScript s'il n'est pas déjà activé
2. Sur votre Mac, lancez Safari et allez dans le menu Safari> Préférences> Avancé puis cochez « Afficher le menu Développer dans la barre de menu » 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 le WiFi!
4. Maintenant, sur votre iPad, ouvrez le site Web que vous souhaitez déboguer, puis, sur votre Mac, ouvrez Safari et allez dans le menu « Développer ». 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 pour déboguer sur Mac, inspectez les éléments DOM, modifiez CSS, mesurez les performances de la page et exécutez les commandes Javascript.
Utilisez l'outil de débogage pour vous aider à trouver la cause des erreurs 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 toutes les erreurs CSS, HTML et JavaScript. Et vous verrez les détails de chaque erreur dans le débogueur.
iDevice n'apparaît pas dans le menu de développement dans Safari?
- Videz votre cache Safari et vos cookies
- Mettre à 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. Assurez-vous 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 basculent parfois ce paramètre sur le paramètre OFF par défaut. Assurez-vous donc 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. Vérifiez si Safari sur votre Mac reconnaît alors votre appareil et autorise le débogage
- Vérifiez que vous n'utilisez pas le mode de navigation privée de Safari si votre iDevice n'apparaît que brièvement dans le menu Développement 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 appareil avec iOS 6 ou une version antérieure, le navigateur Web Safari de votre appareil possède sa propre console de débogage intégrée! Accédez simplement à la console de débogage de Safari en accédant à Paramètres > Safari > Développeur > Console de débogage
