MacOS : Activer l inspecteur Web dans Safari

Si vous souhaitez afficher le code source d'une page web dans Safari d'Apple pour macOS Sierra, vous devez activer l'outil Inspecteur Web Safari en utilisant les méthodes suivantes.

Les développeurs de navigateurs web tels qu'Apple, Google, etc., fournissent un outil prêt à l'emploi pour voir les codes sous-jacents. Les développeurs l'utilisent principalement pour déboguer et visualiser les changements effectués sur un site Web en direct sans perturber le code réel sur le serveur. Cependant, cet outil est devenu populaire parmi les créateurs de contenu et les utilisateurs avertis d'Internet qui souhaitent modifier un site Web en direct pour des raisons personnelles ou professionnelles. Si vous êtes l'un de ceux-ci, lisez l'article jusqu'à la fin pour tout savoir sur l'inspecteur Web Safari et comment inspecter un élément.

Contenu

• 1 Qu'est-ce que l'Inspecteur Web Safari ?
• 2 Comment activer l'inspecteur Web Safari dans Safari 10 et supérieur
• 3 Comment utiliser l'inspecteur Web Safari sur macOS
• 4 Comment ouvrir l'inspecteur Web Safari dans les anciennes versions de macOS
  • 4.1 Inspecteur Web Safari : Les Derniers Mots

Qu'est-ce que l'Inspecteur Web Safari ?

L'Inspecteur Web fait partie de la suite d'outils de développement qu'Apple propose aux développeurs de sites Web et d'applications dans le monde entier. L'outil est disponible à la fois pour macOS et iOS. Les développeurs peuvent facilement modifier, optimiser et déboguer des sites Web pour obtenir des performances optimales pour leurs propriétés en ligne.

L'outil Inspecteur Web dans Safari regroupe la plupart des ressources des sites web sous une interface unifiée. L'outil sépare également les ressources et leurs paramètres dans des onglets dédiés afin que vous ne soyez pas submergé par tant de codes et d'options. L'Inspecteur Web vous donne aussi une vue chronologique de la mémoire du site, ce qui facilite le débogage de la mémoire. De plus, en tant que développeur, vous pouvez ajuster et optimiser plus de 150 propriétés CSS populaires dont vous avez besoin pour développer un site Web fonctionnel.

Dans l'outil Inspecteur Web, vous disposez des onglets suivants pour les ressources des sites web :

• Éléments
• Console
• Sources
• Réseau
• Chronologies
• Stockage
• Graphiques
• Couches
• Audit

Comment activer l'inspecteur Web Safari dans Safari 10 et supérieur

Par défaut, Apple Mac désactive l'inspecteur Web dans Safari. Cela vise à prévenir le désordre inutile sur l'interface utilisateur (UI) du navigateur web. Cependant, si vous êtes un développeur, un créateur de contenu ou un utilisateur Mac expérimenté, vous souhaiterez peut-être activer la fonctionnalité en suivant ces étapes :

• Ouvrez l'application Safari sur votre MacBook ou iMac.
• Assurez-vous d'avoir cliqué sur le navigateur pour obtenir l'icône Safari dans la barre d'outils Mac.

• Cliquez sur Safari dans le coin supérieur gauche et sélectionnez Préférences.
• Alternativement, vous pouvez utiliser le raccourci Command + , pour afficher le menu Préférences.
• Dans le menu Préférences, assurez-vous d'être sur l'onglet Général.

• Accédez à l'onglet Avancé.
• Juste en dessous de l'option Proxies, vous devriez voir la case à cocher pour Afficher le menu Développement dans la barre de menu. Cochez la case.

• Maintenant, le menu Développement de Safari apparaîtra dans la barre d'outils Mac.

Voici comment vous pouvez activer la fonctionnalité Inspecteur Web sur votre navigateur Safari Mac. Les étapes sont similaires pour les éditions récentes de macOS Ventura, et les précédentes comme Monterey, Big Sur, Catalina, etc., jusqu'à Jaguar.

