Utilisation de l’outil Inspecter du navigateur

L’utilisation du digital et surtout du web a pris une tournure intéressante. Beaucoup de chefs d’entreprises et de particuliers comprennent l’importance d’avoir un visage web pour une entreprise. C’est même ce qui améliore la relation client et entreprise. Mais un site web, il faut savoir le manier pour en profiter pleinement.

Saviez-vous qu’à l’aide d’un outil puissant, vous pouvez inspecter des pages web dans vos navigateurs ou afficher des informations sur leur configuration ? Internet est passionnant et offre de nombreuses possibilités de faire ce que l’on veut.

Le site est construit avec des lignes de code. Cependant, le résultat est de véritables pages avec des images, des vidéos, des polices, etc.

Pour modifier l’un de ces éléments ou voir en quoi il consiste, vous devez trouver la ligne de code spécifique qui le contrôle. Vous pouvez le faire avec un outil appelé « Inspecter » disponible dans votre navigateur web.

Si c’est la première fois que vous entendez ce nom, ne vous inquiétez pas, vous êtes au bon endroit. Dans ce guide, vous trouverez les meilleures informations sur l’outil « Inspecter ».

Présentation de l’outil Inspecter

Normalement, pour modifier des pages web, des outils d’édition spécifique comme Adobe Dreamweaver, CoffeeCup ou Bluefish sont utilisés. Cependant, comment procéder si l’on souhaite simplement faire un essai sur une page en direct ?

Eh bien, la première solution est de faire une copie de la page dans un outil d’édition et d’apporter des modifications comme l’on le souhaite. Le plus intéressant est qu’il est désormais possible de modifier notre page web à partir de n’importe quel navigateur web.

Pour cela, il existe un outil disponible sur le navigateur qui permet de découvrir l’aspect brillant de votre conception et de jeter un coup d’œil au code qui la sous-tend. Cette fonctionnalité est assez bien connue et largement utilisée. Ce qui est moins connu, c’est la possibilité d’apporter des modifications à ce code à la volée.

En accédant à cet outil, vous pouvez visualiser et même modifier le code source HTML et CSS du contenu web. La possibilité d’utiliser « Inspecter » dans les navigateurs est un moyen précis de voir les effets immédiats de la modification des propriétés de style sur un élément donné ou de détecter les problèmes de débogage liés à la programmation. Vous pouvez immédiatement suivre l’effet du changement de style sur n’importe quel élément et modifier votre fichier CSS en conséquence.

Disponibilité de l’outil Inspecter sur plusieurs navigateurs

Cet outil s’ouvre en premier lorsque nous lançons les outils de développement dans la plupart des navigateurs. En effet, Inspecter est l’un des outils de développement intégrés aux navigateurs Web Google Chrome, Firefox, Safari et Internet Explorer. Dans Firefox, comme sur Google Chrome, cette fonctionnalité porte le nom de « Inspecter ».

Les modifications possibles avec l’outil Inspecter

Les modifications que vous apportez ne seront pas enregistrées et n’affectent pas le flux en direct. Il s’agit donc d’un outil très puissant dont ont besoin de nombreux professionnels du numérique, par exemple :

• Un développeur web a parfois besoin de se comparer à ses collègues. Un programmeur novice peut apprendre à coder ses propres pages et chercher des exemples concrets.
• Un concepteur web peut analyser l’aspect et la convivialité d’une certaine partie d’un site web.
• Un spécialiste du marketing et du référencement, dans le cadre de son travail, peut garder un œil sur les mots-clés des concurrents. Plus encore, il peut essayer de voir si le chargement du site devient trop lent pour les utilisateurs.

Désormais, grâce à l’outil Inspecter, des fonctionnalités utiles nous permettent de donner à n’importe quel site l’apparence que nous souhaitons. Ils nous permettent d’inspecter le code CSS et HTML, ainsi que de modifier le CSS à la volée, en voyant les effets des changements en temps réel.

Les développeurs Front-end utilisent cet outil pour modifier l’apparence des pages web et expérimenter de nouvelles idées en ajoutant des modifications temporaires aux fichiers CSS et HTML du site.

Quelles sont les raisons de l’utilisation de l’outil ?

Si vous n’avez jamais jeté un coup d’œil au code d’un site Web par curiosité, vous vous demandez peut-être pourquoi vous devriez apprendre à utiliser Inspecter l’élément. Il y a plusieurs utilisations.

