Il existe de nombreuses  ressources précieuses en matière de développement web, qu’il s’agisse de livres, de vidéos, de cours en ligne, etc. Apprendre à utiliser l’outil Inspecter l’élément d’un navigateur est l’une de ces puissantes capacités. Il s’agit d’un outil d’apprentissage inestimable, accessible à tout moment du bout des doigts.

La fonction Inspecter l’élément vous permet de voir le fonctionnement interne du site web. Bien que vous ne puissiez voir que les balises frontend telles que le HTML, le CSS et parfois le JavaScript, cela vous permet de voir précisément comment les développeurs ont construit un site web.

Dans cet article, nous allons vous montrer comment utiliser l’outil Inspecter l’élément et quelques-unes des technologies, caractéristiques et fonctionnalités connexes que vous rencontrerez. Tout d’abord, nous allons vous présenter officiellement l’outil Inspecter l’élément.

Présentation de l’outil Inspecter l’élément

Aux débuts du web, il n’y avait qu’un seul moyen de consulter le code d’un site web : la fonction Voir la source.

La page « Voir la source » de Kinsta.com.
La page « Voir la source » de Kinsta.com.

Cette situation était courante à l’époque où nous ne disposions pas encore de feuilles de style en cascade (CSS) et de JavaScript en abondance. Les développeurs web utilisaient le HTML pour tous les éléments du site, y compris le contenu, la conception et… tout.

Lorsque le web a commencé à évoluer et que les technologies sous-jacentes ont gagné en puissance, il a été nécessaire de développer de meilleurs outils. Firebug de Firefox était une solution précoce pour découvrir comment un site web fonctionnait sous le capot :

Les logos de Firefox et Firebug.
Les logos de Firefox et Firebug.

Après un certain temps, cette fonctionnalité a fait son chemin dans presque tous les navigateurs. Aujourd’hui, nous connaissons cette fonctionnalité sous le nom de l’outil Inspecter l’élément :

L'outil Inspecter l'élément sur le site web de Kinsta.
L’outil Inspecter l’élément sur le site web de Kinsta.

Il s’agit d’un moyen puissant de voir la technologie et le code sous-jacents d’un site web. En tant que tel, vous pouvez le trouver à différents endroits – souvent dans un menu de la barre d’outils, en cliquant avec le bouton droit de la souris sur une page et en sélectionnant l’option, ou avec un raccourci clavier.

Bien que l’outil Inspecter l’élément se concentre principalement sur le HTML et le CSS d’une page, vous pouvez en faire plus.

Avec l'outil Inspecter l'élément de votre navigateur, vous pouvez voir le fonctionnement interne de n'importe quel site web, du HTML au CSS 👀 Apprenez à l'utiliser ici ⬇️Click to Tweet

Visite du panneau Inspecter l’élément

Les DevTools de Brave.
Les DevTools de Brave.

L’outil Inspecter l’élément est bien plus qu’un moyen d’afficher du code. Il y a souvent plusieurs panneaux auxquels on peut accéder :

En plus de cela, vous pouvez ajouter d’autres panneaux :

Une liste d'autres panneaux dans les DevTools de Brave.
Une liste d’autres panneaux dans les DevTools de Brave.

Il existe des panneaux simples, tels que Média, et d’autres plus complexes comme le JavaScript Profiler et le Moniteur de performance. En bref, le nom de l’outil Inspecter l’élément ne rend pas service à toutes les fonctionnalités qu’il contient. Il est très puissant et devrait être au cœur du flux de travail de tout développeur web.

Pourquoi vouloir utiliser Inspecter l’élément

L’outil Inspecter l’élément est presque la seule solution « clouée » que vous devrez avoir à vos côtés pendant le développement. Nous entrerons dans les détails techniques qui expliquent pourquoi dans le reste de l’article. Mais d’abord, il convient de parler de votre motivation à utiliser Inspecter l’élément.

Il y a plusieurs raisons pour lesquelles vous voudriez utiliser cet outil :

En bref, l’apprentissage du développement web consiste à examiner de bons exemples de sites web et à découvrir ce qui les fait fonctionner.

L’outil Inspecter l’élément vous permet de vérifier l’exactitude du HTML et du CSS utilisés sur un site, ce qui vous donne une grande chance de mettre en œuvre ces aspects et techniques dans votre travail.

