Comment utiliser l'outil d'inspection des éléments de votre navigateur

Si vous travaillez avec de nombreux sites Web, vous êtes probablement toujours à la recherche de moyens plus rapides et plus efficaces pour faire avancer les choses. Si tel est le cas, l'outil Inspecter l'élément, disponible dans la plupart des principaux navigateurs, pourrait être un atout utile à avoir sous la main. Avec lui, vous pouvez rapidement identifier les classes CSS, prévisualiser les modifications apportées aux éléments d'une page, simuler un site sur des appareils mobiles, et bien plus encore.

Dans cet article, nous allons présenter l'outil Inspecter l'élément et vous montrer comment y accéder dans les navigateurs Web les plus populaires. Ensuite, nous vous expliquerons quelques exemples de la façon dont vous pouvez l'utiliser dans le cadre de votre flux de travail de développement Web.

Creusons !

Comment accéder à l'outil Inspecter l'élément dans les principaux navigateurs

L'outil Inspecter l'élément est un utilitaire qui vous permet d'afficher le code source sous-jacent de n'importe quelle page Web. De plus, vous pouvez l'utiliser pour apporter des modifications temporaires et voir les résultats en temps réel tout en laissant le code source d'origine intact. Ceci est incroyablement utile si vous devez tester un changement ou diagnostiquer un problème. Cela peut également être utile si vous rencontrez un site avec une fonctionnalité que vous aimez et que vous êtes curieux de savoir comment elle a été implémentée.

La plupart des principaux navigateurs, y compris Chrome, Firefox et Safari, proposent une variante de cet outil. Regardons comment y accéder dans chacun d'eux.

Accéder à l'élément Inspect dans Google Chrome

Il existe trois manières d'accéder à l'outil Inspecter l'élément dans Chrome :

• Cliquez avec le bouton droit sur un élément de la page et choisissez Inspecter .
• Cliquez sur le menu à trois points dans le coin supérieur droit de la fenêtre et choisissez Plus d'outils > Outils de développement.
• Appuyez sur Ctrl + Shift + C sur votre clavier ( Cmd + Option + C sur Mac).

Lorsque l'outil s'ouvre, il vous présentera une vue fractionnée. D'un côté, vous avez un aperçu du site Web que vous inspectez, ainsi que quelques commandes pour ajuster la vue et simuler différentes résolutions d'écran :

De l'autre, plusieurs volets contenant des informations. Le volet supérieur est le code HTML de la page. Survolez une partie du code pour mettre en surbrillance la zone pertinente de la page à droite :

En dessous se trouve un volet affichant des informations sur la page. Les détails affichés ici varient en fonction de l'onglet sélectionné. Dans les captures d'écran ci-dessus, il montre les styles CSS de la page.

Le volet inférieur contient simplement des nouvelles et des mises à jour sur les outils de développement Chrome. Vous pouvez le fermer en toute sécurité pour réduire l'encombrement en cliquant sur le X .

Enfin, vous pouvez modifier l'emplacement de ces volets en cliquant sur le menu à trois points dans le coin supérieur droit du volet HTML et en sélectionnant l'une des options du dock.

Accéder à l'élément Inspect dans Mozilla Firefox

L'outil Inspecter les éléments de Firefox est assez similaire à celui de Chrome et est accessible de la même manière :

• Cliquez avec le bouton droit sur un élément de la page et choisissez Inspecter l'élément.
• Cliquez sur le menu hamburger dans le coin supérieur droit de la fenêtre Firefox et sélectionnez Développeur Web > Inspecteur .
• Appuyez sur Ctrl + Shift + C sur votre clavier ( Cmd + Option + C sur Mac).

Par défaut, Firefox place les volets d'informations en bas de l'écran :

Cependant, vous pouvez facilement les déplacer en cliquant sur le menu à trois points et en sélectionnant une option différente.

Accéder à l'élément Inspect dans Safari

Sur les ordinateurs Mac, le navigateur Web Safari propose également un outil Inspecter l'élément. Cependant, il y a une étape supplémentaire pour y accéder - vous devrez activer les outils de développement Safari.

