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’obtiendrez aucune indication sur l’endroit où rechercher les erreurs.

La recherche (et la correction) des erreurs dans le code de programmation s’appelle le débogage du code.

Débogueurs JavaScript

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

Les débogueurs intégrés peuvent être activés et désactivés, ce qui force le signalement des erreurs à 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 l’exécution du code.

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 :

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 de s’exécuter et vous permet d’examiner les valeurs JavaScript.

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

Le mot-clé du débogueur

Le debugger Le mot-clé 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 de débogage n’a aucun effet.

Avec le débogueur activé, ce code cessera de s’exécuter avant d’exécuter la troisième ligne.

Outils de débogage des principaux navigateurs

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”.

Bord

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

Opéra

• 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 menus”.
• Lorsque la nouvelle option “Développer” apparaît dans le menu :
  Choisissez “Afficher la console d’erreurs”.

Saviez-vous?