Skip to content

Instantly share code, notes, and snippets.

@guidoschmidt
Last active September 21, 2017 00:01
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save guidoschmidt/f1b5c4ee6b9ada720dfd8a3384d59af2 to your computer and use it in GitHub Desktop.
Save guidoschmidt/f1b5c4ee6b9ada720dfd8a3384d59af2 to your computer and use it in GitHub Desktop.
Javascript colored console.log
// -- 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