Articles sur : Pour les débutants
Cet article est aussi disponible en :

Comment inspecter les éléments d'un site web?

La plupart des navigateurs modernes offrent des outils pour l'inspection des divers éléments d'un site web. Ces outils permettent notamment de connaître l'ensemble du code et des commandes donne au site son apparence et ses fonctionnalités.

L'inspection des éléments est couramment utilisée par les développeurs web pour aider à la configuration du design. Par exemple, cet outil peut permettre de savoir quelle ligne de commande dans quel fichier détermine la couleur d'un bouton. Si un élément de votre site a besoin d'être modifier manuellement, cet outil peut vous aider à identifier l'élément en question.

Inspecter les éléments d'un site web sur divers navigateurs



Chrome, Firefox et Edge offre par défaut l'accès à la fonction d'inspection des éléments. Dans le cas de Safari, l'outil doit d'abord être activé avant de pouvoir être utilisé. Pour ce faire, vous devez cocher la case à cet effet dans les paramètres avancés du navigateur.

Pour inspecter un élément, il vous suffit de cliquer sur celui-ci avec le bouton droit de votre souris. Dans le menu déroulant qui s'affiche alors, sélectionnez l'option Inspecter.



Une nouvelle fenêtre devrait alors s'afficher à la droite de celle que vous désirez inspecter, séparant votre écran. Celle ci devrait contenir un ensemble de lignes de code ressemblant à ceci:



Ces lignes contiennent une foule d'information à propos de la programmation des divers éléments élément de la page inspectée. Vous pouvez y trouver la nature des divers éléments de contenu ainsi que divers paramètres qui y sont associés (couleur, marges, etc.).

Vous pouvez inspecter les divers éléments de la page un à un en sélectionnant l'outil d'inspection dans le menu.



Il vous suffit alors de survoler la page avec votre curseur pour voir s'afficher des informations sur les divers éléments. Vous verrez aussi la fenêtre de code défiler pour s'ajuster. L'outil d'inspection surlignera toujours le code lié à l'élément que vous êtes en train d'inspecter.

Mis à jour le : 14/04/2023

Cet article a-t-il répondu à vos questions ?

Partagez vos commentaires

Annuler

Merci !