Que sont Chrome Devtools

Vous pouvez parfois avoir des ajustements à votre site Web et vérifier les résultats simultanément. Dans ce but, Google a créé un utilitaire préinstallé dans le navigateur Google Chrome. Chrome Devtools ou Outils de développement chromé permettre aux utilisateurs de réparer les bogues dans leur code sans quitter l'onglet actuel ouvert.

Que sont Chrome Devtools

Chrome Devtools est un ensemble d'outils conçus pour vous aider dans le développement frontal. Vous pouvez améliorer votre site Web en abordant les erreurs de style et en évaluant les changements en temps réel. Apprenez à utiliser Chrome Devtools pour utiliser cet outil comme bac à sable pour expérimenter les styles et le code du site Web. Vous n'êtes pas obligé de faire une configuration supplémentaire car Chrome Devtools est intégré dans votre navigateur Web. Ces outils de développeur sont fortement recommandés car ils vous aident à modifier le style de votre site Web, à terminer les opérations liées à DOM, à déboguer JavaScript et à améliorer la vitesse du site Web.

Maintenant, comprenons peu de choses avant de passer à l'utilisation de Chrome Devtools:

• Les navigateurs Web exécutent Javascrip, CCS, et Html, Ce sont les trois langues que Chrome Devtools est destinée à utiliser.
• Tout le monde peut manipuler le code du site Web à l'aide de Chrome Devtools. Les modifications appliquées ne seront consultées que dans votre navigateur et disparaîtront que vous actualisez bientôt cette page Web. Ces Devtools vous aident à déterminer quels changements sont requis. Vous devrez accéder au code back-end pour rendre ces modifications permanentes.

Pourquoi tu devrais utiliser Chrome Devtools

En permettant aux utilisateurs de modifier les sites Web directement dans le navigateur Web, Google Chrome Devtools vous fait gagner du temps, et nous ne pouvons pas nier ce fait. Pour justifier la déclaration, consultez la liste ci-dessous des aspects Chrome Devtools qui peuvent vous aider à améliorer votre développement Web:

• Efficacité: Chrome Devtools est intégré dans votre navigateur Web, vous fournissant la facilité de modification des sites Web ou du contenu sans changer d'onglet.
• Panneaux: En utilisant Chrome Devtools, vous pouvez jouer avec divers éléments de page et extraire les informations, mais gardez à l'esprit que toutes les modifications que vous apportez seront perdues si vous fermez votre onglet sans les stocker.
• Optimisation: Vous pouvez également exécuter des audits par lesquels vous pouvez obtenir un rapport lié aux performances. Sur le navigateur Web, vous obtiendrez des suggestions sur l'amélioration de la vitesse de chargement du site.
• Déboguer JavaScript: L'utilisateur peut identifier les erreurs en faisant une pause de code de site Web en cours d'exécution et en identifiant l'instant exact lorsque le script ne fonctionne pas correctement.

Comment ouvrir Chrome Devtools

Les outils de développeur Chrome sont accessibles à l'aide de raccourcis clavier:

• Presse "Ctrl + Shift + J”Pour ouvrir Chrome Devtools sur les fenêtres, Chromebook, et Linux.
• Pour macos, Frappez le «Cmd + shift + j" ou "Cmd + shif + c»Raccourci.

Utilisation du menu de Chrome:
Explorer "Plus d'outils">"Outils de développement"Dans le menu Chrome. Cela vous mènera à la fenêtre Chrome Devtools:

La fenêtre des outils du développeur a trois onglets en haut, plus six autres que vous pouvez voir en cliquant sur le >> Signe à côté d'eux:

Voici les noms de l'onglet affichant dans notre panneau: éléments, console, sources, réseau, performances, mémoire, application, sécurité, phare, éditeur de cookies et Adblock:

Onglet des éléments dans Chrome Devtools

Le panneau Chrome Devtools s'ouvre sur le «Éléments”Tab par défaut. Il affiche le HTML et le CSS en ligne utilisé pour développer la page Web que vous consultez:

Onglet Console dans Chrome Devtools

L'onglet Console gère JavaScript. Il fournit des détails liés aux éléments présents sur une page Web. Vous pouvez utiliser la console pour écrire du code JavaScript pour l'interaction de la page Web et vous envoyer des messages. Ces messages apparaîtront dans la fenêtre de la console lorsque le JavaScript exécutera:

Onglet Sources dans Chrome Devtools

L'onglet Sources s'affiche et vous permet d'inspecter tous les fichiers utilisés pour créer le site Web:

Onglet réseau dans Chrome Devtools

L'onglet réseau affiche toutes les charges pour l'URL actuelle que vous affichez. Vous obtenez des informations détaillées sur les objets de chargement, y compris la durée de la recherche DNS, la connexion initiale, SSL, etc. Consultez l'image fournie ci-dessous pour connaître les attributs d'objets chargés:

Onglet d'application dans Chrome Devtools

L'onglet Application affiche le contenu de votre stockage de navigateur, y compris les bases de données de navigateur telles que le stockage local, le Web SQL, etc. Il vous permet également d'avoir un contrôle fin sur vos cookies:

Onglet de sécurité dans Chrome Devtools

L'onglet de sécurité fournit des informations de sécurité de base, telles que l'état TLS d'un site Web et son certificat HTTPS:

Tab phare dans Chrome Devtools

Lighthouse aide l'utilisateur Chrome Devtools à générer des rapports concernant la structure et la fonctionnalité du site Web, ce qui aide les développeurs à améliorer les performances:

Comment utiliser Chrome Devtools pour inspecter les balises de page

Les balises H1 et H2 sont parmi les parties les plus importantes du référencement sur la page. Une fois que vous avez compris les pages avec une image non optimisée comme H2 ou pages avec quatre balises H2, vous comprendrez la complexité de cette question.

Vous pouvez utiliser le chrome Devtools pour inspecter les balises de page. Pour ce faire, appuyez sur "Ctrl-f" ou "Cmd + f"Pour rechercher dans l'onglet Elements, et tapez"h2«Pour voir vos balises de page:

Comment utiliser Chrome Devtools pour modifier CSS

Chrome Devtools vous permet de modifier CSS d'une page directement dans votre navigateur. Vous pouvez expérimenter avec des polices, des schémas de couleurs et tout ce qui est défini par CSS:

Vous pouvez également de nouveaux styles aux pages Web à l'aide de Devtools:

Conclusion

Chrome Devtools est une boîte à outils complète de développeur qui est préinstallé avec le navigateur Chrome. Ces outils permettent aux utilisateurs de modifier les pages Web, d'identifier les problèmes et de créer de meilleurs sites Web en temps réel. Vous pouvez bénéficier de Chrome Devtools même si vous n'êtes pas un développeur Web. Cet article a discuté de Chrome Devtools, de ses onglets, et comment utiliser ces Devtools sur votre navigateur Web. Maintenant, n'hésitez pas à explorer Chrome Devtools.