Maîtrisez la Console et ses outils !
Explorez la boîte à outils du développeur
What you will learn
Utilisez la console
Debugger
Améliorer la performance de son site et de ses apps
Faire un audit complet
Gérer le côté responsive d'un site
Description
C'est parti pour le cours sur la console et les DevTools !
Trop de développeurs se contentent d'utiliser l'onglet "Console" lorsqu'ils codent avec Chrome/Firefox/etc...
Alors que les navigateurs proposent des boîte à outils regorgeant de fonctionnalités géniales.
Découvrons-les ensemble.
1. Inspecter le DOM de notre site
Le DOM, Document Object Model, est la représentation d'un site sous la forme d'un arbre d'objets, créés à partir des fichiers fournis, tel que l'HTML, le CSS et le JavaScript.
Nous allons pouvoir l'observer et le modifier grâce aux DevTools et au panneau "Elements".
2. Debugger notre JavaScript
Il n'y a pas que la méthode "console.log()" qui peut nous aider à débugger notre JS, le panneau source nous donne accès à de puissants outils de deboggage.
3. Changer le CSS à la volée
Toujours grâce au panneau "Elements", nous allons pouvoir analyser le CSS appliqué à chaque élément, et effectuer toutes sortes de changements sur ces derniers.
4. Améliorer les performances de nos sites
Le bien nommé panneau "Performances" va nous permettre de détecter s'il y a quelque chose qui cloche lors du chargement ou des animations d'un site.
5. S'occuper de la mémoire en JS
Autre source de problèmes courants, la mémoire !
On va pouvoir mettre fin aux memory leaks grâce à l'onglet "Memory"
6. Faire un Audits complet d'un site.
Les devtools nous donnent accès à l'onglet "Lighthouse"(anciennement "audit"), qui nous permet tout simplement de faire passer des tonnes de test à un site.
S'ensuit une série de conseils afin d'améliorer notre création au niveau du SEO, des performances, de l'accéssibilité, etc...
7. Le réseau
Le panneau "network" nous permet de voir ce qui se passe au chargement d'un site, au niveau des fichiers, des images, ou lors d'appels vers des APIs.
Et bien d'autres choses encore !
On se donne rendez-vous de l'autre côté pour commencer tout ça.