Ce qu'il faut savoir
- Activer Web Inspector sur iOS: Accédez à Settings > Safari > Advanced et déplacez-vous l'interrupteur à bascule Web Inspector sur la position On.
- Utiliser Web Inspector sur macOS: connectez votre appareil iOS à un Mac et choisissez l'URL à inspecter dans le menu Develop.
Si vous rencontrez un bogue ou un autre problème avec un site Web sur Safari mobile, utilisez l'outil Web Inspector pour enquêter. Cet article explique comment utiliser la console Safari pour iPhone pour déboguer les erreurs à l'aide de votre ordinateur Mac. Les instructions s'appliquent aux iPhones avec iOS 14, iOS 12 ou iOS 11, ainsi qu'aux Mac avec macOS Big Sur (11.0), macOS Catalina (10.15) ou macOS Mojave (10.14).
Activer Web Inspector sur votre iPhone ou autre appareil iOS
L'inspecteur Web est désactivé par défaut car la plupart des utilisateurs d'iPhone n'en ont aucune utilité. Cependant, si vous êtes un développeur ou si vous êtes curieux, vous pouvez l'activer en quelques étapes courtes. Voici comment:
-
Ouvrez le menu iPhone Paramètres.
Sur un iPhone avec une première version d'iOS, accédez à la console de débogage via Settings > Safari > Developer > Debug Console Lorsque Safari sur iPhone détecte des erreurs CSS, HTML et JavaScript, les détails de chaque affichage dans le débogueur.
- Faites défiler vers le bas et appuyez sur Safari pour ouvrir l'écran qui contient tout ce qui concerne le navigateur Web Safari sur votre iPhone, iPad ou iPod touch.
-
Faites défiler vers le bas de la page et sélectionnez Avancé.
-
Déplacez le Web Inspector sur la position On.
Image
Connectez votre appareil iOS à Safari sur un Mac
Pour utiliser Web Inspector, connectez votre iPhone ou un autre appareil iOS à un Mac doté du navigateur Web Safari et activez le menu Développer.
-
Avec Safari ouvert, sélectionnez Safari dans la barre de menu et choisissez Préférences.
Image -
Sélectionnez l'onglet Avancé.
Image -
Sélectionnez la case à cocher Afficher le menu Développer dans la barre de menus et fermez la fenêtre des paramètres.
Image -
Dans la barre de menus Safari, sélectionnez Develop et choisissez le nom de votre appareil iOS connecté, puis sélectionnez l'URL qui apparaît sous Safaripour ouvrir la console de débogage de ce site.
Image Après avoir connecté votre appareil, utilisez votre Mac pour inspecter le site Web que vous souhaitez déboguer et ouvrez-le dans le navigateur mobile Safari.
Qu'est-ce que Web Inspector ?
Les développeurs Web utilisent Web Inspector pour modifier, déboguer et optimiser les sites Web sur les appareils Mac et iOS. Avec Web Inspector ouvert, les développeurs peuvent inspecter les ressources d'une page Web. La fenêtre Web Inspector contient du code HTML modifiable et des notes concernant les styles et les calques de la page Web dans un panneau séparé.
Avant iOS 6, le navigateur Web Safari de l'iPhone comportait une console de débogage intégrée que les développeurs utilisaient pour détecter les défauts des pages Web. Les versions récentes d'iOS utilisent à la place Web Inspector.
Avec Safari 9 et OS X Mavericks (10.9), Apple a introduit le mode de conception réactif dans Web Inspector. Les développeurs utilisent ce simulateur intégré pour prévisualiser la façon dont les pages Web s'adaptent à différentes tailles d'écran, résolutions et orientations.
