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
![](https://blog.frvaillant.fr/wp-content/uploads/2023/01/Capture-décran-2023-01-17-à-06.50.45.png)
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
![](https://blog.frvaillant.fr/wp-content/uploads/2023/01/Capture-décran-2023-01-17-à-06.58.07.png)
Plusieurs messages d'un coup ?
console.log('%c mon message' + '%c mon second message', 'color: yellow; ', 'color:red')
affichera
![](https://blog.frvaillant.fr/wp-content/uploads/2023/01/Capture-décran-2023-01-17-à-07.18.04.png)
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
![](https://blog.frvaillant.fr/wp-content/uploads/2023/01/Capture-décran-2023-01-17-à-07.20.56-1024x63.png)
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'])
chevron_left Créer des routes personnalisées dans WordPress