Modification du CSS ou des éléments DOM

La fonctionnalité « Inspecter » est très utile pour modifier le CSS. En effet, vous pouvez d’abord inspecter et découvrir quel CSS est présent, puis modifier et voir l’effet produit. Si tout va bien, vous pouvez simplement copier et coller les modifications dans le CSS sur votre serveur web.

En fait, l’outil inspecter l’élément sert à tester les modifications CSS sur le site et, si vous êtes satisfait des modifications, vous pouvez les reproduire sur le serveur.

Si vous travaillez directement sur le serveur, vous devez apporter des modifications, et tout le temps, enregistrer la page CSS, puis vérifier le résultat sur la page Web. Cela prend du temps. Mais avec « inspecter l’élément », c’est plus facile à faire.

En outre, chaque personne a un point de vue différent. Vous pouvez voir les éléments DOM, les attributs et les classes qui lui sont attribués où visualiser le CSS appliqué aux éléments DOM. Ceci est très utile lorsque vous voulez déboguer un problème de CSS.

Il est également possible d’appliquer des CSS à la volée pour observer à quoi ressembleraient les éléments de la page. Cela vous aide à prendre une décision rapide quant aux styles que vous souhaitez appliquer à votre élément.

De plus, avec inspecter l’élément, vous pouvez supprimer ou dupliquer le nœud DOM dans le navigateur lui-même pour un retour plus rapide sans modifier votre code. Vous pouvez aussi modifier temporairement vos nœuds DOM, toujours pour un retour visuel rapide.
C’est vraiment très utile !

Utilité pour les développeurs

Comme nous l’avons brièvement mentionné plus haut, cet outil peut être utilisé par plusieurs spécialistes pour apporter les modifications ou les corrections souhaitées. En tant que développeur web, l’utilisation de la fonction « Inspecter » permet de voir exactement comment le code HTML est formaté au moment de l’exécution.

C’est particulièrement important lorsqu’on utilise JavaScript pour configurer des parties de pages en fonction de l’interaction de l’utilisateur (par exemple, cliquer sur un bouton et obtenir plus de contenu).

Il n’est pas possible d’obtenir cela du HTML dynamique en utilisant « View Source », car cela ne vous montre que la source telle qu’elle est fournie par le serveur web. L’outil inspecter l’élément vous permet donc de voir la page telle qu’elle est à ce moment-là.

C’est également un excellent moyen d’apprendre à créer une page que vous voyez, mais pour laquelle vous ne comprenez pas comment le développeur a fait ce qu’il a fait. Tout développeur débutant ou intermédiaire peut apprendre beaucoup de choses rien qu’en regardant le code d’autres personnes.

En outre, « Inspecter l’élément » vous permet parfois d’enregistrer des images qui se trouvent derrière des éléments de navigation presque invisibles ou des images transparentes qui sont là pour vous empêcher d’enregistrer facilement une image.

Cela aide à éviter les éléments inefficaces ou irritants qui masquent le contenu d’une page (comme lorsqu’une page ne vous laisse pas passer tant que vous ne vous n’êtes pas connecté à sa page Facebook).

Vous pouvez simplement utiliser « Inspecter l’élément », puis ajouter une propriété style=”display:none”.

C’est également un excellent moyen de modifier l’apparence d’une page, s’il n’existe aucun moyen de la contrôler depuis cette dernière. Supposons que le texte d’un site web soit en rouge sur un fond noir et que vous éprouviez des douleurs aux yeux si vous le regardez trop longtemps.

Vous pouvez faire recours à « Inspecter l’élément ». Puis, dans le panneau CSS, changer la couleur du texte, ainsi que celle de l’arrière-plan pour quelque chose de plus facile à lire (comme le noir et le blanc).

Autres utilisations possibles

Cet outil est un atout pour de nombreux professionnels :

• Responsable marketing : Vous êtes curieux de savoir quels mots-clés vos concurrents utilisent dans leurs en-têtes de site, ou vous voulez savoir si votre site se charge trop lentement pour le test PageSpeed de Google ? Inspecter l’élément peut vous montrer les deux.
• Éditeur : Vous en avez assez de brouiller votre nom et votre adresse e-mail dans les captures d’écran ? Avec l’outil inspecter l’élément, vous pouvez modifier n’importe quel texte sur une page Web en une seconde.
• Agent de support : Vous avez besoin d’un meilleur moyen d’indiquer aux développeurs ce qui doit être corrigé sur un site ? Inspecter l’élément vous permet de modifier rapidement un exemple pour montrer ce dont vous parlez.