Comment trouver l’outil Inspecter l’élément de votre navigateur ?

La bonne nouvelle est que l’outil Inspecter l’élément est facile à trouver. Dans la plupart des cas, vous devez cliquer avec le bouton droit de la souris sur une page et sélectionner Inspecter ou Inspecter l’élément :

Choisir l'outil Inspecter l'élément.
Choisir l’outil Inspecter l’élément.

Par défaut, l’outil s’ouvre dans une fenêtre divisée. Elle s’ouvre souvent par défaut sur le côté droit. Mais vous pouvez personnaliser cela à votre guise et même faire apparaître l’outil dans sa propre fenêtre :

L'outil Inspecter l'élément dans sa fenêtre.
L’outil Inspecter l’élément dans sa fenêtre.

Bien entendu, vous pouvez également accéder à Inspecter l’élément à partir de la barre d’outils du navigateur ou par un raccourci clavier. L’emplacement exact varie en fonction du navigateur. Par exemple, dans Firefox, vous trouverez les outils du développeur web dans le menu Outils > Outils du navigateur. En revanche, Brave (et d’autres navigateurs basés sur Chromium) propose l’option Outils du développeur dans le menu Vue > Développeur :

Le menu de la barre d'outils de Brave, qui présente ses outils de développement.
Le menu de la barre d’outils de Brave, qui présente ses outils de développement.

Les raccourcis clavier sont souvent similaires d’un navigateur à l’autre : Commande + Shift + C (Contrôle + Shift + C pour Windows). Ce raccourci permet de faire apparaître rapidement les outils dont vous avez besoin pour travailler.

Si vous n’avez jamais ouvert l’outil Inspecter l’élément auparavant, il est souvent affiché sur le côté droit de votre menu, comme nous l’avons mentionné précédemment. Pour changer cela, cliquez sur le menu des feux de signalisation dans la barre d’outils de l’outil Inspecter l’élément. Ici, vous pouvez changer le côté où le « dock » est affiché :

Les options « Côté du dock » de l'outil Inspecter l’élément.
Les options « Côté du dock » de l’outil Inspecter l’élément.

Notez que Firefox utilise également une vue « triple volet » par défaut, ce qui vous permet d’obtenir le plus d’informations possible dans l’outil Inspecter l’élément :

La vue « triple volet » de Firefox.
La vue « triple volet » de Firefox.

Maintenant que vous avez ouvert l’outil, c’est une bonne idée de découvrir ce que vous pouvez faire avec. Nous allons en parler maintenant.

3 Situations d’utilisation de l’outil Inspecter l’élément

Nous avons évoqué quelques façons d’utiliser l’outil Inspecter l’élément, mais nous pouvons aller plus loin et proposer quelques cas d’utilisation. Nous allons en parler brièvement.

1. Recherche d’éléments spécifiques sur une page web

L’objectif principal de l’outil Inspecter l’élément est inscrit dans son nom : inspecter les éléments du site web. Pour ce faire, vous devez vous rendre sur la page web souhaitée, puis choisir votre méthode d’ouverture des outils de développement.

Une fois le panneau ouvert, vous cliquez sur la flèche qui sert de sélecteur pour l’élément souhaité :

L'icône de la flèche de l'inspecteur.
L’icône de la flèche de l’inspecteur.

À partir de là, vous pouvez passer la souris sur n’importe quel élément de la page, et vous le verrez mis en évidence dans la fenêtre Inspecteur/Éléments :

Mise en évidence d'un élément dans le panneau des outils de développement.
Mise en évidence d’un élément dans le panneau des outils de développement.

C’est un processus simple – l’une des raisons pour lesquelles l’outil Inspecter l’élément est si précieux et populaire auprès des développeurs web.

2. Émulation d’un dispositif cible, d’un écran et d’un navigateur

Inspecter l’élément fonctionne également comme une sorte d’émulateur de périphérique. En d’autres termes, vous êtes en mesure de voir comment un site web se présente sur un appareil spécifique. Les options sont nombreuses :

Une liste des périphériques émulés affichés dans Brave.
Une liste des périphériques émulés affichés dans Brave.

Cet émulateur est idéal pour déterminer si votre stratégie « mobile-first » ou votre design responsive est précise et fonctionne. C’est un outil inestimable et plus rentable que d’avoir 200 appareils qui traînent sur votre bureau.

