Si JavaScript a longtemps évoqué l’idée de petit script dans un site internet, il est aujourd’hui souvent utilisé comme fondation d’application web complexe (notamment via des frameworks comme ReactJS ou VueJS). Dans ce contexte d’usage avancé, il est nécessaire d’avoir en main les bons outils et techniques de débogage.
Les outils de développement que nous verrons sont intégrés nativement à la quasi-totalité des navigateurs disponibles aujourd’hui. Ils sont généralement activés via <Ctrl> + <Shift> + <i> et proposent tous des fonctionnalités très similaires. On les appellera DevTools dans la suite de cet article. Sauf mention contraire, tous les éléments que nous verrons sont utilisables à minima sur Chromium/Google Chrome et Firefox.
1. Observer les variables
Un des premiers besoins du débogage consiste la plupart du temps à afficher le contenu d’une variable. Pour ça, on évitera l’ancestral alert() (qui a le désavantage de prendre le focus et de stopper l'exécution du code JavaScript) au profit de la fonction log() de la console.
On retrouvera alors le contenu des variables affiché dans l’onglet console des DevTools.
- Accédez à tous les contenus de Connect en illimité
- Découvrez des listes de lecture et des contenus Premium
- Consultez les nouveaux articles en avant-première