Comment fonctionne l’outil Inspecter ?

Chaque page web est structurée comme un arbre. C’est-à-dire qu’il y a un seul « nœud » ou « élément » au début. D’autres nœuds se succèdent et ainsi de suite. Si vous deviez le dessiner, il ressemblerait à un arbre !

Quels sont tous ces éléments ? Eh bien, les éléments sont soit fonctionnels (modification du titre de l’onglet, exécution de JavaScript, chargement de contenu), soit visuels (texte, images, boutons, etc.). Chaque élément, à l’exception du tout premier élément, le plus externe, a un parent (l’élément dans lequel il se trouve) et zéro ou plusieurs éléments enfants (les choses à l’intérieur).

Si vous appliquez ce principe avec la connaissance du style d’une page Web, vous pouvez créer un très beau site Web ! Cependant, vous découvrirez rapidement que les éléments de l’arbre qui vous intéressent sont perdus dans une mer d’autres éléments.

Regardez tous les éléments suspendus. Le fait d’ouvrir l’arbre avec les chevrons à gauche prendrait du temps et nécessiterait que vous sachiez comment la page est construite pour trouver ce que vous cherchez.

L’outil « Inspecter » vous permet de sélectionner l’élément qui vous intéresse en cliquant dessus dans la page. Vos outils de développement passeront alors à l’élément sur lequel vous avez cliqué.

Faites un clic droit sur n’importe quelle page web, puis cliquez sur Inspecter. Vous verrez les « entrailles » de cette page : son code source, les images et le CSS qui structurent sa mise en page, les styles de texte et les symboles qu’elle utilise.

Vous pourrez aussi visualiser le code JavaScript qui alimente l’animation, et ce n’est que la partie émergée de l’iceberg.

Vous pouvez voir combien de temps le site met à s’empiler, la capacité de transfert de données qu’il utilise et le ton spécifique de son contenu. Cliquez sur un élément quelconque et l’outil sélectionnera cet élément dans le DOM.

En coulisses, le navigateur effectue quelques tests de réussite. Il connaît la taille de tout ce qui se trouve dans le DOM et, grâce à la structure arborescente, il peut vérifier efficacement chaque élément qui pourrait croiser le curseur. Lorsqu’il trouve un élément plausible, il le met en évidence.

En outre, la façon dont l’outil effectue les tests de portée varie d’un navigateur à l’autre. Localement, vous pouvez le modifier à votre guise, changer les types d’entrée de valeur, vérifier les champs cachés, mais le serveur doit toujours valider l’entrée de l’utilisateur afin que vous ne puissiez pas envoyer n’importe quoi.

Dans le volet « Inspecter » qui s’ouvre, vous verrez l’élément en surbrillance. Il suffit de double-cliquer sur le texte que vous souhaitez modifier dans cette zone en surbrillance. Le changement apparaîtra immédiatement dans le navigateur après avoir appuyé sur la touche Entrée, mais bien sûr, ce n’est que temporaire.

Vous pouvez l’utiliser pour transformer tout ce dont vous avez besoin sur la page. Inspecter l’élément constitue une fonctionnalité idéale pour réaliser ce qui compte vraiment pour le web.

Il aide à démêler ce qui ne va pas dans vos paramètres régionaux, modélise ce à quoi ressemblerait un changement de ton et de style de texte, et vous protège des subtilités privées de Photoshop dans les captures d’écran. C’est un super pouvoir que vous n’aviez jamais réalisé que votre programme avait.

Autres utilisations de l’outil Inspecter

Comme son nom l’indique, cet outil peut servir à optimiser la vitesse de chargement de votre site Web. Vous pouvez analyser les performances d’exécution de la page Web. Le paramètre de capture vous permet de connaître les paramètres de mesure des performances. Vous pouvez trouver la liste déroulante d’étranglement dans la liste Réseau et CPU.

Pour le CPU, vous pouvez sélectionner le ralentissement 2X. L’outil « Inspecter » étrangle votre CPU pour le rendre deux fois plus lent que la normale. Cela vous aidera à vérifier les performances du site Web sur les appareils mobiles.