Vous accédez souvent à l’émulation de périphérique à partir d’une petite icône située quelque part dans le panneau Inspecter l’élément :

Émulation d'un périphérique avec l'outil Inspecter l'élément.
Émulation d’un périphérique avec l’outil Inspecter l’élément.

En cliquant sur cette icône, votre site s’affichera tel qu’il apparaît sur l’appareil que vous avez sélectionné :

Choisir un dispositif à émuler à partir de l'outil Inspecter l'élément.
Choisir un dispositif à émuler à partir de l’outil Inspecter l’élément.

Nous y reviendrons plus en détail plus tard, mais il s’agit d’un moyen solide de rendre vos conceptions cohérentes sur tous les appareils.

3. Vérification de la performance de la page web

L’outil Inspecter l’élément peut également vous aider à juger de la vitesse et des performances d’un site web grâce au panneau Performance :

Le panneau Performance de l’outil Inspecter l’élément.
Le panneau Performance de l’outil Inspecter l’élément.

Cette fonctionnalité fonctionne en « enregistrant » les temps de chargement d’éléments et de scripts spécifiques. Les navigateurs basés sur Chromium offrent brillamment ces informations. Vous enregistrez la page pendant son chargement, puis vous visualisez les résultats sous la forme d’une chronologie.

C’est un excellent moyen de vérifier si une page est performante d’une manière générale. À partir de là, vous pouvez utiliser un outil tel que Google PageSpeed Insights ou Lighthouse pour améliorer les performances de votre site. Les navigateurs basés sur Chromium disposent d’un générateur de rapports Lighthouse intégré :

Un rapport intégré de Google Lighthouse.
Un rapport intégré de Google Lighthouse.

Vous pouvez également voir un résumé des tests de performance dans d’autres onglets. Par exemple, vous pouvez afficher un arbre d’appel, un résumé global et un journal d’événement :

Le journal d’événement de l’outil Inspecter l'élément.
Le journal d’événement de l’outil Inspecter l’élément.

Il est concevable que vous n’ayez besoin d’aucun autre outil pour juger des performances ou du fonctionnement de votre site web. Nous verrons plus loin comment cela fonctionne dans la pratique.

Trucs et astuces pour l’utilisation de l’outil Inspecter l’élément

Nous avons déjà expliqué que l’outil Inspecter l’élément est plus puissant qu’il n’y paraît au premier abord. Voyons maintenant quelques trucs et astuces pour tirer le meilleur parti de ses fonctionnalités, en commençant par les bases.

Modification des propriétés, des valeurs et des états de l’élément

Jusqu’à présent, nous n’avons fait qu’effleurer le concept d’utilisation de l’outil Inspecter l’élément pour apporter des modifications temporaires à un site. Voyons maintenant comment procéder de manière plus détaillée.

Les étapes sont simples. Tout d’abord, utilisez l’icône en forme de flèche pour sélectionner l’élément de votre choix. Vous verrez une superposition qui met en évidence les différents composants lorsque vous les survolez :

Sélection des éléments dans l'outil Inspecter l’élément.
Sélection des éléments dans l’outil Inspecter l’élément.

Une fois que vous avez atteint l’élément souhaité, vous pouvez double-cliquer presque partout où vous voyez une balise dans le panneau Éléments et saisir un changement. Par exemple, nous voulons changer le texte original de la page d’accueil de Kinsta :

Modification du texte sur la page d'accueil de Kinsta.
Modification du texte sur la page d’accueil de Kinsta.

Vous pouvez également travailler avec CSS de la même manière qu’avec HTML. Prenons par exemple les boutons d’appel à l’action (CTA) sur la page d’accueil de Kinsta :

Sélection d'un bouton sur la page d'accueil de Kinsta.
Sélection d’un bouton sur la page d’accueil de Kinsta.

Si vous sélectionnez le bouton à l’aide du pointeur, vous pouvez voir le CSS correspondant dans le panneau Styles de droite :

Le panneau Style de l'outil Inspecter l'élément.
Le panneau Style de l’outil Inspecter l’élément.

Comme pour les éléments HTML, vous pouvez modifier les valeurs et ajouter vos CSS :

Modification de la couleur du bouton dans le panneau Styles.
Modification de la couleur du bouton dans le panneau Styles.

