Au cas où vous ne le sauriez pas, une page Web est composée d'un grand nombre d'éléments formatés pour apparaître comme une seule entité. Les développeurs Web doivent comprendre chacun de ces éléments, comment ils sont présentés sur une page Web et voir comment chacun d'eux fonctionne de manière indépendante.
Les utilisateurs Windows et Mac connaissent l'option « Inspecter » ou « Inspecter l'élément » disponible en cliquant avec le bouton droit sur n'importe quelle page Web. Cette option offre un moyen de visualiser le code source d'un site Web, de voir tous ses éléments, la ligne de code derrière chacun d'eux, et de modifier son Javascript, HTML, CSS et tous les autres fichiers multimédias qui s'y trouvent. De cette façon, vous apprenez non seulement comment fonctionne un site Web particulier, mais vous y apportez des modifications sur votre propre navigateur sans que cela n'affecte la page Web réelle.
Bien que l’option inspect soit connue pour être un outil « développeur », ce ne sont pas seulement les développeurs qui en bénéficient. Même les débutants et les non-développeurs peuvent utiliser cet outil pour apprendre comment un site Web est construit et comment chacun de ses éléments fonctionne collectivement. Si vous avez hâte d'utiliser l'option d'inspection des éléments lorsque vous naviguez sur le Web sur un iPhone, cet article devrait vous aider à trouver un moyen de le faire.
Connexe : Comment inspecter un élément sur Android
Pouvez-vous inspecter les éléments Web directement sur Safari ?
La réponse simple est non. Safari sur iOS, comme beaucoup d'autres navigateurs mobiles, ne vous propose pas d'outil d'inspection natif pour visualiser le développement d'une page Web. Apple ne fournit pas d'explication pour laquelle une telle option n'existe pas, mais nous pensons que cela est lié à la taille des écrans des smartphones. Une taille d'affichage plus petite peut rendre plus difficile pour les utilisateurs de naviguer dans les cases en cours d'inspection, car vous devrez peut-être placer le curseur avec précaution lorsque vous souhaitez modifier le code d'une page Web ou même en localiser une.
Une autre raison à cela pourrait être le manque de puissance de calcul des smartphones. Bien que les iPhones modernes disposent de suffisamment de puissance pour exécuter des jeux à forte intensité graphique, il peut être difficile d'afficher les informations des pages d'un site Web, car tous les sites Web ne sont pas créés de la même manière. Certains sites Web peuvent contenir de nombreuses ressources et couches soigneusement conçues pour leur donner une apparence transparente, mais ces mêmes ressources peuvent prendre un certain temps à se charger lorsqu'elles sont inspectées.
Connexe : Boucler une vidéo sur iPhone [Guide]
Inspecter Element sur iPhone : de quelles autres options disposez-vous ?
Bien que vous ne puissiez pas utiliser nativement l'outil « Inspecter l'élément » sur l'application Safari sur iOS, il existe toujours des moyens de contourner cette limitation. Vous trouverez ci-dessous trois façons d'inspecter les éléments des pages Web que vous visitez sur Safari sur votre iPhone.
Méthode n°01 : utiliser Safari sur votre Mac
Si vous possédez un appareil macOS en plus de votre iPhone, vous pouvez toujours inspecter les pages Web directement depuis l'application Safari, mais sur Mac. Apple vous permet de déboguer les pages Web de Safari sur iOS comme vous le feriez sur Mac à l'aide de ses outils « Développer ». Bien que le processus de débogage d’un site soit relativement simple, sa configuration initiale peut être plus longue que ce à quoi vous pourriez vous attendre. Mais ne vous inquiétez pas, nous vous expliquerons le processus de configuration de la manière la plus simple possible et vous aiderons à inspecter facilement les pages après la première fois.
Activer l'inspecteur Web sur iOS
Pour pouvoir déboguer des éléments Web, vous devez d'abord activer Web Inspector pour l'application Safari sur iOS. Pour ce faire, ouvrez l'application Paramètres et sélectionnez « Safari ».
Dans Safari, faites défiler vers le bas et appuyez sur « Avancé ».
Sur l'écran suivant, appuyez sur le bouton à côté de « Web Inspector » jusqu'à ce qu'il devienne vert.
Configuration initiale sur Mac
Une fois que vous avez activé avec succès Web Inspector pour Safari sur iOS, il est maintenant temps d'effectuer la configuration sur votre Mac. Sur Mac, ouvrez l'application Safari, cliquez sur l'option « Safari » dans la barre de menu et sélectionnez « Préférences ».
Dans la fenêtre qui apparaît, sélectionnez l'onglet « Avancé » en haut et cochez la case « Afficher le menu Développement dans la barre de menus ».
Vous devriez maintenant voir l'option « Développer » apparaître dans la barre de menu en haut.
Maintenant, à l’aide du câble USB fourni avec votre iPhone, établissez une connexion entre l’iPhone et le Mac. Lorsque votre iPhone est connecté au Mac, vous pouvez cliquer sur « Développer » dans la barre de menu et voir si votre iPhone apparaît dans la liste des appareils. Si oui, cliquez sur le nom de l'appareil dans cette liste.
Pour vous assurer que vous pouvez inspecter les pages Web sans fil sans avoir besoin d'un câble USB comme vous venez de le faire, cliquez sur l'option « Se connecter via le réseau » lorsque le menu de l'iPhone s'ouvre.
Désormais, vous pouvez déconnecter votre iPhone du Mac et vous pourrez toujours inspecter les pages Web sans connecter de câble entre elles.
Inspecter les pages Web depuis iOS sur un Mac
Maintenant que vous avez activé « Se connecter via le réseau » dans le menu « Développer », vous pouvez inspecter les pages Web de Safari sur iOS directement sur votre Mac. Vous devez simplement vous assurer que l'iPhone et le Mac sont connectés au même réseau sans fil pour pouvoir déboguer les pages Web sans fil.
Pour cela, ouvrez l'application Safari sur votre iPhone et accédez à la page Web que vous souhaitez inspecter.
Avec votre iPhone déverrouillé et la page Web sélectionnée ouverte, accédez à votre Mac et ouvrez-y l'application Safari. Ici, cliquez sur « Développer » dans la barre de menu et accédez à « iPhone ».
Lorsque vous survolez votre « iPhone », vous devriez voir une liste des pages Web ouvertes sur iOS. Cliquez sur la page Web que vous souhaitez inspecter dans cette liste.
Une nouvelle fenêtre se chargera sur le Mac affichant toutes les informations pouvant être inspectées à partir de la page Web sélectionnée.
A tout moment de votre inspection, vous pourrez voir vers quelle partie de la page pointe une ligne de code en recherchant une zone bleue sur votre iPhone.
Cette zone bleue indique que le code sur lequel vous survolez sur Mac constitue l'élément en surbrillance pour cette page Web particulière. Se déplacer entre différentes lignes de code déplacera cette surbrillance bleue sur différentes parties de la page de votre iPhone en temps réel.
Connexes : Comment conserver les effets dans FaceTime
Méthode n°02 : utiliser des raccourcis sur iOS
Si vous ne possédez pas de Mac ou si vous souhaitez avoir un aperçu d'un site Web directement depuis votre iPhone, vous serez heureux de savoir qu'il existe une application de raccourcis iOS pour cela. L'application Raccourcis sur iOS propose un ensemble de sélections prédéfinies qui vous permettent d'afficher le code source d'une page, de modifier une page Web, de récupérer des images d'un site Web et de rechercher des versions plus anciennes d'une page Web à partir de l'application Safari. Malheureusement, il n'existe pas de raccourci unique offrant un débogage Web complet sur iOS, vous devrez donc ajouter un raccourci pour chacune de ces fins.
Nous avons trouvé les raccourcis suivants que vous pouvez utiliser pour effectuer le débogage sur des sites Web directement depuis iOS. Ceux-ci sont:
Afficher la source – Ce raccourci vous permet d'afficher le code source d'une page Web au format base bones.
Modifier la page Web – Ce raccourci vous permet de modifier le contenu d'une page Web localement afin que vous puissiez tester une nouvelle conception ou un nouveau format et à quoi il pourrait ressembler sur votre iPhone.
Obtenir des images à partir d'une page – Une raison principale pour inspecter une page peut être de regarder des images ou de sauvegarder celles qui autrement ne seraient pas interactives. Ce raccourci récupère toutes les images d'une certaine page Web, puis les prévisualise collectivement. Comme l'indique la capture d'écran ci-dessous, vous pouvez voir chacune des 24 images hébergées sur la page Web sélectionnée.
Wayback Machine – Ce raccourci vous amène à la Wayback Machine d'une page Web où vous pouvez voir ses versions précédentes qui restent enregistrées sur Internet Archive.
Selon la manière dont vous souhaitez inspecter les pages Web sur iOS, vous pouvez ajouter l'un de ces raccourcis à votre iPhone en cliquant sur les liens pertinents ci-dessus ou en les recherchant dans Raccourcis > Galerie.
Dans les résultats de la recherche, appuyez sur le raccourci que vous souhaitez ajouter à l'iPhone.
Lorsqu'un écran d'aperçu s'ouvre, appuyez sur l'option « Ajouter un widget » en bas.
Vos raccourcis apparaîtront tous dans l'écran Mes raccourcis > Tous les raccourcis et seront également accessibles dans la feuille de partage de Safari.
Pour inspecter une page Web, ouvrez-la sur Safari et appuyez sur le bouton « Partager » en bas.
Dans la feuille Partager qui apparaît, faites défiler vers le bas et recherchez les raccourcis que vous avez ajoutés à votre iPhone.
La sélection de « Modifier la page Web » vous permettra directement de modifier des parties de la page Web. Lorsque vous sélectionnez l'une des trois autres options, il vous sera demandé si vous souhaitez que le raccourci accède à la page Web. Ici, appuyez sur « Autoriser une fois ».
Connexe : Comment ajouter WidgetSmith à l'écran d'accueil
Méthode n°03 : Utiliser des applications tierces
Si vous n'êtes pas satisfait des résultats ci-dessus, vous devrez explorer des applications tierces pour pouvoir inspecter les éléments d'une page Web. Semblable à Safari, vous ne trouverez pas de moyen d'inspecter une page Web dans les navigateurs Web les plus populaires (Chrome, Firefox, Brave, etc.). Au lieu de cela, vous devrez vous fier à une application créée pour effectuer cette tâche spécifique et des applications comme celles-ci peuvent être difficiles à trouver.
Même si une simple recherche sur l'App Store vous donnera plusieurs résultats pour l'inspection des éléments Web, vous ne trouverez pas beaucoup d'applications disponibles gratuitement et bien notées. Sur la base des commentaires des utilisateurs, nous vous recommandons d'installer les applications Inspect Browser ou Gear Browser à partir de l'App Store, qui permettent l'inspection et la modification des éléments sur JavaScript, CSS et HTML.
C'est tout ce que vous devez savoir sur l'inspection des éléments sur un iPhone.
EN RAPPORT