Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

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 ».

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

Dans Safari, faites défiler vers le bas et appuyez sur « Avancé ». 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

Sur l'écran suivant, appuyez sur le bouton à côté de « Web Inspector » jusqu'à ce qu'il devienne vert. 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

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 ». 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

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 ». 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

Vous devriez maintenant voir l'option « Développer » apparaître dans la barre de menu en haut. 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

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. 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

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. 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

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 ». 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

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. 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

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. 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

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.

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

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. 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

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. 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

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. 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

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. 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

Dans les résultats de la recherche, appuyez sur le raccourci que vous souhaitez ajouter à l'iPhone. 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

Lorsqu'un écran d'aperçu s'ouvre, appuyez sur l'option « Ajouter un widget » en bas. 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

Vos raccourcis apparaîtront tous dans l'écran Mes raccourcis > Tous les raccourcis et seront également accessibles dans la feuille de partage de Safari.  

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

Pour inspecter une page Web, ouvrez-la sur Safari et appuyez sur le bouton « Partager » en bas. 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

Dans la feuille Partager qui apparaît, faites défiler vers le bas et recherchez les raccourcis que vous avez ajoutés à votre iPhone. 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

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 ». 

Comment inspecter un élément sur iPhone : tout ce que vous devez savoir

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



Résoudre lerreur «Le fichier iTunes Library.itl est verrouillé» dans iTunes

Résoudre lerreur «Le fichier iTunes Library.itl est verrouillé» dans iTunes

Résolvez une erreur Apple iTunes indiquant que le fichier iTunes Library.itl est verrouillé, sur un disque verrouillé ou que vous n'avez pas l'autorisation d'écriture pour ce fichier.

Créez des coins arrondis avec Paint.NET

Créez des coins arrondis avec Paint.NET

Comment créer des photos d'apparence moderne en ajoutant des coins arrondis dans Paint.NET

iTunes : comment mélanger ou répéter de la musique

iTunes : comment mélanger ou répéter de la musique

Vous ne savez pas comment répéter une chanson ou une liste de lecture dans Apple iTunes ? Nous ne pouvions pas non plus au début. Voici quelques instructions détaillées sur la façon de procéder.

Tout ce que vous devez savoir sur WhatsApp Supprimer pour moi

Tout ce que vous devez savoir sur WhatsApp Supprimer pour moi

Avez-vous utilisé Supprimer pour moi sur WhatsApp pour supprimer les messages de tout le monde ? Pas de soucis! Lisez ceci pour apprendre à annuler la suppression pour moi sur WhatsApp.

Désactiver les notifications contextuelles AVG

Désactiver les notifications contextuelles AVG

Comment désactiver les notifications AVG ennuyeuses qui apparaissent dans le coin inférieur droit de l'écran.

Comment supprimer votre compte Instagram

Comment supprimer votre compte Instagram

Lorsque vous décidez que vous en avez terminé avec votre compte Instagram et que vous souhaitez vous en débarrasser. Voici un guide qui vous aidera à supprimer votre compte Instagram temporairement ou définitivement.

Comment configurer votre flux dans OBS pour la première fois [2023]

Comment configurer votre flux dans OBS pour la première fois [2023]

OBS est le premier choix de nombreux créateurs de contenu lors de la diffusion sur des plateformes populaires telles que Twitch, YouTube ou Discord. Il vous permet de créer différentes scènes, de capturer différentes sources et même de survoler…

Comment utiliser lapplication Intel Unison sur Windows 11 pour connecter et synchroniser votre iPhone

Comment utiliser lapplication Intel Unison sur Windows 11 pour connecter et synchroniser votre iPhone

Intel Unison est une application fantastique qui vous permet de connecter votre iPhone à un ordinateur Windows 11. Grâce à lui, vous pouvez accéder aux notifications, aux messages texte, aux photos et bien plus encore de votre téléphone, directement depuis votre…

Les équipes Microsoft naffichent pas dimages ? Comment réparer

Les équipes Microsoft naffichent pas dimages ? Comment réparer

Microsoft Teams a été récemment à l'avant-garde des services proposant des vidéoconférences et une collaboration à distance. Bien qu’il ne soit pas le plus convivial, le service a été un succès pour l’organisation…

Les contacts ne se synchronisent pas avec Apple Watch ? Comment réparer

Les contacts ne se synchronisent pas avec Apple Watch ? Comment réparer

Une Apple Watch permet d'appeler et d'envoyer facilement des messages à quelqu'un directement depuis votre poignet, mais s'il manque des contacts sur votre montre, vous pouvez être confronté à plusieurs problèmes. Cela pourrait être assez ennuyeux…