Last Updated: October 07, 2020
·
37.67K
· stathisg

Enhance your JS console logging messages

I still remember the day when I discovered that there is a JavaScript console where I could display messages! It was such a relief not having to alert messages anymore, or using a DOM element to display them.

But, what I didn't know back then was that there are different ways to display messages in the console, apart from the well-known log() method.

I'm going to present the different types of messages that we can use in each major browser, focusing on their visual differences:

In most of the browsers, there are five different methods for styling messages: log(), info(), debug(), warn(), and error(). The log() method is the default in all of them, having the simplest style.

The screenshots are the outcome of the following script that I run into every browser (well, apart from IE, but we'll get there):

console.log('console.log');
console.info('console.info');
console.debug('console.debug');
console.warn('console.warn');
console.error('console.error');

In Chrome, the info() method is the same as log(); the debug() method displays the messages with a blue colour; the warn() method adds a warning sign in front of the message; and the error() method both adds an error sign in front of the message, and changes the text colour to red (also includes a stack trace from where the method was called, but now we're moving away for the visual discussion).

Here's a screenshot of the script's outcome in Chrome 29:

Picture

Before moving to the next browser, Chrome also allows us to style each of the above methods' text outcome overriding the default styling, using the %c format specifier, as follows:

console.log('%cThis text will now be blue and large', 'color: blue; font-size: x-large');

Moving on, in Opera, log() and debug() methods are the same, info() method's text is blue, warn() method's text is orange-yellow-ish (or something like that), and error() method's text is red. There are no icons.

Here's a screenshot of the script's outcome in Opera 12:

Picture

In Firefox, all of them (note that although it's working, the debug() method is deprecated) have the same text colour, but info(), warn(), and error() methods have their own individual icons.

Here's a screenshot of the script's outcome in Firefox 21:

Picture

If you are using Internet Explorer 10, don't use the debug() method, since it will crash your script. The rest of them have different colours and icons.

Here's a screenshot of the script's outcome (without debug()) in Internet Explorer 10:

Picture

Finally, in Safari, all apart from the error() method have the same (black) colour, and only warn() and error() methods include icons.

Here's a screenshot of the script's outcome in Safari 5:

Picture

Console has more power than just custom messages though. I would strongly recommend reading your preferred browser's documentation about its console API, to discover more.

Here is a list of links to each browser's documentation:

9 Responses
Add your response

console.error() and console.debug() also output stack trace (at least in Chrome) which is pretty handy!

over 1 year ago ·

What might be worth to add is that you shouldn't program and expect console.log to exists since it's not part of any standard. With other words, only use the console API in development code, NOT in production code since some vistors browsers will crash by using it.

If you absolutely must use console in production code, wrap it in a function so no browsers would crash if the API doesn't exists.

function console() {
    if(window.console) {
        return window.console;
    }
}

Usage:
JavaScript console().log('something');

over 1 year ago ·

@victorbjelkholm in your case if window.console is not defined you are still going to get type error undefined for calling console().log('something')

over 1 year ago ·

Head over to Paul Irish's blog and see his solution wrapping up the whole topic: http://www.paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/

over 1 year ago ·

What about the useful console.dir(), try for example console.dir(location);

over 1 year ago ·

My library Semantic UI http://www.semantic-ui.com uses another technique, console.group which allows for multiple console log statements to be grouped together to create javascript traces.

over 1 year ago ·

@jlukic are all those crazy console.XYZ methods chrome-specific? I've never encountered console.table, although I think I've seen .groupCollapsed before.

and not to be off-topic but semantic-ui looks awesome. i really like the idea.

over 1 year ago ·

The default formatting for some objects using console.log is not helpful.
For example, I'm using Emberjs and console.log(Ember) shows (in Chrome/Safari):

Object {__loader: Object, imports: Window, exports: Window, lookup: Window, ...}

where it would be much more helpful to see:

class Ember

It appears that "inspect" method is used for formatting objects in console.log, not toString.
Does anyone know how to override the default output from calling inspect?

My goal is to output short, customized-per-object, useful descriptions. For example, in Ember, I want to see:

"an App.Post id:5" or "App.PostController" or "a App.PostController 32"

so I know if object is a class or instance, whether it has a path from the global window object, whether it has an id, etc. It's much more difficult to debug when you can't easily get this information from an object.

over 1 year ago ·