Dans ce chapitre nous allons parler d'un outil indispensable lorsque l'on travaille sur du JavaScript : L'inspecteur du navigateur. Cet inspecteur vous permet d'accéder à différents outils qui vous permettront de mieux comprendre votre code.
Console
La console permet d'afficher les erreurs (Error non capturée) mais aussi les messages que vous décidez de lui envoyer depuis votre code avec les méthodes console.log(), console.warn() et console.error(). On aura aussi la possibilité de filtrer les erreurs en fonction de leur niveau pour n'afficher que les erreurs, infos ou warning.
Par contre, il faudra faire attention quand vous inspectez des objets depuis la console car l'objet vous est montré à la fin de l'évaluation du code et ne représente pas forcément son état au moment du console.log() par exemple.
Applications
Cet onglet permet de consulter les informations associées au domaine courant et vous permettra notamment de consulter l'état des différents sytèmes de stockages (localStorage, sessionStorage et Cookies).
Réseau
Dans cet onglet on pourra observer toutes les requêtes réseaux faites par la page courante avec la possibilité de filtrer par type de requête. Par exemple, il est possible d'utiliser le filtre Fetch / XHR pour ne voir que les requêtes faites depuis le JavaScript via la méthode fetch(). Vous pouvez sélectionner une ligne pour voir plus d'information sur la requête (en-tête ou corps) et sur la réponse.
Cet onglet permet aussi de simuler un débit particulier pour émuler une connexion lente 3G ou 4G. Cela peut s'avérer utile pour tester le fonctionnement de notre code JavaScript dans ce genre de situation.
Sources ou Débogueur
Ce panneau vous permet de voir les différentes resources JavaScript chargées par votre page web et permet d'insérer des points d'arrêts qui mettent en pause l'éxécution de votre code afin d'inspecter l'état des différentes variables.