Bien sûr, pour les éléments tels que les boutons, vous pouvez vouloir travailler avec leurs différents états. Dans ce cas, l’état :hover mérite également d’être modifié. Pour ce faire, cliquez sur le lien :hov dans le panneau Style. Une liste d’états d’éléments s’affiche alors, et vous pouvez sélectionner ceux pour lesquels vous souhaitez voir le CSS de l’état de survol :

Faire apparaître les options « États » dans le panneau Styles.
Faire apparaître les options « États » dans le panneau Styles.

La page web montrera comment se présente l’état sans que vous ayez à agir. Ici, nous avons modifié les couleurs du survol pour le différencier de l’état par défaut du bouton :

Modification des couleurs de l'état de survol dans le panneau Styles.
Modification des couleurs de l’état de survol dans le panneau Styles.

Vous pouvez même prendre les URL des images et les échanger contre d’autres. Sur la page d’accueil de Kinsta, nous montrons une capture d’écran du tableau de bord MyKinsta :

Le tableau de bord MyKinsta sur la page d'accueil de Kinsta.
Le tableau de bord MyKinsta sur la page d’accueil de Kinsta.

En localisant l’élément et en modifiant l’URL source de l’image, vous pouvez tester d’autres images à sa place :

Dans ce cas, le changement a été mis en ligne en quelques minutes (Source : Pixabay).
Dans ce cas, le changement a été mis en ligne en quelques minutes (Source : Pixabay).

Comme vous pouvez vous y attendre, ces modifications ne sont pas permanentes et un rafraîchissement rapide de la page vous permettra de rétablir la situation. Vous pouvez également copier les codes HTML et CSS dans votre éditeur et les inclure dans votre code pour rendre ces changements permanents.

Recherche d’éléments

Il se peut qu’avant de pouvoir modifier un élément, vous deviez le trouver. L’outil Inspecter l’élément dispose d’une fonctionnalité de recherche simple qui peut vous aider à trouver n’importe quel aspect d’une page web.

Cela dit, il est difficile de le trouver si vous ne savez pas où regarder. La méthode « officielle » dans les navigateurs basés sur Chromium consiste à se rendre dans le menu « feu tricolore » situé sur le côté droit de la page et à sélectionner l’option Rechercher :

L'option « Rechercher » dans les DevTools de Brave.
L’option « Rechercher » dans les DevTools de Brave.

L’utilisation de cette option ouvre le panneau Console, avec un onglet Rechercher. À partir de là, saisissez la balise souhaitée dans la zone de texte, et vous verrez apparaître une liste d’éléments associés sur la page :

Recherche d'éléments dans les DevTools de Brave.
Recherche d’éléments dans les DevTools de Brave.

Notez que dans d’autres navigateurs, vous pouvez trouver cette fonctionnalité ailleurs. Par exemple, Firefox inclut un champ de recherche en haut de son panneau Inspecteur :

Recherche d'éléments dans le panneau Inspector de Firefox.
Recherche d’éléments dans le panneau Inspector de Firefox.

Voici une autre astuce rapide : vous pouvez effectuer une expansion récursive des différents nœuds et éléments en cliquant avec le bouton droit de la souris dans le volet Éléments et en choisissant Expansion récursive :

L'option Expansion récursive dans le panneau Éléments.
L’option Expansion récursive dans le panneau Éléments.

Si vous jetez un coup d’œil au panneau Styles, vous remarquerez également une zone de texte Filtre. Ce champ vous permet de filtrer par propriétés CSS, ce qui en fait un excellent compagnon de la fonctionnalité de recherche globale :

Filtrage par propriétés dans le panneau Styles.
Filtrage par propriétés dans le panneau Styles.

Dans l’ensemble, il ne devrait pas être difficile de trouver ce dont vous avez besoin grâce à deux outils de filtrage et de recherche dédiés.

Une brève introduction du modèle de boîte

L’une des meilleures façons dont l’outil Inspecter l’élément peut vous aider à en savoir plus sur la façon dont les propriétés CSS agissent sur les éléments est le panneau visuel « modèle de boîte ».

Le modèle de boîte.
Le modèle de boîte.

