Débogage JavaScript

Des erreurs peuvent (vont) se produire chaque fois que vous écrivez un nouveau code informatique.

Débogage de code

Le code de programmation peut contenir des erreurs de syntaxe ou des erreurs logiques.

Beaucoup de ces erreurs sont difficiles à diagnostiquer.

Souvent, lorsque le code de programmation contient des erreurs, rien ne se passe. Il n'y a pas de messages d'erreur et vous n'aurez aucune indication sur où chercher les erreurs.

La recherche et la correction des erreurs dans le code de programmation s'appellent le débogage de code.

Débogueurs JavaScript

Le débogage n'est pas facile. Mais heureusement, tous les navigateurs modernes disposent d'un débogueur JavaScript intégré.

Les débogueurs intégrés peuvent être activés et désactivés, forçant les erreurs à être signalées à l'utilisateur.

Avec un débogueur, vous pouvez également définir des points d'arrêt (endroits où l'exécution du code peut être arrêtée) et examiner les variables pendant que le code s'exécute.

Normalement (sinon suivez les étapes en bas de cette page), vous activez le débogage dans votre navigateur avec la touche F12 et sélectionnez "Console" dans le menu du débogueur.

La méthode console.log()

Si votre navigateur prend en charge le débogage, vous pouvez utiliser console.log() pour afficher les valeurs JavaScript dans la fenêtre du débogueur :

Exemple

 <!DOCTYPE html> 
 <html> 
 <body> 
 
 <h1>Ma première page web</h1> 
 
 <script> 
 a = 5; 
 b = 6; 
 c = a + b; 
 console.log(c); 
 </script> 
 
 </body> 
 </html> 

Essayez-le vous-même »

Astuce : Lisez-en plus sur la méthode console.log() dans notre Référence de la console JavaScript .

Définir des points d'arrêt

Dans la fenêtre du débogueur, vous pouvez définir des points d'arrêt dans le code JavaScript.

À chaque point d'arrêt, JavaScript arrête l'exécution et vous permet d'examiner les valeurs JavaScript.

Après avoir examiné les valeurs, vous pouvez reprendre l'exécution du code (typiquement avec un bouton de lecture).

Le mot-clé debugger

Le mot-clé debugger arrête l'exécution de JavaScript et appelle (si disponible) la fonction de débogage.

Cela a la même fonction que de définir un point d'arrêt dans le débogueur.

Si aucun débogage n'est disponible, l'instruction debugger n'a aucun effet.

Avec le débogueur activé, ce code s'arrêtera avant d'exécuter la troisième ligne.

Exemple

 let x = 15 * 5; 
 debugger; 
 document.getElementById("demo").innerHTML = x; 

Essayez-le vous-même »

Outils de débogage des navigateurs principaux

Normalement, vous activez le débogage dans votre navigateur avec F12 et sélectionnez "Console" dans le menu du débogueur.

Sinon, suivez ces étapes :

Chrome

Ouvrez le navigateur.
Dans le menu, sélectionnez "Plus d'outils".
Dans les outils, choisissez "Outils de développement".
Enfin, sélectionnez "Console".

Firefox

Ouvrez le navigateur.
Dans le menu, sélectionnez "Développeur Web".
Enfin, sélectionnez "Console Web".

Edge

Ouvrez le navigateur.
Dans le menu, sélectionnez "Outils de développement".
Enfin, sélectionnez "Console".

Opera

Ouvrez le navigateur.
Dans le menu, sélectionnez "Développeur".
Dans "Développeur", sélectionnez "Outils de développement".
Enfin, sélectionnez "Console".

Safari

Allez dans Safari, Préférences, Avancé dans le menu principal.
Cochez "Activer Afficher le menu Développer dans la barre de menu".
Lorsque la nouvelle option "Développer" apparaît dans le menu :
Choisissez "Afficher la console d'erreur".

Le saviez-vous ?

Le débogage est le processus de test, de recherche et de réduction des bogues (erreurs) dans les programmes informatiques.
Le premier bogue informatique connu était un vrai bogue (un insecte) coincé dans l'électronique.