Lire aussi : Html 4.01

Jusqu'à présent, vous avez appris à activer la fonctionnalité Inspecteur Web dans l'application Safari de Mac. Apprenez ci-dessous à l'utiliser sur Safari pour des sites Web en direct :

Comment utiliser l'inspecteur Web Safari sur macOS

Trouvez ci-dessous les étapes pour appeler l'outil Inspecteur Web pour le développement web, la création de contenu ou tout autre usage. Dans cet article, je montre les étapes en utilisant le système d'exploitation macOS Monterey. Cependant, les étapes sont assez similaires depuis macOS Jaguar jusqu'à Ventura.

• Ouvrez Safari et visitez n'importe quel site web que vous souhaitez inspecter.
• Il existe deux façons d'inspecter les codes HTML/CSS sous-jacents d'un site web ou de faire des modifications à l'aide de l'outil de développement d'Apple Inspecteur Web. Ce sont :
  • Développement > Afficher l'inspecteur Web.
  • Clique droit > Inspecter l'élément.
• Pour utiliser la première méthode, allez dans la barre d'outils Mac pour le navigateur Safari et cliquez sur le menu Développement.

• Dans le menu contextuel qui apparaît, cliquez sur Afficher l'inspecteur Web. Le raccourci pour cette action est Option + Command + I.

• Cela ouvrira l'outil Inspecteur Web dans la moitié inférieure du navigateur web. Les codes que vous voyez sont pour l'URL complète ou la page web que vous avez accédée.
• Si vous souhaitez visualiser le code sous-jacent d'un élément spécifique sur la page web sans ouvrir le code pour la totalité de la page web, sélectionnez l'élément que vous voulez inspecter.

• Clique droit et sélectionnez Inspecter l'élément dans le menu contextuel qui s'ouvre.
• L'inspecteur Web de Safari s'ouvrira.

• Mais cette fois-ci, Safari vous emmènera directement au code HTML ou CSS sous-jacent de l'élément que vous auditez.
• Dans cet outil, vous obtenez les codes HTML et CSS de l'élément de la page web que vous inspectez.

Lire aussi : Technipages explique le CSS

Comment ouvrir l'inspecteur Web Safari dans les anciennes versions de macOS

Supposons que vous soyez sur un Mac antérieur à Jaguar et que vous deviez utiliser l'outil Inspecteur Web. Si vous ne trouvez pas les étapes ci-dessus sur ce Mac, vous pouvez exécuter un simple code pour activer l'inspecteur Web. Voici comment cela se fait :

• Ouvrez Applications et allez dans le dossier Utilitaires.
• Dans Utilitaire, vous devriez trouver Terminal. C'est l'invite de commande des ordinateurs macOS.
• Maintenant, lancez l'interface en ligne de commande Terminal et tapez la commande simple suivante :

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

• Appuyez sur Retour pour exécuter la commande.
• Maintenant, vous pouvez ouvrir une page web dans Safari et cliquer avec le bouton droit ou maintenir le bouton de votre souris enfoncé n'importe où sur la page jusqu'à ce que le menu contextuel apparaisse.
• Là, cliquez sur l'option Inspecter l'élément pour voir les codes CSS et HTML sous-jacents du site web.

Inspecteur Web Safari : Les Derniers Mots

Voici donc les méthodes pour activer facilement l'inspecteur Web dans Safari. Vous pouvez suivre les étapes par vous-même et commencer à développer ou à créer du contenu en quelques minutes. Vous avez appris les méthodes pour activer l'Inspecteur Élément sur Safari pour les éditions macOS nouvelles et anciennes. Si j'ai oublié une méthode pour obtenir et utiliser l'inspecteur Web, n'hésitez pas à me le faire savoir en laissant un commentaire ci-dessous.

Ensuite, découvrez les meilleures applications de programmation pour iPad.