Pour ce faire, dirigez-vous vers la barre de menu en haut de votre écran et accédez à Safari > Préférences > Avancé . Vous pouvez ensuite cocher la case appropriée pour activer les outils de développement :

Une fois activée, vous pouvez accéder à la fonction Inspecter l'élément comme dans les autres navigateurs :

• Cliquez avec le bouton droit sur un élément et choisissez Inspecter l'élément .
• Dans la barre de menus supérieure, accédez à Développer > Afficher l'inspecteur Web.
• Appuyez sur Cmd + Option + I sur votre clavier.

La disposition initiale de l'outil de Safari diffère un peu des navigateurs :

Cependant, comme avec Chrome et Firefox, vous pouvez facilement le personnaliser en cliquant sur les icônes dans le coin supérieur gauche de la fenêtre d'inspection.

5 utilisations courantes de l'outil Inspecter l'élément

Maintenant que vous savez comment accéder à l'outil Inspecter l'élément, examinons certaines des choses utiles que vous pouvez faire avec. Il existe des tonnes de possibilités, mais les utilisations ci-dessous sont parmi les plus courantes. Notez que nous utiliserons Chrome pour ces exemples, mais les fonctionnalités devraient fonctionner de la même manière dans d'autres navigateurs.

1. Trouver des classes CSS sur un site Web

L'un des moyens les plus utiles d'exploiter Inspect Element consiste à rechercher des détails dans les feuilles de style en cascade (CSS) d'une page. C'est pratique pour plusieurs raisons. Tout d'abord, si vous ne faites que naviguer sur Internet et que vous tombez sur un site dont vous aimez vraiment le style, vous pouvez jeter un coup d'œil au CSS pour recueillir des idées pour votre propre conception de sites Web.

C'est aussi utile sur votre propre site. Par exemple, si un élément ne semble pas tout à fait correct, vous pouvez l'inspecter rapidement pour vous assurer qu'il utilise le bon CSS.

Il existe deux méthodes de base pour vérifier les styles à l'aide d'Inspecter l'élément. Si vous souhaitez afficher rapidement un seul élément, vous pouvez le survoler dans le volet d'aperçu pour afficher des informations de base à son sujet :

Ici, vous pouvez voir la palette de couleurs, la police, les marges et plus encore pour l'en-tête de notre blog. Dans les volets détaillés, l'outil met également en évidence le code pertinent afin que vous puissiez voir exactement ce qui se passe. Cliquer sur un élément dans l'aperçu mettra à jour le volet des styles pour afficher également son CSS :

Si le survol de l'élément ne semble rien faire, assurez-vous que l'icône du curseur dans le volet de l'inspecteur est surlignée en bleu :

Si vous connaissez la classe ou le style CSS spécifique que vous recherchez et que vous souhaitez voir chaque élément qui l'utilise, vous pouvez également utiliser la fonction de recherche. Avec l'inspecteur ouvert, appuyez sur Ctrl + Shift + F sur votre clavier ( Cmd + Shift + F sur Mac). Cela ouvre une zone de recherche dans laquelle vous pouvez rechercher le code de la page . Les résultats pertinents seront mis en évidence, comme si vous recherchiez un document.

2. Dépanner un site

L'outil Inspecter l'élément est extrêmement pratique pour résoudre les problèmes. Par exemple, si la couleur ou la police d'un élément ne semble pas tout à fait correcte, vous pouvez la vérifier rapidement à l'aide de l'outil comme nous l'avons décrit dans la section précédente.

Vous pouvez également modifier directement le code HTML d'une page à partir de l'outil Inspecter l'élément. Double-cliquez simplement sur le code que vous souhaitez modifier pour le modifier.

Notez que le code n'est pas réellement modifié sur le site Web - si vous actualisez la page, elle reviendra à sa forme d'origine. Cependant, cette fonctionnalité est extrêmement utile pour les tests rapides et le dépannage.

Enfin, le débogueur intégré est un outil plus avancé que vous pouvez utiliser pour voir les messages d'erreur qui sont générés dans les coulisses. Pour y accéder, cliquez sur Console en haut de la fenêtre Inspecteur :