Cette vue d’ensemble vous donne une représentation de la façon dont une boîte spécifique (telle que « élément » ou « div ») apparaît à l’écran. En d’autres termes, il s’agit d’un aperçu de la manière dont les marges, les marges intérieures, la bordure et le contenu se combinent pour former la section que vous voyez à l’écran.

Expliquer le modèle de boîte CSS complet et la manière dont il interagit avec le code HTML d’une page web dépasse le cadre de cet article, mais Mozilla propose un guide fantastique sur les tenants et les aboutissants de ce concept.

Vous trouverez souvent le panneau Modèle de boîte dans les sections Mise en page ou Calcul du volet droit de l’outil Inspecter l’élément :

Le panneau « Modèle de boîte » de l'outil Inspecter l’élément.
Le panneau « Modèle de boîte » de l’outil Inspecter l’élément.

Comme pour tous les éléments et propriétés, vous pouvez également modifier les valeurs et les réglages d’une boîte particulière. Il y aura également une liste d’autres propriétés pour vous aider à positionner la boîte, à définir un z-index, à appliquer des réglages de flottaison et d’affichage, et bien plus encore.

Lorsque vous travaillez avec le modèle de boîte, il peut être utile de voir le système de grille en jeu sur la page. Pour ce faire, jetez un coup d’œil au panneau Mise en page – les options dont vous avez besoin se trouvent dans le menu Grille :

Le menu des réglages de grille.
Le menu des réglages de grille.

En cliquant sur les réglages d’affichage souhaités, puis en choisissant une superposition pertinente, vous l’afficherez à l’écran, ce qui vous permettra de prendre des décisions plus précises en utilisant le modèle de boîte pour manipuler les éléments du site.

Émulation de dispositifs à l’aide de l’outil Inspecter l’élément

Ils sont passés du statut de mots à la mode à celui de termes lexicaux intégrés, mais les termes « responsive » et « mobile-friendly » sont des facteurs clés du développement web. À ce titre, l’outil Inspecter l’élément aborde cette facette grâce à deux fonctionnalités.

Dans la plupart des navigateurs, l’outil Inspecter l’élément comporte une icône de dispositif mobile dans la barre d’outils supérieure :

Basculement de l'affichage adapté aux mobiles dans Brave.
Basculement de l’affichage adapté aux mobiles dans Brave.

Safari, cependant, est différent. Au lieu de cela, il y a une bascule Enter/Exit Responsive Design Mode dans le menu Develop :

L'option « Quitter le mode de design responsive » dans Safari.
L’option « Quitter le mode de design responsive » dans Safari.

Quelle que soit la façon dont vous y parvenez, une fois que vous avez choisi l’option, la page web s’affiche comme si vous la consultiez sur un appareil plus petit :

Une vue de la mise en page d'un appareil mobile dans Firefox.
Une vue de la mise en page d’un appareil mobile dans Firefox.

Alors que Safari ne vous donne le choix qu’entre différents appareils Apple, les autres navigateurs vous offrent les outils dont vous avez besoin pour concevoir selon les principes du « mobile-first ». Par exemple, vous pouvez choisir l’orientation de la fenêtre d’affichage, ainsi que l’appareil que vous souhaitez émuler :

La liste « Émulation de périphériques » dans Brave.
La liste « Émulation de périphériques » dans Brave.

Il y a deux autres fonctionnalités intéressantes ici. Tout d’abord, vous pouvez choisir une vitesse de réseau émulée. Safari ne propose aucune option à cet égard, et les navigateurs basés sur Chromium offrent un petit choix général d’étranglement du réseau :

Les options d'étranglement dans Brave.
Les options d’étranglement dans Brave.

C’est Firefox qui s’en sort le mieux, avec une sélection décente de réseaux parmi lesquels choisir :

Les options d'étranglement de Firefox.
Les options d’étranglement de Firefox.

Pour compléter le tout, vous pouvez également simuler le retour haptique et la reconnaissance des capteurs. C’est la fonction par défaut dans les navigateurs basés sur Chromium, et dans Firefox, vous devez l’activer :

L'option de retour haptique dans Firefox.
L’option de retour haptique dans Firefox.

Firefox est à la traîne dans ce domaine, car Chrome, Brave et d’autres affichent votre curseur sous la forme d’une petite superposition « en forme de doigt ». Cette fonctionnalité n’est parfaite pour aucun navigateur, mais c’est un moyen fiable de déterminer comment votre site pourrait se comporter sur d’autres appareils.

