À quoi servent Chrome DevTools?

Chrome DevTools est un ensemble d'outils de création et de débogage de sites Web intégrés à Google Chrome. Bien sûr, nous pouvons également les utiliser dans sa version open source; Chrome.

Il est possible d'accéder aux outils Chrome pour les développeurs en appuyant sur la combinaison de touches Ctrl + Maj + I, également en survolant un élément et en cliquant avec le bouton droit sur Inspecter.

Composants

Lorsque nous ouvrons Chrome DevTools, nous voyons que u apparaîtn panneau à droite de la page que nous parcourons. Pour sa part, ce panneau eIl est divisé en onglets correspondant à chacun des outils. À leur tour, les outils sont divisés en sections.
Les sections sont:

• Éléments: affiche les différents composants de la page.
• Console: vous permet d'exécuter des diagnostics pendant le développement ou d'interagir avec le code Javascript comme vous le feriez avec le terminal Linux.
• Sources: facilite le débogage du code Javascript et l'utilisation des fichiers locaux.
• Réseau: aide à surveiller et à améliorer les performances de la page.
• Chronologie: permet l'enregistrement et l'exploration des différents événements qui se produisent lors de la visite d'un site.
• Application: examine toutes les ressources chargées; entre autres, les bases de données IndexedDB ou Web SQL, le stockage local et de session, les cookies, le cache d'applications, les images, les polices et les feuilles de style.
• Sécurité: détecte les problèmes de sécurité dans le code.

Voyons dans quoi nous pouvons utiliser Chrome DevTools

Réparez ce qui ne fonctionne pas

C'est arrivé à tous les développeurs. Écrivez le code, vérifiez qu'il n'y a pas d'erreurs, et pourtant, au moment de vérité, la page ne fonctionne pas comme elle le devrait. L'outil Console montre quelle erreur se produit au moment de l'exécution.

Diminuer le temps de chargement

Si une page prend du temps à se charger, l'utilisateur se fatigue et se rend sur un autre site. Heureusement, l'ère des sites Web Flash et de leurs intros animées est révolue. Quoi qu'il en soit, l'onglet Réseaux des Chrome DevTools permet de découvrir plus facilement quels éléments retardent le chargement. Nous pouvons répéter le test pour différentes vitesses de connexion.

Modifier le code

Dans l'onglet Éléments, nous pouvons voir les éléments d'une page, le code html associé et les propriétés css. Nous pouvons également les changer.

Nous pouvons éditer le texte d'une page à l'aide de la commande

document.designMode = 'on';

Essayez différentes tailles d'écran

Tablettes, smartphones, téléviseurs intelligents, ordinateurs de bureau. La liste des appareils avec lesquels nous surfons sur Internet s'allonge. Avec Chrome DevTools, nous pouvons testez si une page semble bonne à différentes tailles.

Benchmarking

En Management, le terme benchmarking signifie apprendre des meilleures pratiques de ceux qui font la même chose que nous. Avec Chrome DevTolls, si nous aimons la conception d'un site Web, nous pouvons consultez le code html et les feuilles de style css et copiez-les sur notre site.

Obtenir Chrome DevTools

Chrome DevTools est disponible sur les navigateurs Google Chrome et Chromium. Chrome est dans les référentiels des principales distributions. Il peut également être installé à partir des magasins de Casser. Quant à Google Chrome, vous pouvez viens ici. au format DEB et RPM