D'autres onglets sont également disponibles pour afficher les sources, l'activité du réseau, etc. Pour accéder à la liste complète, cliquez sur l'icône à double flèche en haut de l'inspecteur.

3. Modifier le texte pour prévisualiser les modifications

L'une des meilleures utilisations d'Inspecter l'élément consiste à prévisualiser rapidement les modifications apportées au texte, à la police ou à la couleur d'une page. De cette façon, vous pouvez voir exactement à quoi ressemble votre idée sans même vous connecter à votre tableau de bord WordPress.

Pour modifier un élément, faites un clic droit dessus et choisissez Inspecter. Cela ouvre l'outil avec le code de cet élément en focus. Si Inspect Element est déjà ouvert, vous pouvez également cliquer sur l'élément dans le volet d'aperçu pour mettre en surbrillance le code correspondant.

Ensuite, double-cliquez simplement sur le code pour le rendre modifiable. Par exemple, ici, nous avons changé le titre de notre blog :

Vous pouvez également changer les couleurs. Sélectionnez simplement l'élément et faites défiler le volet Styles pour trouver la section appropriée. Vous pouvez cliquer sur les carrés de couleur pour faire apparaître un sélecteur de couleur :

Vous pouvez également modifier directement le code hexadécimal de la couleur si vous connaissez celui que vous souhaitez utiliser.

4. Aperçu des changements d'image

Inspecter l'élément permet également de prévisualiser facilement les modifications apportées à l'image. C'est également un excellent moyen d'essayer différentes tailles d'image.

Sélectionnez simplement l'image que vous souhaitez modifier dans le volet d'aperçu, puis double-cliquez sur son URL dans le volet HTML :

Vous pouvez ensuite coller l'URL d'une autre image pour la tester. Si l'image se trouve dans votre médiathèque WordPress, vous pouvez rapidement trouver l'URL dans les détails de la pièce jointe :

Il y a même un bouton pratique pour copier l'URL dans votre presse-papiers. Encore une fois, n'oubliez pas que toutes les modifications que vous apportez dans l'inspecteur ne sont que temporaires et uniquement visibles pour vous, alors n'hésitez pas à jouer.

5. Tester un site à l'aide de l'émulation de périphérique

Enfin, une autre fonctionnalité utile d'Inspect Element est la possibilité d'émuler différentes tailles d'écran et même des appareils spécifiques. Cela vous permet de tester la réactivité d'un site et de voir exactement comment il apparaîtra avec divers facteurs de forme mobiles.

Avec l'inspecteur ouvert, cliquez sur l'icône qui ressemble à un téléphone et une tablette empilés :

Cela permet l'émulation de l'appareil. Notez qu'il peut être activé par défaut lorsque vous ouvrez l'inspecteur. Redimensionnez l'aperçu de la page à l'aide des poignées qui l'entourent ou cliquez sur les listes déroulantes en haut du volet d'aperçu pour choisir différents appareils :

Vous pouvez également entrer un rapport hauteur/largeur spécifique ou même vérifier à quoi ressemble la page lorsque l'appareil mobile est pivoté en cliquant sur l'icône « pivoter » en haut du volet d'aperçu. Pour émuler divers capteurs, tels que l'emplacement et le toucher, cliquez sur le menu à trois points dans le volet de l'inspecteur et sélectionnez Plus d'outils > Capteurs .

Conclusion

Que vous débutiez dans le développement Web ou un professionnel chevronné, l'outil Inspecter l'élément est un utilitaire puissant qui devrait certainement faire partie de votre arsenal. Il est facile d'accès, presque universellement disponible, et rend une variété d'opérations rapides et faciles.

Dans cet article, nous avons montré comment accéder à Inspect Element dans Chrome, Firefox et Safari. Nous vous avons également montré comment l'utiliser pour localiser des classes CSS, dépanner un site Web, modifier temporairement du texte et des images et émuler des appareils mobiles. Avec cette boîte à outils, vous disposez de tout ce dont vous avez besoin pour intégrer Inspect Element à votre flux de travail.

Vous avez des questions sur l'utilisation d'Inspect Element ? Faites-nous savoir dans la section commentaires ci-dessous!

Image en vedette via Kinjugraphics / shutterstock.com.