Conseils sur l'utilisation du navigateur Inspect Element du navigateur Google Chrome

Google Chrome est conçu non seulement pour les internautes réguliers, mais également pour les développeurs Web, qui créent souvent un site Web, conçoivent des blogs, etc. L' option Inspecter l'élément(Inspect Element ) ou Inspecter de (Inspect )Google Chrome aide les utilisateurs à trouver des informations sur un site Web qui sont masquées. . Voici quelques conseils sur l'utilisation du navigateur Inspect Element de Google Chrome pour PC Windows(Windows PC) .

Inspecter l'élément de Google Chrome

1] Find hidden JavaScript/Media files

Inspecter l'élément de Google Chrome

De nombreux sites Web affichent des fenêtres contextuelles si le visiteur reste sur la page Web pendant plus de 15 ou 20 secondes. Ou, plusieurs fois, une image, une publicité ou une icône s'ouvre après avoir cliqué quelque part au hasard. Pour trouver ces fichiers cachés sur une page Web, vous pouvez utiliser l' onglet Sources de (Sources)Inspect Element . Il affiche une liste arborescente sur le côté gauche qui peut être explorée.

2] Get HEX/RGB color code in Chrome

Inspecter Element of Google Chrome trucs et astuces

Parfois, nous pouvons aimer une couleur et vouloir connaître son code couleur. Vous pouvez facilement trouver le code de couleur HEX ou RVB(RGB) utilisé sur une page Web particulière, en utilisant l'option native de Google Chrome . Faites un clic droit(Right-click) sur la couleur et cliquez sur Inspecter(Inspect) . La plupart du temps, vous obtiendrez le code couleur sur le côté droit avec d'autres CSS . Si vous ne le voyez pas, eh bien, vous devrez peut-être utiliser un logiciel de sélection de couleurs gratuit.

ASTUCE(TIP) : Jetez également un coup d'œil à ces outils en ligne Color Picker(Color Picker online tools) .

3] Obtenez des conseils d'amélioration des performances des pages Web(3] Get web page performance improvement tips)

Inspecter Element of Google Chrome trucs et astuces

Tout le monde aime atterrir sur un site Web qui s'ouvre rapidement. Si vous concevez votre site Web, vous devez toujours garder cela à l'esprit. Il existe de nombreux outils pour vérifier et optimiser la vitesse de chargement des pages. Cependant, Google Chrome est également livré avec un outil intégré qui permet aux utilisateurs d'obtenir des conseils pour améliorer la vitesse de chargement du site Web. Pour accéder à ces outils, accédez à l' onglet Audits et assurez-vous que Network Utilization , Web Page Performance , Reload Page and Audit on Load sont sélectionnés. Cliquez ensuite sur le bouton Exécuter(Run ) . Il rechargera la page et vous montrera des informations qui peuvent être utilisées pour rendre la page plus rapide. Par exemple, vous pouvez obtenir toutes les ressources qui n'ont pas d'expiration de cache, JavaScriptqui peuvent être combinés en un seul fichier, et ainsi de suite.

4] Vérifier la réactivité(4] Check responsiveness)

Inspecter Element of Google Chrome trucs et astuces

Rendre une page web responsive est crucial, de nos jours. Il existe de nombreux outils qui peuvent vérifier si votre site est complètement réactif ou non. Cependant, cet outil de Google Chrome aide les utilisateurs à savoir si le site est réactif ou non et à vérifier à quoi il ressemblerait sur un appareil mobile particulier. Ouvrez n'importe quel site Web, accédez à l' onglet Inspecter l'élément , cliquez sur le bouton (Inspect Element )mobile , définissez la résolution ou sélectionnez l'appareil souhaité pour tester la page Web.

5] Modifier le site Web en direct(5] Edit live website)

Inspecter Element of Google Chrome trucs et astuces

Supposons que vous créez une page Web, mais que vous ne comprenez pas le jeu de couleurs ou la taille du menu de navigation, le contenu ou le rapport de la barre latérale. Vous pouvez modifier votre site Web en direct à l'aide de l' option Inspecter l'élément de (Inspect Element)Google Chrome . Bien que vous ne puissiez pas enregistrer les modifications sur un site Web en direct, vous pouvez effectuer toutes les modifications afin de pouvoir les utiliser davantage. Pour ce faire, ouvrez Inspect Element , sélectionnez la propriété HTML dans la partie gauche et modifiez le style dans la partie droite. Si vous apportez des modifications au CSS , vous pouvez cliquer sur le lien du fichier, copier l'intégralité du code et le coller dans le fichier d'origine.

Inspect Element de Google Chrome est un véritable compagnon de chaque développeur Web. Peu importe que vous développiez un site Web d'une page ou un site Web dynamique, vous pouvez certainement utiliser ces conseils.



Inès Muller

About the author

Je suis un développeur Web avec une expérience de travail avec Windows 11 et 10. J'utilise également Firefox depuis de nombreuses années et je suis devenu assez compétent dans l'utilisation de la toute nouvelle console de jeu Xbox One. Mes principaux intérêts résident dans le développement de logiciels, en particulier dans le développement Web et mobile, ainsi que dans la science des données. Je connais très bien divers systèmes informatiques et leur utilisation, je peux donc fournir des commentaires impartiaux sur divers programmes ou services que vous pourriez utiliser.


Related posts