Vous le savez sans doute : la console JavaScript (console.log) est un outil essentiel pour les développeurs web. Mais saviez-vous qu’il est possible de la rendre plus lisible (ou plus fun) en y ajoutant du style CSS ? Oui, console.log peut afficher des messages colorés, agrandis, soulignés ou même encadrés, en utilisant la puissance du CSS !

Commençons par un exemple de base :

console.log('%cCoucou le monde', 'color: blue; font-size: 20px;');

Le marqueur %c est le plus important ici : il signifie que ce qui suit sera stylisé en appliquant le CSS décrit en second argument.

Un autre exemple plus complet mais tout aussi inutile :

console.log(
    '%cCoucou le monde',
    'background-color: darkgreen; color: white; font-size: 2rem; padding: .5rem 1rem; border: 6px solid lightgreen'
);

Il est possible d'avoir plusieurs styles CSS dans un même console.log() :

console.log('%cAvertissement : %cErreur critique détectée', 
    'color: orange; font-weight: bold;', 
    'color: red; background: yellow; padding: 2px;'
);

Vous pouvez avoir des styles prédéfinis et les utiliser dans console.log() :

const logStyles = {
    api: 'background: #2196F3; color: white; padding: 2px 6px;',
    user: 'background: #FF9800; color: white; padding: 2px 6px;',
    system: 'background: #9C27B0; color: white; padding: 2px 6px;'
};

console.log('%c[API]%c Réponse reçue', logStyles.api, '');
console.log('%c[USER]%c Action utilisateur', logStyles.user, '');
console.log('%c[SYSTEM]%c Initialisation terminée', logStyles.system, '');

Un autre exemple avec un mini système de logging structuré :

const logger = {
    info: (msg) => console.log(`%c[INFO]%c ${msg}`, 'background: #2196F3; color: white; padding: 2px 6px; border-radius: 2px;', ''),
    warn: (msg) => console.log(`%c[WARN]%c ${msg}`, 'background: #FF9800; color: white; padding: 2px 6px; border-radius: 2px;', ''),
    error: (msg) => console.log(`%c[ERROR]%c ${msg}`, 'background: #F44336; color: white; padding: 2px 6px; border-radius: 2px;', ''),
    success: (msg) => console.log(`%c[SUCCESS]%c ${msg}`, 'background: #4CAF50; color: white; padding: 2px 6px; border-radius: 2px;', '')
};

// Usage
logger.info('Chargement des données...');
logger.success('Données chargées avec succès !');
logger.warn('Attention : cache expiré');
logger.error('Impossible de se connecter au serveur');

Ou encore faire des titres avec séparateur :

console.log('%c???? DÉMARRAGE DE L\'APPLICATION', 'font-size: 20px; font-weight: bold; color: #333; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);');

console.log('%c' + '='.repeat(50), 'color: #ccc;');

Bien sûr, n'abusez pas des styles, utilisez-les avec parcimonie pour éviter de surcharger la console ;)

Sinon, vous pouvez utiliser des librairies toute faite comme Chalk, Pino, Winston, etc... et qui ajoutent beaucoup de fonctionnalités.

Quelques liens pour aller plus loin :

• MDN
• Chrome Devtools