Ce type de test est souvent négligé par de nombreux développeurs web. Cela dit, il n’y a plus d’excuse maintenant que les navigateurs offrent des solutions complètes comme celle-ci.

Raccourcis clavier lors de l’utilisation de l’outil d’inspection des éléments

La plupart des raccourcis clavier des navigateurs sont souvent les mêmes d’un navigateur à l’autre. C’est une bonne nouvelle si vous passez d’un outil à l’autre pour tester vos sites.

Voici une liste rapide de certains des raccourcis les plus populaires (et les plus utiles) :

Ouvrez l’outil Inspecter l’élément Command + Shift + C pour Mac, Control + Shift + C pour Windows
Déplacement entre les nœuds Flèches haut et bas
Développer le nœud sélectionné Flèche droite
Réduire le nœud sélectionné Flèche gauche
Développer et réduire récursivement les nœuds Option + clic pour Mac, Alt + clic pour Windows
Se déplacer à l’intérieur d’un nœud pour travailler avec les attributs Entrée ou Return
Avancer dans les attributs d’un nœud Tabulation
Revenir en arrière dans les attributs d’un nœud Shift + Tab
Masquer ou afficher le nœud sélectionné H
Modifier et arrêter la modification d’un nœud en tant que HTML F2
Lorsqu’une propriété CSS est sélectionnée, sa valeur est incrémentée d’une unité. Flèche vers le haut
Lorsqu’une propriété CSS est sélectionnée, la valeur est décrémentée d’une unité. Flèche vers le bas
Lorsqu’une propriété CSS est sélectionnée, la valeur est incrémentée de dix. Shift + flèche vers le haut
Lorsqu’une propriété CSS est sélectionnée, la valeur est décrémentée d’une unité. Shift + Flèche vers le bas
Lorsqu’une propriété CSS est sélectionnée, la valeur est incrémentée de 0,1. Option + flèche vers le haut pour Mac, Alt + flèche vers le haut pour Windows
Lorsqu’une propriété CSS est sélectionnée, la valeur est décrémentée de 0,1. Option + flèche vers le bas pour Mac, Alt + flèche vers le bas pour Windows

 

Bien sûr, il existe de nombreux autres raccourcis. Mozilla dispose d’une documentation exceptionnelle pour Firefox, tandis que Chrome, Brave, Edge et d’autres partagent des raccourcis. Apple est moins utile en ce qui concerne les raccourcis pour les développeurs Safari, car il n’existe pas de liste définie dans ses pages d’aide. Nous vous conseillons plutôt d’utiliser l’outil d’inspection des éléments de votre navigateur pour modifier les pages web.

Plongez dans la fonctionnalité Inspecter l'élément du navigateur (et tous les outils qu'elle réserve) avec ce guide complet 🔎Click to Tweet

Résumé

Le développement web ne se résume plus au HTML. De nombreuses technologies sont impliquées. Même si vous vous en tenez à la trinité sacrée que sont le HTML, le CSS et le JavaScript, vous aurez toujours besoin de voir comment un site web rassemble tous ces composants.

L’outil Inspecter l’élément du navigateur est l’un des meilleurs moyens de regarder sous le capot d’un site web et de découvrir dans les moindres détails comment il fonctionne. S’il est fantastique en tant qu’outil d’apprentissage, il peut également vous aider à tester les modifications apportées à votre site et à découvrir comment il fonctionne sur différents appareils et réseaux mobiles.

Vous utilisez souvent Inspecter l’élément ? Si oui, quelles sont vos fonctionnalités préférées ? Partagez vos opinions dans la section des commentaires ! Je vous suggère delire la documentation officielle des outils de développement de Safari.


Économisez du temps et de l’argent et optimisez les performances de votre site avec :

  • Aide instantanée des experts en hébergement WordPress, 24/7.
  • Intégration de Cloudflare Enterprise.
  • Une audience mondiale avec 29 centres de données dans le monde entier.
  • Optimisation avec notre surveillance intégrée de performance d’applications (APM).

Tout cela et bien plus encore, dans un seul plan sans contrat à long terme, avec des migrations assistées et une garantie de remboursement de 30 jours. Pour trouver le plan qui vous convient, Découvrez nos plans ou contactez nous.