Au cas où vous ne le sauriez pas, une page Web est composée d’une multitude 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 autonome.

Les utilisateurs Windows et Mac connaissent bien l’option « Inspecter » ou « Inspecter l’élément » qui est disponible lors d’un clic droit sur n’importe quelle page Web. Cette option offre un moyen d’afficher 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 ses Javascript, HTML, CSS et tous les autres fichiers multimédias qui s’y trouvent. De cette façon, non seulement vous apprenez comment fonctionne et fonctionne un site Web particulier, mais vous y apportez des modifications sur votre propre navigateur sans que cela n’affecte la page Web elle-même.

Bien que l’option inspect soit connue pour être un outil de « 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 êtes impatient d’utiliser l’option inspecter l’élément lorsque vous naviguez sur le Web sur un iPhone, cet article devrait vous aider à trouver un moyen de le faire.

En rapport: Comment inspecter un élément sur Android

Pouvez-vous inspecter des éléments Web directement sur Safari ?

La réponse simple est non. Safari sur iOS, comme de nombreux autres navigateurs mobiles, ne vous offre pas d’outil d’inspection natif pour visualiser le développement d’une page Web. Apple ne fournit pas de raison pour laquelle il n’y a pas une telle option, mais nous pensons que cela a à voir avec la façon dont les petits écrans sont sur les smartphones. Une taille d’affichage plus petite peut compliquer la navigation des utilisateurs dans les cases en cours d’inspection, car vous devrez peut-être placer soigneusement le curseur lorsque vous souhaitez modifier le code d’une page Web ou même en localiser un.

Une autre raison à cela pourrait être le manque de puissance de calcul sur les smartphones. Bien que les iPhones modernes aient suffisamment de puissance pour exécuter des jeux gourmands en graphiques, il peut être difficile d’afficher les informations de la page d’un site Web, car tous les sites Web ne sont pas créés de la même manière. Certains sites Web peuvent avoir beaucoup de ressources et de couches qui sont soigneusement conçues pour le rendre transparent, mais les mêmes ressources peuvent prendre un certain temps à charger une fois inspectées.

En rapport: Boucler une vidéo sur iPhone [Guide]

Inspecter Element sur iPhone : quelles autres options avez-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 #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 le 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 de « développement ». Bien que le processus de débogage d’un site soit relativement simple, sa configuration initiale peut être plus longue que ce à quoi vous pouvez vous attendre. Mais ne vous inquiétez pas, nous 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 Web Inspector 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 la bascule adjacente à « Web Inspector » jusqu’à ce qu’elle devienne verte.

Configuration initiale sur Mac

Une fois que vous avez activé avec succès Web Inspector pour Safari sur iOS, il est maintenant temps de procéder à 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 menu ».

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 l’avez fait tout à l’heure, cliquez sur l’option « Connexion via le réseau » lorsque le menu de l’iPhone s’ouvre.

Maintenant, 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 d’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. Il vous suffit de 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, passez à votre Mac et ouvrez l’application Safari là-bas. Ici, cliquez sur « Développer » dans la barre de menu et accédez à « iPhone ».

Lorsque vous survolez votre « iPhone », vous devriez voir une liste de pages Web ouvertes sur iOS. Cliquez sur la page Web que vous souhaitez inspecter à partir de cette liste.

Une nouvelle fenêtre se chargera sur le Mac et affichera toutes les informations pouvant être inspectées à partir de la page Web sélectionnée.

A tout moment lors 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 le Mac est ce qui constitue l’élément mis en surbrillance pour cette page Web particulière. Se déplacer entre différentes lignes de code déplacera cette surbrillance bleue à travers différentes parties de la page sur votre iPhone en temps réel.

En rapport: 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 à partir de votre iPhone, vous serez heureux de savoir que l’application iOS Shortcuts est destinée à 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’y a pas de raccourci unique qui offre un débogage Web à part entière sur iOS, vous devrez donc ajouter un raccourci pour chacun de ces objectifs.

Nous avons trouvé les raccourcis suivants que vous pouvez utiliser pour effectuer le débogage sur des sites Web directement à partir d’iOS. Ceux-ci sont:

Voir la source – Ce raccourci vous permet d’afficher le code source d’une page Web au format de base bones.

Modifier la page Web – Ce raccourci vous permet de modifier le contenu d’une page Web localement afin que vous puissiez tester un nouveau design ou un nouveau format et à quoi il peut ressembler sur votre iPhone.

Obtenir des images à partir de la page – L’une des principales raisons d’inspecter une page peut être de regarder des images ou d’enregistrer celles qui sont autrement non 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 afficher chacune des 24 images hébergées sur la page Web sélectionnée.

Machine de retour – 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 façon 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.

Les raccourcis que vous avez tous apparaîtront dans l’écran Mes raccourcis > Tous les raccourcis et ils 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 de partage 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, vous serez invité à indiquer si vous souhaitez que le raccourci accède à la page Web. Ici, appuyez sur « Autoriser une fois ».

En rapport: Comment ajouter WidgetSmith à l’écran d’accueil

Méthode #03 : Utilisation d’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 aucun 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.

Bien qu’une simple recherche sur l’App Store vous donne 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 Inspecter le navigateur ou Navigateur d’équipement des applications de l’App Store, qui fournissent une inspection et une édition d’éléments sur JavaScript, CSS et HTML.

C’est tout ce que vous devez savoir sur l’inspection d’éléments sur un iPhone.

EN RELATION