Colorer la console
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'])