Qu’est-ce qu’Inspect Element et Developer Tools?
Inspect element (ou Developer Tools) est comme l’outil magique des navigateurs modernes. Il suffit de faire un clic droit sur n’importe quelle page, de cliquer sur inspecter et voilà ! Ici, vous verrez une description détaillée de la page comprenant les informations suivantes :
- Tout le code HTML qui structure le site web
- Les codes CSS qui stylisent et façonnent la structure
- Les codes JS qui alimentent les animations
- Stats. sur le temps de chargement de la page
- La taille des fichiers de tous les actifs
- L’ordre de chargement des fichiers
- Une page de console pour voir les problèmes ou les messages cachés d’un développeur malicieux.
Tout ce que vous devez savoir sur la page se trouve ici ! Et voulez-vous connaître la meilleure partie ? Vous n’avez pas besoin d’être un geek ou un développeur (ou les deux) pour l’utiliser. C’est pour tout le monde ! Vous êtes peut-être un designer et vous voulez savoir comment votre design se présente sur un appareil mobile ou vous voulez peut-être simplement voir une nuance de couleur différente sur votre nouvel en-tête et changer la taille du texte pour le rendre plus visible. Plus important encore, vos modifications ne peuvent pas causer de problèmes ou casser quoi que ce soit, car toutes les modifications ne sont appliquées que de votre côté.
Si vous êtes propriétaire d’un site Web, vous voudrez peut-être connaître la vitesse de votre site, juste pour voir si vos clients ont des problèmes pour accéder à votre site Web. Ou peut-être, si vous êtes un spécialiste du marketing, vous voudrez connaître les mots-clés utilisés par vos concurrents. Vous avez compris – l’élément d’inspection est une mine d’or de détails à laquelle tout le monde peut accéder ! Dans cet article, je vais fournir quelques conseils utiles sur la façon dont l’élément inspect peut être bénéfique pour votre site.
Comment l’élément inspect peut être bénéfique pour votre site?
Imaginons que vous voulez modifier une partie de votre texte, tester une image ou un style sur votre site Web, mais que vous ne voulez pas créer un environnement de mise en scène juste pour cela. Vous ne voulez pas non plus le servir aux visiteurs. Aucun problème, c’est là que les outils pour développeurs peuvent entrer en jeu.
Voici ce que vous pouvez faire avec les outils pour développeurs (élément d’inspection) :
- Changer n’importe quel texte
- Changer les couleurs
- Trouver les erreurs sur votre site
- Tester votre site en mode responsive
- Surveiller la vitesse de chargement des fichiers
.
Changer les textes, Propriétés de style et ajout de nouveaux styles
Pour modifier les textes, vous pouvez simplement double-cliquer sur l’élément dans l’outil Développeur. Vous pourrez alors modifier le texte directement. Cependant, la modification des couleurs et l’ajout de nouveaux styles nécessitent des approches différentes. Pour modifier les styles, vous devez trouver les bonnes classes CSS sur le côté droit des outils Developer.
Ajouter de nouveaux styles pour les éléments est également facile. Vous pouvez simplement cliquer sur la zone « element.style » qui se trouve sur le côté droit des outils de développement (zone supérieure) et vous pourrez alors y ajouter vos propriétés CSS.
Trouver les erreurs sur Developer Tools
Vous pouvez facilement voir les erreurs affichées sur Developer Tools si vous êtes aux prises avec un problème que vous ne parvenez pas à définir. Vous pourrez voir toutes les erreurs sur l’onglet Console dans Developer Tools. S’il n’y a pas d’erreur et que tout fonctionne parfaitement, alors vous verrez le texte » ready for rock » (uniquement dans Artbees Themes).
Mode réactif des outils du développeur
Vous pouvez activer le mode réactif dans les outils du développeur en cliquant sur l’icône « Téléphone et tablette » qui est placée dans le coin supérieur droit des outils du développeur. Après avoir cliqué, vous serez en mesure de voir votre site Web dans n’importe quelle dimension. C’est une fonctionnalité assez impressionnante qui vous permet de tester votre site Web dans différentes dimensions.
Surveiller les sources sur Developer Tools
Vous pouvez également surveiller les sources de votre site Web sur Developer Tools comme les images, les fichiers javascript, les fichiers CSS, les vidéos, etc… Vous pouvez ensuite voir toutes les métriques sur l’onglet Réseau dans Developer Tools.
Passez le capot de votre site Web avec Inspect Element
Je veux bousculer la perception selon laquelle seul un développeur féru de technologie peut naviguer dans tous les détails qui constituent le cadre de votre site Web. Ne sous-estimez pas ce que vous pouvez faire avec Inspect Element et à quel point les détails à l’intérieur peuvent être instructifs vous permettant de voir ce qui se cache réellement derrière la conception de votre site web.