Pour débugger du JavaScript, on a souvent recourt à la fonction console.log() pour afficher un message ou une variable dans la console du navigateur. Si vous avez beaucoup de messages à afficher ou si vous voulez en grouper, utilisez console.group() !
console.group() peut donc être utilisé pour afficher des messages groupés dans votre console afin de les organisés un peu mieux. Le groupe doit être terminé par console.groupEnd().
Voyons plusieurs exemples.
Exemple 1 : un groupe basique
Voici le code utilisé :
for (level = 1; level <= 2; level++)
{
console.group("Niveau #"+level);
console.log("// Liste des sous-niveaux");
for (i = 1; i <= 3; i++)
console.log("#"+level+" - "+i);
console.log("// Fin des sous-niveaux");
console.groupEnd();
}Il est très simple : on parcourt 2 fois la première boucle, puis pour chaque itération, on affiche 3 lignes.
Voici le résultat obtenu dans la console. On remarque bien les deux groupes créés :
Voici un petit comparatif avec un console.log() basique :
Le console.group() est tout de même plus lisible !
Exemple 2 : plusieurs groupes à la fois
Cette fois-ci, on va créer un groupe dans un autre :
for (level = 1; level <= 2; level++)
{
console.group("Niveau #"+level);
console.group("Sous-niveaux de #"+level);
for (i = 1; i <= 3; i++)
console.log("#"+level+" - "+i);
console.groupEnd();
console.groupEnd();
}Voici le retour :
C'est encore plus lisible !
Exemple 3 : des groupes repliés par défaut
Comme vous l'avez sûrement remarqué, les groupes sont ouvert par défaut. La fonction console.groupCollapsed() peut être utilisé à la place de console.group() pour replier le groupe :
for (level = 1; level <= 2; level++)
{
console.groupCollapsed("Niveau #"+level);
console.group("Sous-niveaux de #"+level);
for (i = 1; i <= 3; i++)
console.log("#"+level+" - "+i);
console.groupEnd();
console.groupEnd();
}Ainsi, on obtient ce résultat :
Bon débuggage ;)
