Article original : How to Debug JavaScript with your Browser's Devtools
En tant que développeur, vous voudrez souvent déboguer du code. Vous avez peut-être déjà utilisé console.log dans certains des défis, ce qui est la manière la plus simple de déboguer.
Dans cet article, nous allons vous montrer quelques-uns des trucs les plus cool pour déboguer en utilisant les outils de débogage natifs des navigateurs.
Un bref aperçu de l'éditeur de code FreeCodeCamp :
Avant de plonger dans le débogage, laissons fuir quelques faits secrets sur ce moteur de vérification de code génial chez FCC.
Nous utilisons un CodeMirror personnalisé, comme éditeur de code. Une fonction eval() est utilisée pour évaluer le code JavaScript représenté sous forme de chaîne de caractères depuis l'éditeur. Lorsque eval() est appelée, les navigateurs exécuteront nativement votre code. Nous apprendrons plus tard dans cet article pourquoi ce secret est important.
Passons maintenant aux astuces :
Outils de développement Google Chrome
Google Chrome est l'un des navigateurs les plus populaires avec un moteur JavaScript intégré appelé V8, et offre un excellent ensemble d'outils pour les développeurs appelé Chrome DevTools. Visiter leur Guide complet de débogage JavaScript est fortement recommandé.
1 : Les bases des DevTools
Lancement des Chrome DevTools
Appuyez sur F12. Alternativement, vous pouvez presser
Ctrl + Shift + I
sur Windows et Linux ou
Cmd + Shift + I
sur Mac, ou si vous aimez simplement votre souris, allez dans Menu > Plus d'outils > Outils de développement.
Découverte des onglets Sources et console.
Ces deux onglets seront probablement vos meilleurs amis lors du débogage. L'onglet Sources peut être utilisé pour visualiser tous les scripts présents sur la page web que vous visitez. Cet onglet contient des sections pour la fenêtre de code, l'arborescence des fichiers, la pile d'appels et les fenêtres de surveillance, etc.
L'onglet console est l'endroit où toutes les sorties de journalisation sont affichées. De plus, vous pouvez utiliser l'invite de l'onglet console pour exécuter du code JavaScript. C'est un peu synonyme de l'invite de commande sur Windows, ou du terminal sur Linux.
Astuce : Basculer vers la console à tout moment dans les DevTools en utilisant la touche Esc.
2 : Raccourcis courants et fonctionnalités
Bien que vous puissiez consulter la liste complète des raccourcis, voici quelques-uns des plus utilisés :
Fonctionnalité Windows, Linux Mac
Rechercher un mot-clé, les regex sont supportées. Ctrl+F``Cmd+F
Rechercher et ouvrir un fichier Ctrl+P``Cmd+P
Aller à la ligne Ctrl+G+:line_no``Cmd+G+:line_no
Ajouter un point d'arrêt Ctrl+B, ou cliquer sur le numéro de ligneCmd+B, ou cliquer sur le numéro de ligne
Mettre en pause / reprendre l'exécution du script F8 F8
Passer à l'appel de fonction suivant F10 F10
Entrer dans l'appel de fonction suivant F11 F11
3 : Utilisation d'une Source Map pour notre code
L'une des fonctionnalités les plus cool que vous allez adorer est le débogage de script dynamique, à la volée, via les Source Maps.
Chaque script peut être visualisé dans l'onglet Source des DevTools. L'onglet source contient tous les fichiers sources JavaScript. Mais le code de l'éditeur de code est exécuté via eval() dans un conteneur simplement appelé une machine virtuelle (VM) au sein du processus du navigateur.
Comme vous l'avez peut-être deviné maintenant, notre code est en fait un script qui n'a pas de nom de fichier. Nous ne le voyons donc pas dans l'onglet Source.
Voici l'astuce !
Nous devons utiliser les Source Maps pour attribuer un nom au JavaScript de notre éditeur. C'est assez simple :
Supposons que nous sommes sur le défi Factorialize, et que notre code ressemble à ceci :
function factorialize(num) {
if(num <= 1){
...
}
factorialize(5);
Tout ce que nous devons faire est d'ajouter //# sourceURL=factorialize.js en haut du code, c'est-à-dire la première ligne :
//# sourceURL=factorialize.js
function factorialize(num) {
if(num <= 1){
...
Et Eurêka, c'est tout !
Maintenant, ouvrez les DevTools et recherchez le nom du fichier. Ajoutez des points d'arrêt, déboguez et amusez-vous !