🖥️ Console lab

console.table()

Affiche un tableau natif triable, bien plus lisible qu'un array de logs.

console.table([
    { nom: 'Chips', role: 'Mascotte', niveau: 99 },
    { nom: 'Gwendal', role: 'Bénévole', niveau: 12 },
]);

console.group() / groupEnd()

Regroupe des logs dans une section repliable — pratique pour une arborescence.

console.group('Bretagne');
console.log('Brest');
console.group('Presqu\'île de Crozon');
console.log('Camaret-sur-Mer');
console.groupEnd();
console.groupEnd();

%c — texte stylé en CSS

Le format %c applique le CSS de l'argument suivant au texte. On peut même dessiner une image avec un background sur une chaîne vide.

console.log('%cGros et coloré', 'font-size:22px;font-weight:bold;color:#b4aee9;');
console.log('%c ', 'background:url(...) no-repeat center/contain; padding:40px 60px; font-size:0;');

console.count() / countReset()

Compteur nommé, incrémenté à chaque appel — utile pour vérifier combien de fois une fonction se déclenche.

console.count('clics');

console.time() / timeEnd()

Chronomètre nommé, affiche la durée écoulée entre les deux appels.

console.time('boucle');
for (let i = 0; i < 1e6; i++) {}
console.timeEnd('boucle');

console.assert()

N'affiche (en rouge, avec la pile d'appel) que si la condition est fausse — contrairement à un log classique.

console.assert(2 + 2 === 5, 'Ben non, ça fait 4');

console.trace()

Affiche la pile d'appels JS à cet instant — pour comprendre "qui a appelé qui".

function a() { b(); }
function b() { c(); }
function c() { console.trace('coucou depuis c()'); }
a();

console.dir() vs console.log() sur un élément DOM

console.log sur un élément affiche son rendu HTML ; console.dir affiche l'objet JS complet (propriétés, méthodes...).

console.log(document.body);
console.dir(document.body);

Mini TUI aux flèches (console.clear() + keydown)

Pas de vraies séquences ANSI possibles dans la console — mais en effaçant et réimprimant à chaque appui de flèche, on simule un écran qui se rafraîchit. Clique dans la case ci-dessous puis utilise les flèches (la page doit avoir le focus, pas la console).