Article original : Learn How to Use the Chrome DevTools to Troubleshoot Websites
Chrome DevTools est un ensemble d'outils pour développeurs web intégrés directement dans le navigateur Google Chrome. Ils peuvent être extrêmement utiles pour les développeurs web.
Nous venons de publier un cours intensif qui vous apprendra à utiliser les Chrome DevTools pour améliorer votre productivité en tant que développeur web. Vous apprendrez à effectuer des tâches telles que le dépannage et l'édition en direct de pages web.
Nabheet Madan a créé ce cours. C'est un développeur très expérimenté et il fait un excellent travail pour enseigner comment intégrer les Chrome DevTools dans votre flux de travail de développement.
Voici les sections couvertes dans ce cours :
- Se familiariser avec l'outil
- Éléments (Elements)
- Sources
- Console
- Réseau (Network)
- Performance
- Application
- Sécurité (Security)
- Mémoire (Memory)
- Lighthouse
Après avoir obtenu un aperçu général des outils de développement, vous découvrirez l'onglet Éléments. Dans cet onglet, vous pouvez interagir avec les pages web en modifiant les styles et le HTML.
Ensuite, vous apprendrez à dépanner le JavaScript à l'aide de l'onglet Sources. Vous découvrirez différents types de points d'arrêt (breakpoints), les options de modification du code source, les remplacements (overrides), et plus encore. Après cela, vous en apprendrez davantage sur la console. La console est comme un REPL dans votre navigateur où vous pouvez tester du code.
Vous apprendrez à dépanner les requêtes côté serveur et le stockage local à l'aide des onglets Réseau et Application. Enfin, vous apprendrez à améliorer les performances et la sécurité à l'aide des onglets Lighthouse, Performance, Mémoire et Sécurité.
Vous pouvez regarder le cours complet ci-dessous ou sur la chaîne YouTube de freeCodeCamp.org (durée : 1 heure).