[Javascript] Format console.log with CSS and String Template Tags

Posted 2020-08-29 Answer1215

The Chrome console allows you to format messages using CSS properties. This lesson walks you through the syntax of formatting your logs with css then refactoring into a template tag function to make formatting more reusable.

 

const debug = (label, style, obj) => {
    console.log(`%c${label}`, `${style}`, `${obj}`);
};

debug(
    `debug: `,
    `color: white; background-color: grey; padding: 0 0.5em;`,
    JSON.stringify({name: \'Zhentian\'}));