Javascript: maîtrisez votre console

La console javascript est un outil essentiel à tout bon dev qui se respecte. Mais la connaissez-vous vraiment ? Nous connaissons tous l’indispensable console.log(), mais vous seriez surpris de voir tous les autres outils disponibles pour vous faciliter la vie quand vous essayez de debugger un programme.
Voyons ensemble aujourd’hui les différentes fonctions que cache votre console.

Groupez vos logs: console.group()

Un des soucis qui intervient souvent quand on débug sur de gros projets front, c’est le manque de clarté dans tous nos logs qui nous poussent parfois à faire des console.log(‘—–‘) afin de séparer les différentes parties affichées. Avec console.group(), ce soucis est réglé. En effet il vous permet de créer des catégories de logs que vous pouvez ouvrir ou fermer au besoin. Et le petit plus: vous pouvez créer des groupes dans des groupes.

Cette fonction peut s’écrire au besoin avec ou sans paramètre ce qui permettra de donner un nom ou de garder le nom par défaut:

console.group()

	console.log("Inside first group"
	console.group()
		console.log("Inside sub-group")
	console.groupEnd()

console.groupEnd()

console.group("My Custom Group")
	console.log("Inside named-group")
console.groupEnd()

Notons que j’ai indenté uniquement pour rendre la lecture des groupes plus claire, mais ce n’est évidemment pas conseillé d’indenter de cette manière. Mais voici donc le résultat de ce code:

À savoir également que si vous pouvez fermer les groupes par défaut en utilisant plutôt console.groupCollapsed(), le reste du fonctionnement est le même.

Afficher vos objets: console.table()

En soi, l’affichage par défaut de notre console javascript n’est pas mauvais quand on fait un console.log() d’un object ou d’un array, mais il existe une façon d’obtenir un visuel un poil plus agréable pour faciliter notre debug: le console.table(). Vous pouvez utiliser cette fonction sur les objects et sur les array, même quand ceux-ci ont plusieurs dimensions:

Surveillez votre code à la trace: console.trace()

Quand des fonctions sont utilisées par plusieurs éléments, il est parfois difficile de savoir pour quelle raison elle se déclenche. C’est souvent une des raisons pour laquelle on finit avec 50 console.log() partout dans notre code, pour repérer LA fonction qui a déclenché notre cible. Ne vous inquiétez plus: console.trace() le fait très bien pour vous et vous remontera toute la stack d’appel de votre fonction:

function func1() {
	console.trace();
}
function func2() {
	func1();
}
function func3() {
	func2();
}
function func4() {
	func3();
}
func4();

Repérez les doublons: console.count()

Nous avons également une fâcheuse tendance à mettre des itérateurs partout pour repérer le nombre de fois qu’une fonction est appelée. Cela permet soit de voir pourquoi elle s’exécute trop, soit pourquoi elle ne s’exécute pas assez. Pour éviter d’avoir à créer des variables juste pour ça, nous avons un outil très pratique: le console.count().

Il est utilisable de deux manières, soit tel quel:

function sayHello(name) {
	console.count();
	console.log(`Hello ${name}`);
}

sayHello('Bobby');
sayHello('Joseph');
sayHello('Martine');
sayHello('Josianne');

Soit en précisant en paramètre le nom d’un label sous lequel nous voulons faire le compte. Cela permet de voir combien de fois une fonction s’est effectuée sous une même clé. Ce paramètre peut être soit entré sous forme de string, soit sous forme de variable comme suit:

function sayHello(name) {
	console.count(name);
	console.log(`Hello ${name}`);
}

sayHello('Bobby');
sayHello('Joseph');
sayHello('Martine');
sayHello('Joseph');

De cette façon, même si la fonction est appelée pour un autre label entre temps, votre console gardera le compte correct pour un même label. Cela permet de gagner beaucoup de temps pour ce type de cas de figure. Notons que ce même label peut être utilisé ailleurs et le compte sera gardé. Les console.count() ne sont pas scopés.

Une console conditionnée: console.assert()

Il arrive également très souvent de devoir afficher un console.log() seulement dans certaines conditions, auquel cas nous écrivons un joli petit if. Le console.assert() le fait tout seul comme un grand pour vous. Il ne s’affichera que si la condition mise en premier paramètre est fausse:

let toto = 'toto';
let tata = 'tata';
console.assert(toto === tata, 'Toto is not tata'); // sera affiché
console.assert(toto === 'toto', 'Toto is not toto'); // ne sera pas affiché

Mettons de la couleur dans notre console Javascript

Bon, ce ne sont que des substituts du console.log() mais qui permettent d’avoir un style sensiblement différent et donc de mieux démarquer certaines parties en cas de soucis:

console.error('This is an error');
console.warn('This is a warning');
console.debug('Oh oh oh');

Et bien sûr si avant un console.quelquechose() vous avez trop d’informations déjà affichées (ce qui arrive souvent sur des gros projets js) vous pouvez tout nettoyer avec un:

console.clear();

Et un dernier pour la route

Avec une virgule vous pouvez afficher plusieurs choses dans un console.log(), ceci vous évite d’en mettre partout quand vous pouvez vous permettre de n’en mettre qu’un seul. Et cela marche bien évidemment pour les équivalents tels que le error ou le warn.

// don't
console.log("myObj:");
console.log(myObj);

// do
console.log("myObj: ", myObj);