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 CSSappliqué à 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.