Conseils d'utilisation du navigateur Inspect Element de Google Chrome

Table des matières:

Conseils d'utilisation du navigateur Inspect Element de Google Chrome
Conseils d'utilisation du navigateur Inspect Element de Google Chrome

Vidéo: Conseils d'utilisation du navigateur Inspect Element de Google Chrome

Vidéo: Conseils d'utilisation du navigateur Inspect Element de Google Chrome
Vidéo: Gagner 1,3 MILLION d’XP en 10 minutes ! 😍 - YouTube 2024, Novembre
Anonim

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

Inspecter l'élément de Google Chrome

1] Trouver des fichiers JavaScript / Media cachés

Image
Image

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

2] Obtenir le code de couleur HEX / RGB dans Chrome

Image
Image

Parfois, nous aimons une couleur et souhaitons connaître son code de couleur. Vous pouvez facilement trouver le code de couleur HEX ou RGB utilisé sur une page Web particulière, à l'aide de l'option native de Google Chrome. Cliquez avec le bouton droit sur la couleur, puis cliquez sur Inspecter. Dans la plupart des cas, vous aurez le code de couleur sur le côté droit avec d'autres CSS. Si vous ne le voyez pas, vous devrez peut-être utiliser un logiciel de sélection de couleurs gratuit.

POINTE: Jetez également un coup d'œil à ces outils en ligne Color Picker.

3] Obtenez des conseils pour améliorer les performances des pages Web

Image
Image

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, allez à Audits onglet, et assurez-vous L'utilisation du réseau, Performance de la page Web, et Reload Page et Audit on Load sont sélectionnés. Puis cliquez sur Courir bouton. Il rechargera la page et vous montrera des informations pouvant être utilisées pour accélérer la page. Par exemple, vous pouvez obtenir toutes les ressources dont l’expiration de la mémoire cache n’est pas terminée, JavaScript pouvant être combiné dans un seul fichier, etc.

4] Vérifier la réactivité

Image
Image

Rendre une page Web réactive est crucial, de nos jours. Il existe de nombreux outils permettant de 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, ainsi qu'à vérifier son apparence sur un appareil mobile particulier. Ouvrez un site Web, obtenez Inspecter l'élément onglet, cliquez sur le mobile bouton, définissez la résolution ou sélectionnez le périphérique souhaité pour tester la page Web.

5] Modifier le site Web en direct

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

Inspect Element de Google Chrome est un véritable compagnon pour tous les développeurs Web. Peu importe que vous développiez un site Web d’une page ou un site Web dynamique, vous pouvez certainement utiliser ces conseils.

Conseillé: