Si vous regardiez les outils pour les développeurs de Chrome, appelé aussi outil d’inspection de Chrome, sans savoir comment il fonctionne, vous ne verriez qu’un ensemble de codes et de panneaux déroutants. Vous penseriez probablement que cela a plus de sens pour un programmeur, et vous auriez en partie raison.
Mais, ce n’est pas forcément le cas, et dans cet article, nous allons voir comment cet outil peut vous être utile, même si vous n’avez jamais écrit une seule ligne de code de votre vie.
Remarque : vous n’avez pas besoin d’être développeur pour utiliser l’outil d’inspection de Chrome, mais connaître les bases du langage HTML peut vous aider. Le HTML est un langage simple qui permet de créer des pages Web à l’aide de balises. Apprendre les bases du langage HTML ne prend que quelques minutes.
Trouver des liens, des fichiers multimédias et d’autres ressources
Vous souhaitez trouver des liens, des images et des fichiers audio présents sur des sites Web ? L’outil d’inspection de Chrome peut vous aider. Il est utile lorsque vous souhaitez télécharger des images ou des vidéos sur lesquelles vous ne pouvez pas cliquer avec le bouton droit de la souris ou trouver la source du contenu intégré.
Les liens sont généralement placés dans des balises contenant un « a », les images dans des balises « img » et les vidéos dans des balises « video ». Vous pouvez les voir tous dans le volet Elements.
- Pour utiliser cet outil, cliquez avec le bouton droit de la souris sur n’importe quel élément d’une page Web, tel que du texte, des images ou des liens, puis sélectionnez Inspecter dans le menu.
- Vous pouvez également appuyer sur Ctrl + Maj + C (sur Windows) ou Cmd + Maj + C (sur Mac) pour ouvrir l’outil.
- Appuyez ensuite sur Ctrl + F (sur Windows) ou Cmd + F (sur Mac) pour rechercher des éléments spécifiques.
Personnaliser l’apparence d’un site Web
Vous pouvez également personnaliser temporairement l’apparence d’un site Web à l’aide de l’outil d’inspection Chrome. Les modifications que vous apportez seront temporaires, car cet outil est un environnement isolé (communément appelé « bac à sable « ). Vos modifications n’auront aucune incidence sur le site principal, vous n’avez donc pas à craindre de causer des dommages.
Remarque : pour cette section, vous devrez connaître les bases du CSS (Cascading Style Sheets), un autre langage simple qui décrit l’apparence des éléments d’une page Web. Encore une fois, vous n’avez pas besoin d’être développeur. Cette introduction pratique au CSS par Mozilla vous permettra de vous familiariser avec ses concepts fondamentaux en 15 minutes.
Il existe de nombreux cas où de petites modifications peuvent améliorer l’apparence d’un site Web. Par exemple, si la police est trop petite, vous pouvez la modifier. Vous pouvez même changer la couleur d’arrière-plan pour une couleur plus sombre dans des conditions de faible luminosité. Si une bannière vous dérange, vous pouvez la désactiver.
- Examinons le problème d’une bannière gênante. Si vous voulez la supprimer, vous pouvez inspecter l’élément sur la page Web et placer la ligne de code suivante dans son volet Styles à droite de l’interface :
display: none;Cet outil est très intuitif, ne nécessite aucune expertise en codage, et vous pouvez facilement utiliser une feuille de référence CSS ou l’IA pour apporter les modifications nécessaires. De plus, il offre la coloration syntaxique et l’autocomplétion pour vous assurer que vous écrivez un code qui fonctionne.
Découvrir du contenu caché
Tout comme vous pouvez masquer du contenu sur un site Web, vous pouvez également le révéler lorsqu’il a été masqué. Il peut s’agir de liens, de médias ou d’autres types de contenu. Cela peut s’avérer utile si, par exemple, vous souhaitez voir un extrait d’article masqué derrière un paywall ou activer des fonctionnalités cachées telles que des boutons et des champs de formulaire afin de voir à quoi ils servent.
- Voici des exemples de code que vous pouvez rechercher et supprimer dans le panneau Styles afin de voir le contenu caché :
display: none;
visibility: hidden;
opacity: 0;
Une partie du contenu peut être masquée à l’aide de JavaScript, qui est un peu plus difficile à modifier si vous n’êtes pas développeur.
Diagnostiquer les problèmes d’un site Web
Si un site Web est lent, il peut parfois être difficile de diagnostiquer le problème. Vous pouvez utiliser l’outil d’inspection Chrome pour déterminer si le problème provient du site ou de votre réseau.
- Pour ce faire, ouvrez l’outil d’inspection Chrome et sélectionnez l’onglet Network. Vous pouvez agrandir le volet s’il n’est pas visible afin d’afficher les autres onglets. Vous verrez alors tout ce que la page charge, y compris le code HTML, le CSS, les scripts et les médias.
- Recherchez les éléments surlignés en rouge et vérifiez la colonne Status pour voir s’il y a un code d’erreur (par exemple, 404 ou 500). Vous pouvez ensuite contacter l’administrateur du site Web et lui signaler l’erreur et les éléments concernés.
- Vous pouvez également extraire le journal réseau en cliquant sur l’icône de téléchargement dans le menu situé sous les onglets. Vous pouvez ensuite l’envoyer à l’administrateur afin qu’il puisse résoudre le problème et rétablir le bon fonctionnement du site.
Si le problème provient de votre réseau, vous devez le résoudre. S’il est lent, vous pouvez prendre des mesures pour accélérer votre connexion Internet.
Apprendre le développement web
Si vous souhaitez devenir développeur web, l’outil d’inspection Chrome est un excellent outil d’apprentissage. Il vous permettra notamment de comprendre la structure des sites Web.
- Par exemple, l’onglet Elements révèle la structure HTML du site Web. Il montre comment des balises courantes telles que « div », « p » ou « a », ainsi que le CSS, sont utilisées pour créer des mises en page.
De plus, comme mentionné précédemment, l’outil d’inspection vous permet d’apporter des modifications temporaires au code HTML, au CSS et à la mise en page d’un site Web. Cela constitue un excellent environnement pour s’entraîner, en particulier sur les sites Web volumineux dont le code est complexe. Expérimenter dans cet environnement est un bon moyen de voir en temps réel le résultat de vos modifications et de renforcer vos acquis.
Conclusion
L’outil d’inspection Chrome peut sembler intimidant, en particulier pour ceux qui ne savent pas coder. Mais pas besoin d’être un expert en programmation pour l’utiliser. Et si vous êtes prêt à faire un petit effort pour comprendre les bases du HTML et du CSS, cet outil peut devenir indispensable pour améliorer votre confort de navigation sur le Web.
