Comment utiliser l’outil « Inspecter l’élément » de votre navigateur pour modifier des pages web ?

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.

Consultez notre guide vidéo sur la façon de modifier un site web avec 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.

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 :

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 :

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.

Visite du panneau Inspecter l’élément

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 :

• Inspecteur – Cet outil est appelé Éléments dans certains navigateurs. Il s’agit de l’écran principal de l’outil Inspecter l’élément et il vous montre le code de la page, ainsi que le CSS spécifique à l’élément. Vous y trouverez également des détails sur le « système de grille » d’un site et d’autres aspects.
• Console – Il s’agit d’un journal d’avertissement frontend pour un site, et c’est un endroit où vous pouvez également saisir des extraits de code pour effectuer un test rapide d’une idée.
• Réseau – Ici, vous verrez les requêtes faites vers et depuis un serveur, comme toutes les requêtes POST et GET.
• Performances – Bien entendu, un site doit être performant. À ce titre, il existe un outil dédié pour vous aider à évaluer certaines mesures essentielles du site. Certains navigateurs sont plus performants que d’autres.
• Mémoire – Ce panneau vous permet de voir comment un site utilise la mémoire. Là encore, certains navigateurs proposent des mesures détaillées.
• Application – Dans ce panneau, vous pouvez voir toute une série d’informations sur le cache du site, les services d’arrière-plan, etc.

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

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 :

• Vous pouvez consulter d’autres sites web afin de vous inspirer pour la manière de travailler sur le vôtre.
• Vous apprendrez comment d’autres sites ou développeurs réalisent des techniques spécifiques.
• Il vous donne une licence pour expérimenter sur votre site sans conséquences.
• Dans la plupart des outils Inspecter l’élément, vous avez la possibilité de déboguer les sites.
• Il est bon pour en savoir plus sur le site web en question.

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.

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.

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.

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é :

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 :

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é :

À 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 :

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 :

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 :

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

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 :

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é :

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 :

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.

1. 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 :

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 :

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 :

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

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

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 :

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 :

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 :

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

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.

2. 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’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 :

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 :

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 :

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 :

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.

3. 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 ».

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 :

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 :

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.

4. É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 :

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

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 :

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 :

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 :

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

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 :

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.

5. 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 de dix.	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.

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.