Vous trouverez également les boutons d’enregistrement et de rechargement dans cet onglet. Le bouton d’enregistrement lance le profilage des différents événements du site Web pendant cette période.

Après avoir cliqué sur Stop, vous trouverez les résultats et les temps de chaque événement. Par ailleurs, il affiche le profil d’utilisation de la mémoire, que la page utilise avec le gestionnaire de tâches de Chrome.

Vous pouvez repérer tous les problèmes qui affectent les performances de la page, par exemple, les fuites et les surcharges de mémoire. Les sites Web qui consomment plus de mémoire offrent de mauvaises expériences.

Comment utiliser l’outil Inspecter pour modifier des pages web ?

Accéder à l’outil sur Google Chrome et Firefox

Il est très facile de lancer l’outil « Inspecter ». Pour cela, procédez comme suit pour ouvrir l’outil de développement :

• Étape 1 : Allez sur le site Web que vous souhaitez inspecter.
• Étape 2 : Faites un clic droit sur le site Web et sélectionnez l’option « Inspecter ». Par ailleurs, vous pouvez utiliser le raccourci clavier Ctrl+Shift+I.

Vous pouvez également utiliser les raccourcis clavier (Ctrl+Shift+C ou Command+Shift+C pour Windows et Mac respectivement) pour accéder au menu Outils du développeur.

Dans la plupart des navigateurs, par exemple, Google Chrome, l’outil s’affiche par défaut sur le côté droit de l’écran. Toutefois, vous avez la possibilité de personnaliser l’écran et de décider où il apparaîtra.

Notez qu’il existe également une méthode spécifique à Google Chrome pour ouvrir les outils du développeur. Pour cela, cliquez sur les 3 points en haut à droite de la fenêtre Chrome. Lorsque vous déroulez la barre de menu, vous verrez une option « Plus d’outils ». Cliquez ensuite dessus. Vous verrez alors apparaître l’option Outils du développeur.

Pour pouvoir choisir l’emplacement de l’affichage de l’outil, cliquez sur les trois points verticaux et sélectionnez l’affichage que vous souhaitez.

• Étape 3 : Profitez maintenant de l’édition, du test et de la modification des éléments du panneau.

La première chose à remarquer concernant la fenêtre de l’outil inspecter l’élément est qu’elle est divisée en deux volets. Sur le côté gauche (Google Chrome) ou en haut (Firefox) se trouve une représentation arborescente de la structure imbriquée du document HTML. Elle est similaire aux dossiers et fichiers dans des programmes tels que Finder (Mac) ou Windows Explorer.

Sur le côté droit ou en bas respectivement pour les navigateurs Chrome et Firefox se trouve une série d’onglets. Ils sont ouverts sur Styles et montrent quels styles sont appliqués à l’élément sélectionné et comment le navigateur a calculé la boîte contenant l’élément.

En sélectionnant un élément dans l’arborescence et en passant la souris dessus, nous pouvons voir que la zone correspondante de la page Web est mise en évidence en bleu. Par ailleurs, une petite boîte jaune indique aussi les dimensions (largeur x hauteur) de la boîte contenant l’élément.

Nous pouvons également remarquer en haut que l’ensemble du document est mis en évidence, en sélectionnant l’élément (dans la fenêtre Elements).

Passez quelques minutes à naviguer dans l’arborescence du document et à mettre en évidence les différentes balises pour voir la case correspondante sur la page Web.

Accéder à l’outil sur Safari

Safari suit le même chemin, mais avant de pouvoir utiliser l’outil, vous devez accéder au menu des paramètres de Safari. Dans le coin supérieur gauche de votre écran, sélectionnez Préférences, puis cochez la case « Afficher le menu du développeur » dans la barre de menu. Une fois que vous avez fait cela, utilisez les options suivantes :

• Faites un clic droit sur n’importe quelle zone de la page Web (y compris les zones vides) et sélectionnez « Inspecter » dans le menu.
• Allez dans la barre de menus et cliquez sur Développer, puis sélectionnez Afficher l’inspecter Web dans le menu déroulant.

Accéder à l’outil sur Internet Explorer

Internet Explorer fournit également des outils de développement qui permettent d’utiliser la fonctionnalité Inspecter les éléments :

