Howto: Le débogage en JavaScript

Trucs et astuces pour faire du débogage en JavaScript

L’objet console

L’objet console donne accès à la console de débogage du navigateur. Les spécificités de fonctionnement varient d’un navigateur à l’autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base.

Afficher du texte dans la console

  • console.log() pour afficher un message
  • console.info() pour afficher un message d’information
  • console.warn() pour afficher un message d’avertissement
  • console.error() pour afficher un message d’erreur

console.log

Permet d’afficher des messages dans la console :

1
2
3
4
5
6
7

function sayHello() {
    const message = "Hello world!";

    console.log(message);               // Hello world!
    console.log("Message:", message);   // Message: Hello world!
    console.log({message});             // Affiche le détail de l'objet message
}

Différences entre console.log() et console.dir() :

  • La commande console.log() affiche les éléments dans un arbre de type HTML.
  • La commande console.dir() affiche les propriétés de l’objet JavaScript.

console.dir

Affiche une liste interactive des propriétés d’un objet JavaScript donné. Cette liste permet d’examiner le contenu des enfants de l’objet en ouvrant les détails (petits triangles).

console.table()

Affiche des données tabulaires comme un tableau.

console.time()

Démarre un chronomètre que l’on peut nommer en le spécifiant en tant que paramètre. Jusqu’à 10 000 chronomètres simultanés peuvent tourner sur une page.

console.timeEnd()

Arrête le chronomètre spécifié et affiche le temps écoulé en millisecondes depuis son démarrage.

console.assert()

Affiche un message et une trace d’appels dans la console si l’assertion en argument est à false.

1

console.assert(myvar !== undefined, "This shouldn't be undefined");

Instruction debugger

L’instruction debugger permet de faire appel à un outil de débogage (qui peut par exemple permettre de placer un point d’arrêt). Si cette fonctionnalité de débogage n’est pas disponible, l’instruction n’aura aucun effet.

Si un débogueur est disponible et lancé, l’exécution est interrompue au niveau de l’instruction debugger, avec le même effet que si on avait mis un point d’arrêt.

Exemple :

1
2
3
4
5

function hello() {
    debugger;
    
    console.log("Hello world!");
}

Références

JavaScript