Comment inspecter correctement un site Web

Que vous soyez un développeur testant de nouvelles fonctionnalités sur un projet ou un concepteur souhaitant se pencher sur le code HTML et CSS, il existe de nombreuses raisons d'inspecter un site Web et ses éléments. Cependant, savoir par où commencer peut sembler déroutant (au début).

Heureusement, vous pouvez utiliser divers outils, techniques et astuces simples pour inspecter correctement les éléments Web. De plus, il existe des options pour presque tous les navigateurs et systèmes d'exploitation (OS).

Dans cet article, nous expliquerons pourquoi vous voudrez peut-être inspecter un site Web. Ensuite, nous vous expliquerons certains des meilleurs outils que vous pouvez utiliser avant de vous expliquer ce qu'il faut rechercher. Allons-y !

Pourquoi devriez-vous inspecter un site Web

Il existe plusieurs raisons pour lesquelles vous pourriez vouloir inspecter un site Web. Par exemple, vous devrez peut-être résoudre un problème ou trouver une information spécifique.

L'inspection des éléments Web dans un navigateur permet aux développeurs, concepteurs et spécialistes du marketing numérique WordPress de manipuler l'apparence d'une page Web et de tester les modifications. Les développeurs ou les testeurs sont plus susceptibles d'utiliser cette fonctionnalité pour déboguer un élément particulier, effectuer des tests de mise en page ou effectuer des modifications CSS en direct.

L'inspection des éléments Web est également utile pour les concepteurs Web. Si vous souhaitez tester rapidement un changement de couleur ou une nouvelle police, vous pouvez le faire sans fouiller dans votre code CSS.

De plus, les spécialistes du marketing numérique peuvent utiliser un outil Inspect Element pour voir comment certains changements affecteraient l'apparence générale d'une page Web. Par exemple, vous voudrez peut-être essayer un nouveau bouton d'appel à l'action (CTA) ou un jeu de couleurs différent. Vous pouvez utiliser des outils pour répliquer les mises à jour sans apporter de modifications à votre site en ligne.

Enfin, l'inspection d'un site Web peut être un excellent moyen d'apprendre comment un site Web est construit et fonctionne. Si vous souhaitez en savoir plus sur le développement Web, l'inspection des sites est un excellent moyen de démarrer.

Meilleurs outils et extensions pour inspecter un site Web

Il existe un certain nombre d'outils et d'extensions différents que vous pouvez utiliser pour inspecter un site Web. Voici quelques-unes des options les plus populaires !

Inspecter l'élément

L'outil Inspecter l'élément est l'option la plus courante. Il vous permet de regarder de près le code HTML et CSS qui compose une page Web. Vous pouvez également l'utiliser pour modifier en direct le CSS et voir à quoi ressembleraient vos modifications sans apporter de modifications permanentes.

Bien qu'il soit disponible en tant qu'extension Google Chrome, l'outil Inspect Element est également fourni avec tous les principaux navigateurs. La fonctionnalité fait partie des outils de développement Chrome, un ensemble de programmes qui vous permet d'inspecter et de modifier le code HTML et CSS d'une page Web.

Pour accéder aux outils de développement Google Chrome, appuyez simplement sur Ctrl+Maj+I (ou Cmd+Opt+I sur un Mac). Vous pouvez également accéder aux outils en ouvrant le menu Chrome et en sélectionnant Plus d'outils > Outils de développement :

Vous pouvez accéder aux mêmes outils de développement dans d'autres navigateurs. Par exemple, Firefox Developer Tools a des fonctionnalités similaires. Pour accéder aux outils, appuyez simplement sur Ctrl+Maj+I (ou Cmd+Opt+I sur un Mac). Vous pouvez également trouver les outils en ouvrant le menu Firefox et en sélectionnant Développeur Web > Inspecteur.

De plus, Safari Developer Tools vous permet d'inspecter et de modifier le code HTML et CSS d'une page Web sur les appareils Mac. Appuyez simplement sur Cmd+Opt+I . Vous pouvez également ouvrir le menu Safari et sélectionner Préférences > Avancé > Afficher le menu Développer dans la barre de menus .

NavigateurStack

BrowserStack est une autre plate-forme que vous pouvez utiliser pour tester des sites Web :

Cette plate-forme de test basée sur le cloud fonctionne avec tous les principaux navigateurs et appareils. Après vous être inscrit pour un essai gratuit, vous pouvez accéder au tableau de bord Live et choisir votre système d'exploitation.

Ensuite, vous pouvez sélectionner votre version de navigateur préférée pour lancer une session en direct dans votre navigateur. Enfin, vous pouvez naviguer sur le site Web que vous souhaitez inspecter comme vous le feriez via Inspect Element.

Comment inspecter un site Web

Voyons comment vous pouvez inspecter un site Web à l'aide de l'outil Inspecter l'élément. Commencez par un simple clic droit sur n'importe quel élément de la page Web et sélectionnez Inspecter dans le menu contextuel :

Cela ouvrira l'outil Inspecter l'élément dans votre navigateur. Une fois l'outil ouvert, vous pouvez commencer à manipuler le code HTML et CSS pour voir comment cela affecterait l'apparence de la page Web.

Par exemple, vous pouvez changer la couleur d'un élément, ajouter ou supprimer une classe, ou même changer la position d'un élément. Vous pouvez également utiliser le champ de recherche en haut pour rechercher un morceau de texte ou une image.

Bien sûr, toutes les modifications que vous apportez à l'aide de Inspect Element ne sont que temporaires. Ils ne seront pas enregistrés lorsque vous actualiserez la page ou fermerez le navigateur. Cependant, c'est un excellent moyen de tester à quoi ressembleraient des modifications spécifiques sans modifier de manière permanente votre site Web.