• Cliquez avec le bouton droit de la souris sur la page et choisissez Inspecter l’élément dans le menu contextuel.
• Accédez au Panneau de configuration en cliquant sur l’icône d’engrenage en haut à droite de la fenêtre du navigateur ou en appuyant sur Alt+X. Sélectionnez F12 Outils du développeur dans le menu déroulant.

Comment modifier l’affichage d’une page web avec l’outil Inspecter ?

Cas d’utilisation 1 : Changement de la couleur d’un élément

L’un des cas d’utilisation les plus courants consiste à essayer de trouver la couleur parfaite pour un élément quelconque de la page Web. Si vous n’êtes pas familier avec inspecter l’élément ou son pouvoir, suivez les étapes suivantes :

• Écrivez le code dans l’éditeur ;
• Recherchez la couleur dans un sélecteur de couleurs ;
• Rééditez le code et sauvegardez-le ;
• Vérifiez le résultat dans un navigateur ;
• Recommencez si cela n’est pas satisfaisant.

Cas d’utilisation 2 : Définition de points d’arrêt JavaScript

La définition de points d’arrêt dans le code JavaScript interrompt l’exécution du code afin que nous puissions vérifier les valeurs à ce moment précis. Cela devient essentiel lorsque AJAX est appliqué au code. Si vous ne connaissez pas cette fonction dans « inspecter l’élément», vous devez faire console.log chaque fois que vous voulez vérifier une valeur et ensuite l’analyser. Toutefois, cette opération peut être simplifiée en ouvrant les outils de développement de Chrome.

Cas d’utilisation 3 : Changer la police

Si vous avez déjà cliqué une fois sur l’icône de la souris au-dessus d’un carré pour effectuer la modification ci-dessus, vous avez maintenant accès à un raccourci. Cliquez sur les mots que vous voulez modifier sur la page Web, puis sélectionnez “Inspecter” dans le menu contextuel, et vous verrez la phrase sélectionnée mise en évidence dans le panneau des outils de développement. Vous pouvez voir un sous-panneau à droite de cette phrase.

Chaque onglet supplémentaire (style, calculé, écouteur d’événements) peut modifier l’apparence et la police de la phrase sur la page. Les styles vous permettent de modifier l’alignement dans la fonction d’alignement du texte. Double-cliquez sur le mot qui décrit l’alignement et tapez l’alignement souhaité.

Cas d’utilisation 4 : Modification d’une image

Pour modifier une image sur une page web, vous pouvez d’abord copier le lien vers l’image souhaitée. Ouvrez ensuite Inspecter l’élément et sélectionnez l’image originale que vous devez modifier. Dans le panneau Styles, double-cliquez sur le lien vers l’URL de l’arrière-plan et collez le nouveau lien de l’image. Le processus est le même avec un GIF ou une vidéo. Il suffit d’ajouter le lien.

Cas d’utilisation 5 : Vérification des dimensions des éléments

Il est parfois difficile de trouver une dimension parfaite pour un élément de page web. Une petite modification de la taille d’un élément peut donner lieu à une page Web mal gérée, avec des éléments qui se chevauchent ou qui sortent complètement de la fenêtre d’affichage. Une fois de plus, comme nous l’avons mentionné dans la section sur le changement de couleur (cas d’utilisation 1). Vous pouvez faire un « hit and run » en changeant plusieurs fois les valeurs du code, en les sauvegardant.

Conclusion

Féliciations ! Vous savez maintenant comment utiliser l’outil Inspecter ! 😁 Lorsque vous accédez à une page web via votre navigateur, ce que vous voyez est l’aboutissement d’un tas de code, mais ce n’est pas une raison pour être intimidé. Avec l’outil Inspecter l’élément, vous pouvez modifier des pages web, son code ou profiter directement de sa fonctionnalité, où le survol de l’élément affiche ses dimensions. Inspecter l’élément est un outil essentiel pour les développeurs et les étudiants afin d’exécuter des tâches simples, et il peut aussi être très amusant de jouer avec.

Besoin de créer une boutique en ligne rapide et sécurisée ?

LWS vous conseille sa formule d’hébergement e-commerce en promotion à -40% (offre à partir de 2,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l'offre

Vous avez des questions ou des remarques vis-à-vis de l’outil Inspecter ? N’hésitez pas à nous en faire part en commentaires !