How to add colored output to browser console in JavaScript

Other Questions JavaScript
1

I’m working on a JavaScript project and I want to make my console output more visually organized. Right now all my console messages look the same and it’s hard to quickly spot different types of information.

Is there a way to make different console messages appear in different colors? For example, I’d love to have my error messages show up in red text, warning messages in yellow or orange, and regular debug messages in green.

I’m using Chrome for development but I’m wondering if this works in other browsers too. Here’s a simple example of what I’m trying to colorize:

function displayMessage(type, text) {
    if (type === 'error') {
        console.error(text); // want this red
    } else if (type === 'warning') {
        console.warn(text); // want this orange
    } else {
        console.log(text); // want this green
    }
}

displayMessage('error', 'Something went wrong!');
displayMessage('warning', 'This might be an issue');
displayMessage('info', 'Everything is working fine');

Any suggestions on how to achieve this colored console output?

2

Here’s another trick - use console.group() with colors to organize related messages. Makes debugging way easier when you’ve got tons of output:

console.group('%cAPI Calls', 'color: blue; font-size: 14px;');
console.log('%csuccess', 'color: green', data);
console.groupEnd();

You can also style console.table() data the same way. Just heads up - Safari support can be wonky sometimes.

3

I’ve been using a simple logger object with predefined color methods lately. Much cleaner when you’ve got console statements all over your project:

const logger = {
    error: (msg) => console.log(`%c${msg}`, 'color: red; background: #ffe6e6; padding: 2px 4px;'),
    warn: (msg) => console.log(`%c${msg}`, 'color: orange; background: #fff4e6; padding: 2px 4px;'),
    info: (msg) => console.log(`%c${msg}`, 'color: green; background: #e6ffe6; padding: 2px 4px;')
};

logger.error('Database connection failed');
logger.warn('Deprecated function used');
logger.info('User authenticated successfully');

No need to remember CSS syntax every time, and you can tweak all the styling from one spot. The background colors and padding really make messages pop. Works great in Chrome, Firefox and Edge. You could add timestamps or more log levels if you want.

4

You can get colored console output using CSS styling with the %c format specifier. Works great in Chrome, Firefox, and most modern browsers. Here’s how to modify your function:

function displayMessage(type, text) {
    if (type === 'error') {
        console.log('%c' + text, 'color: #ff4444; font-weight: bold;');
    } else if (type === 'warning') {
        console.log('%c' + text, 'color: #ff8800; font-weight: bold;');
    } else {
        console.log('%c' + text, 'color: #44aa44;');
    }
}

The %c tells the console to apply CSS styles from the second parameter to your text. You can mix in background colors, padding, borders - whatever you want. I’ve used this for debugging complex apps and it makes spotting different message types way faster. Just remember that console.error() and console.warn() already have default styling, but the %c approach gives you complete control over how things look.