Vous pouvez également accéder à l'outil en appuyant sur Ctrl+Maj+I (ou Cmd+Opt+I sur un Mac) pour ouvrir les outils de développement . Ensuite, cliquez sur l'onglet Eléments en haut de la fenêtre :

Enfin, vous pouvez également accéder à Inspect Element en ouvrant le menu Chrome et en sélectionnant Plus d'outils > Outils de développement , dont nous avons parlé précédemment.

Comment changer un élément

Si vous souhaitez modifier un élément sur une page Web, faites un clic droit dessus et sélectionnez Inspecter . Dans le panneau Éléments qui s'ouvre, recherchez la pièce que vous souhaitez modifier et double-cliquez dessus.

Lorsque vous ouvrez la boîte Éléments , vous pouvez utiliser l'icône du curseur d'inspection en haut à gauche du panneau pour mettre en surbrillance le code source de l'élément que vous souhaitez modifier. Lorsque vous faites un clic droit sur le code en surbrillance, sélectionnez Modifier au format HTML :

La boîte se développera, vous pourrez alors modifier le texte. Pour prévisualiser les modifications, vous pouvez désélectionner l'élément. Vous pouvez également double-cliquer sur le texte pour le modifier.

Vous pouvez également utiliser cette technique pour modifier le code CSS d'un élément. Pour ce faire, faites un clic droit dessus et sélectionnez Inspecter . Dans le panneau des éléments, localisez l'élément que vous souhaitez modifier et choisissez la propriété element.style . Ensuite, vous pouvez ajouter votre code ou vos déclarations entre accolades.

Comment masquer ou supprimer un élément

Vous pouvez également masquer ou supprimer un élément sur une page Web. Une fois que vous avez trouvé l'élément que vous souhaitez masquer ou supprimer, cliquez dessus avec le bouton droit de la souris et sélectionnez Inspecter pour lancer l'outil Inspecter l'élément.

De là, faites un clic droit sur l'élément, puis sélectionnez l'option Supprimer l'élément ou Masquer l'élément :

Le bouton Supprimer supprime l'élément DOM (Document Object Model). Le bouton Masquer masquera simplement l'élément, mais il sera toujours dans le DOM.

Comment inspecter les classes CSS

Il existe plusieurs façons d'inspecter les classes CSS. Cependant, la méthode la plus simple consiste à cliquer avec le bouton droit sur l'élément que vous souhaitez examiner et à sélectionner Inspecter . Ouvrez ensuite l'onglet Styles pour voir ses styles CSS :

Notez que cet onglet ne vous montre que les styles en ligne qui sont appliqués et non ceux qui proviennent d'une feuille de style.

Si vous souhaitez voir tous les styles CSS appliqués à un élément, vous pouvez utiliser l'onglet Calculé . Il vous montre tous les styles CSS appliqués à un élément, y compris ceux d'une feuille de style :

Lorsque vous avez terminé d'inspecter une page Web, fermez simplement l'outil Inspecter l'élément. Vos modifications ne seront pas enregistrées, vous n'avez donc pas à vous soucier de casser accidentellement quelque chose.

Que rechercher lors de l'inspection d'un site Web

Quelle que soit la méthode que vous utilisez pour accéder à Inspect Element, vous verrez la même interface. Il se compose de deux volets : le volet HTML et le volet CSS.

Le volet HTML vous montre la structure de la page Web. Vous pouvez voir comment les différents éléments sont imbriqués et liés.

Le volet CSS vous montre les styles appliqués à l'élément sélectionné. Vous pouvez également modifier les règles CSS pour voir comment vos modifications affecteraient l'apparence de l'élément.

Si vous recherchez quelque chose de spécifique sur un site Web, qu'il s'agisse d'un certain texte ou d'une image, vous pouvez utiliser Inspect Element pour vous aider à le trouver. Il a un champ de recherche où vous pouvez rechercher un élément particulier.

Lorsque vous inspectez un site Web, il y a quelques points à garder à l'esprit :

• HTML : Le code qui définit la structure de la page Web. Faites attention à la façon dont les éléments sont organisés et comment ils interagissent les uns avec les autres.
• CSS : Le code qui définit le style de la page Web.
• JavaScript : Le code qui définit le comportement de la page Web. Il influence la façon dont les éléments interagissent et la façon dont la page répond aux entrées de l'utilisateur.
• Design : L'apparence générale du site Web. Cela influence la convivialité de la mise en page et son adéquation avec l'objectif du site Web.
• Contenu : le texte, les images et les autres médias du site Web.

Ce que vous devez rechercher lors de l'inspection d'un site Web dépendra principalement du fait que vous soyez un concepteur, un développeur ou un spécialiste du marketing numérique. Comme nous l'avons vu précédemment, l'outil Inspect Element peut vous aider dans tous les domaines, des tests de conception aux problèmes de dépannage.

Conclusion

Inspect Element est une fonctionnalité précieuse pour les concepteurs et les développeurs. Vous pouvez l'utiliser pour afficher et modifier le code HTML et CSS d'une page Web. Cet outil peut être utile lorsque vous souhaitez apporter des modifications à une page Web sur laquelle vous travaillez ou voir comment elle est codée.

Inspect Element est disponible dans la plupart des navigateurs Web. Vous pouvez y accéder en cliquant avec le bouton droit sur une page Web et en sélectionnant Inspecter dans le menu. Une fois que vous avez ouvert la fenêtre d'inspection , vous verrez le code HTML et CSS de la page Web et pourrez apporter diverses modifications.

Vous avez besoin d'aide pour la gestion ou l'optimisation de votre site Web ? Découvrez comment WP Engine peut vous aider avec tout, de l'hébergement WordPress à la gestion des sites et des clients !