Vous avez besoin de déboguer un site web sur votre iPhone, mais vous ne trouvez pas la fonction « Inspecteur » ? Bien que cette fonctionnalité courante de navigateur ne soit pas intégrée à Safari sur votre iPhone, il existe des moyens d'inspecter les éléments d'un site web sans avoir à acheter une application. La méthode officielle consiste à utiliser les outils de développement Safari qui nécessitent que vous connectiez votre iPhone à un Mac. Si vous n'avez pas d’ordinateur près de vous, vous pouvez installer une application gratuite appelée Inspecteur web ou créer un signet JavaScript (qui fonctionne également sur Chrome). Si vous ne déboguez pas une application web et que vous souhaitez simplement modifier l'apparence d'un site web, vous pouvez utiliser un raccourci iPhone appelé Éditer la page web.
L'essentiel en quelques mots
- Utilisez les outils de développement Safari pour inspecter les éléments en connectant votre iPhone à votre Mac.
- Pour inspecter un élément sans ordinateur, installez l'application Inspecteur web ou utilisez un signet JavaScript.
- Pour éditer du texte ou supprimer des images d'un site web, essayez le raccourci Éditer la page web dans l'application Raccourcis .
Étapes
-
Connectez votre iPhone à votre Mac avec un câble USB. Si vous souhaitez utiliser la fonction Inspecteur d'éléments dans Safari sur votre iPhone sans outil tiers, vous pouvez le faire à l'aide des Outils de développement de Safari. Le seul inconvénient est que les outils de développement ne sont disponibles que sur macOS, vous devez donc être à proximité de votre ordinateur pour utiliser cette méthode.
- Vous devrez utiliser un câble USB , car la connexion Wifi ne permet pas d'inspecter un élément.
-
Activez l'inspecteur Web sur votre iPhone. Ci-dessous, comment procéder.
- Ouvrez les Réglages de votre iPhone.
- Faites défiler vers le bas et appuyez sur Safari .
- Faites défiler vers le bas et appuyez sur Avancé .
- Appuyez sur l'interrupteur Inspecteur web pour l'activer (il deviendra vert).
-
Activez le menu Développement dans Safari sur votre Mac. Si vous voyez déjà un menu Développement lorsque Safari est ouvert sur votre Mac, vous pouvez sauter cette étape. Si ce n'est pas le cas, vous devrez d’abord l'activer.
- Cliquez sur le menu Safari .
- Sélectionnez Réglages .
- Cliquez sur Avancé .
- Sélectionnez Afficher le menu Développement dans la barre des menus [1] X Source de recherche .
-
Allez sur le site web que vous voulez inspecter. Utilisez Safari sur votre iPhone pour ouvrir le site sur lequel vous souhaitez utiliser l’inspecteur d’élément.
-
Sur votre Mac, cliquez sur le menu Développement . Vous verrez votre iPhone dans la liste.
-
Passez votre souris sur votre iPhone puis sélectionnez le site web. Cela ouvrira le panneau Inspecter l'élément sur votre Mac pour le site ouvert sur votre iPhone.
- Lorsque vous sélectionnez des éléments dans l'onglet Éléments sur votre Mac, l'élément sélectionné apparaitra en surbrillance sur votre iPhone [2] X Source de recherche .
- Si vous voulez continuer à utiliser Inspecteur élément sans laisser votre iPhone branché sur votre Mac, cliquez à nouveau sur le menu Développement et sélectionnez Connecter via le réseau .
Publicité
-
Installez l'inspecteur web à partir de l'App Store. Cette extension Safari gratuite pour iPhone et iPad permet d'inspecter des éléments sans ordinateur. Recherchez dans l'App Store Inspecteur web par « And a Dinosaur », ou téléchargez directement sur https://apps.apple.com/us/app/web-inspector/id1584825745 .
- L'inspecteur web est utile pour inspecter des éléments dans Safari puisqu’il n'est pas nécessaire de connecter l'iPhone à un Mac. Si vous souhaitez déboguer dans Chrome, vous devrez utiliser un signet JavaScript à la place.
- Bien que cette extension porte le même nom que « l'inspecteur Web » de Safari, il ne s'agit pas d'un outil officiel d'Apple.
-
Activez l'extension Inspecteur web dans Safari. Suivez les étapes ci-dessous.
- Ouvrez Safari et allez sur n'importe quel site web.
- Appuyez sur Aa dans la barre d'adresse.
- Sélectionnez Gérer les extensions [3] X Source de recherche .
- Appuyez sur l’interrupteur à côté de « Inspecteur web » pour l'activer.
- Appuyez sur Terminé .
-
Allez sur la page web que vous souhaitez inspecter. Maintenant que vous avez activé l'inspecteur web, vous pouvez inspecter un élément directement depuis Safari.
-
Donnez à l'inspecteur web l'accès au site web. Pour ce faire, appuyez à nouveau sur Aa puis sélectionnez Inspecteur Web .
- Pour permettre à l'inspecteur web d'inspecter les éléments de ce site web uniquement pour une journée, sélectionnez Autoriser pour un jour .
- Si vous souhaitez utiliser l'inspecteur de sites web pendant plus d'une journée ou pour plusieurs sites web, sélectionnez Toujours autoriser
. Ensuite, vous pourrez choisir Toujours autoriser sur ce site web
ou Toujours autoriser sur tous les sites web
.
- Si vous choisissez cette dernière option, vous n'aurez plus à autoriser l'inspecteur web à accéder à des sites web à l’avenir.
-
Appuyez à nouveau sur Aa puis sélectionnez Inspecteur web . Cela permet d'étendre l'outil Inspecter l'élément au bas de Safari.
- Lorsque vous avez fini, appuyez deux fois sur Aa pour fermer l'inspecteur web.
Publicité
-
1Allez sur le site web que vous voulez inspecter. Cette astuce consiste à créer un signet qui contient une chaine de code JavaScript permettant d'afficher l’inspecteur d’élément dans n'importe quel navigateur web de l'iPhone. Cette astuce fonctionne également dans Safari et Chrome, bien que le processus de création du signet soit légèrement différent.
-
Créez un signet ou favori .
- Sur Chrome : appuyez sur le menu à trois points et sélectionnez Ajouter aux favoris .
- Sur Safari : appuyez sur l'icône de partage en bas, puis sur Ajouter aux signets .
-
Modifiez le signet pour remplacer l'URL. Maintenant que vous avez un signet, vous devez le modifier.
-
Ouvrez le signet pour le modifier.
- Sur Chrome : appuyez sur le menu à trois points et sélectionnez Favoris en haut. Appuyez longuement sur le nouveau favori, puis appuyez sur Modifier le favori .
- Sur Safari : appuyez sur l'icône en forme de livre ouvert en bas, puis sur Signet . Appuyez longuement sur le signet que vous venez de créer, puis appuyez sur Modifier .
-
Remplacez le contenu du signet par un code. Renommez le signet « Inspecteur », collez tel quel le code ci-dessous dans le champ URL ou Lien , puis enregistrez le signet.
javascript : ( function () { var script = document . createElement ( 'script' ); script . src = "//cdn.jsdelivr.net/npm/eruda" ; document . body . appendChild ( script ); script . onload = function () { eruda . init () } })();
-
Actualisez le site web et ouvrez le signet. Pour ouvrir le favori dans Chrome, il suffit d'appuyer sur les trois points, de sélectionner Favoris puis d'appuyer sur Inspecteur . Dans Safari, vous trouverez le signet Inspecteur dans vos signets. Après quelques secondes, vous verrez apparaitre une icône en forme de roue crantée sur la page que vous souhaitez inspecter.
-
Appuyez sur la roue crantée pour ouvrir Inspecteur d'élément. Vous pouvez maintenant utiliser l'onglet Éléments en haut du panneau pour inspecter les éléments de la page actuellement ouverte.Publicité
-
Ouvrez l'application Raccourcis sur votre iPhone. Si votre objectif est de modifier l'apparence d'un site web avec l'option Inspecteur d'élément, vous pouvez obtenir le même effet en utilisant le raccourci iPhone appelé Éditer la page web . Bien que ce Raccourci ne fasse pas apparaitre l'écran traditionnel Inspecteur d'élément , vous pourrez apporter des modifications à n'importe quel site web pour voir ce que ça donne.
- Vous trouverez l’application Raccourcis dans votre bibliothèque d'applications.
- Cette fonction est utile si vous souhaitez modifier du texte ou supprimer des images et d'autres objets d'un site web que vous consultez.
-
Appuyez sur Galerie . Vous la trouverez dans le coin inférieur droit de la page.
-
Recherchez le raccourci Éditer la page web . Tapez éditer la page web dans la barre de recherche, puis appuyez sur Éditer la page web en haut des résultats de la recherche.
-
Appuyez sur Ajouter un raccourci . Il s’agit du bouton bleu en bas de la page.
-
Autoriser des scripts dans l'application Raccourcis. Vous devez modifier les réglages de vos raccourcis pour permettre à la fonction Éditer la page web de fonctionner.
- Ouvrez les Réglages de votre iPhone.
- Défilez vers le bas et appuyez sur Raccourcis .
- Appuyez sur Avancé .
- Activez l'option Autoriser l'exécution des scripts .
-
Ouvrez le site web à inspecter dans l'application Safari. Il peut s'agir de n'importe quel site web que vous voulez modifier.
-
Appuyez sur l'icône de partage puis sur Éditer la page web . L'icône de partage est le carré bleu avec une flèche vers le haut en bas de l'écran.
-
Appuyez sur Autoriser . Cela permet au raccourci de « modifier » le site dans la fenêtre de votre navigateur.
-
Appuyez sur X pour fermer le menu. Vous serez redirigé(e) sur le site web, que vous pouvez maintenant modifier visuellement.
- Appuyez sur n'importe quel élément pour le modifier. Maintenant, vous pourrez modifier le texte et les images sur le site web sans disposer d'une fonction officielle Inspecteur d'élément intégrée à Safari.
Publicité
Conseils
- Il existe également plusieurs applications payantes qui permettent d'inspecter des éléments web sur iPhone, notamment Achoo HTML Viewer & Inspector et Inspect Browser.
- Adobe Edge Inspect était un outil populaire pour inspecter les éléments des sites web, mais il n'est plus en développement et ne reçoit plus de mises à jour [4] X Source de recherche .
Références
- ↑ https://support.apple.com/guide/safari/use-the-developer-tools-in-the-develop-menu-sfri20948/mac
- ↑ https://support.apple.com/guide/safari-developer/inspecting-overview-dev1a8227029/mac
- ↑ https://support.apple.com/guide/iphone/get-extensions-iphab0432bf6/ios
- ↑ https://helpx.adobe.com/edge-inspect/system-requirements.html