Last active
September 21, 2017 00:01
-
-
Save guidoschmidt/f1b5c4ee6b9ada720dfd8a3384d59af2 to your computer and use it in GitHub Desktop.
Javascript colored console.log
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// -- You can use %c to CSS style your output | |
console.log('%cPrint styled text to the console!', 'font-size: 50px; background: red;'); | |
// -- Use table() function to layout more complex data | |
const persons = [ | |
{ name: 'Paul', | |
city: 'Heidelberg', | |
age: 35, | |
job: 'Photographer' | |
}, | |
{ name: 'Guido', | |
city: 'Heidelberg', | |
age: 29, | |
job: 'Creative Coder' | |
} | |
]; | |
console.table(persons); | |
// -- Group logs together with group() and groupEnd() | |
persons.forEach(p => { | |
const red = Math.round(Math.random() * 255); | |
const green = Math.round(Math.random() * 255); | |
const blue = Math.round(Math.random() * 255); | |
console.group(`%c${p.name}`, `color: rgb(${red}, ${green}, ${blue});`); | |
console.log(`This is ${p.name}`); | |
console.log(`-> He's an ${p.age}y old ${p.job} from ${p.city}`); | |
console.groupEnd(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment