Colorer la console

console css javascript messages style

Publié le 17 janvier 2023

Lorsque l'on travaille avec javascript, on a souvent recours à la méthode console.log() pour afficher des messages dans la console du navigateur.

Pour plus de clarté, on peut styliser ces messages.

Les messages dans la console

Il y a plusieurs types de messages pour l'objet console mais les plus utilisés sont :

console.log('mon message')
console.error('mon erreur')
console.info('mon information')

Ils affichent respectivement

Styliser les messages

Il est possible d'utiliser du CSS dans ses messages de console pour les rendre plus lisibles. Il suffit pour cela d'ajouter '%c' devant le message à afficher et de le faire suivre par une série de paramètres CSS:

console.log('%c mon message', 'background: #ffce00; color: black; display: block; text-align: left; padding: 4px 10px')

affichera

Plusieurs messages d'un coup ?

console.log('%c mon message' + '%c mon second message', 'color: yellow; ', 'color:red')

affichera

Plusieurs lignes de messages ?

console.log('%c mon message' +'\n'+ '%c mon second message', 'color: yellow; background:red; padding:5px 10px; display:block;', 'color:red; background:yellow; padding:5px 10px; margin-top:10px; display:block;')

Affichera

Une petite classe JS pour gérer tout ca plus facilement

class Console {

    constructor(styles) {
        this.styles = styles ?? {
            "success"  : ['background: green', 'color: white', 'display: block', 'text-align: left', 'padding: 4px 10px'],
            "error"    : ['background: red', 'color: white', 'display: block', 'text-align: left', 'padding: 4px 10px'],
            "warning"     : ['background: yellow', 'color: black 'display: block', 'text-align: left', 'padding: 4px 10px'],
        }
    }

  log(message, styles = null) {
        const lines   = message.split('\n')
        const prefix  = styles ? '%c' : ''
        let toPrint   = [], useStyles = []

        lines.forEach((value, index) => {

            toPrint.push(prefix + value.trimLeft())

            if(styles && styles[index]) {
                const style = styles[index]

                if (this.styles[style]) {
                    useStyles.push(this.styles[style].join(';'))
                } else {
                    useStyles.push(this.styles['success'].join(';'))
                }
            }
        })

        const joiner = lines.length > 1 ? '\n' : ''
        console.log(toPrint.join(joiner, ...useStyles)
    }

}

Pour l'utiliser

const myConsole = new Console()
// ou
const myConsole = new Console({
    "success"  : ['background: blue', 'color: white', 'display: block', 'text-align: left', 'padding: 4px 10px'],
    "error"    : ['background: black', 'color: yellow 'display: block', 'text-align: left', 'padding: 4px 10px'],
})

// pour afficher un message
myConsole.log('Mon message à afficher', ['success'])
// ou bien
myConsole.log('mon message de test \n Un autre message \n Et encore un autre', ['error', 'success', 'warning'])

La codonnerie