Why is console.log() considered better than alert()?

Question

I've always been told that when debugging an application, JavaScript's console.log() method is preferred over simply using an alert() method. Why is this? Is there a good example someone can point me to where console.log() is obviously the better choice?

Answer 1

• alert() is blocking
• alert() cannot be easily suppressed in non-debug environment
• console typically formats your objects nicely and allows to traverse them
• logging statements often have an interactive pointer to code which issued logging statement
• you cannot look at more than one alert() message at a time
• consoles can have different logging levels with intuitive formatting

• FlavorScape: don't forget if(window.console)console.log or you will break crap for IE users since the console don't exist until it is open.
• Peter Olson: I'm not sure what you mean by saying alert can't be easily supressed. All you need is alert = function(){}
• Tom Stickel: @PeterOlson -- alert is not just old school , it is hideous and invasive .. Sure you can cleverly work around it , but not the greatest thing to do , why not have every developer be consistent and using F12 developer tools and stop with nasty alerts.
• user6560716: IE already breaks, no console.log() needed. This is only on older versions of IE, and if you are supporting that, you are wasting your precious time. Go make something awesome, not support ancient browsers.
• Chinmay Ghule: But many times there is a definite difference between the results shown by console.log and alert. I was trying a program where a key assignment in an object is ignored if the key is user-provided & it's value is "proto". The console shows an empty object as output i.e. {}, while alert shows "[Object object]". It seems like @lonesomeday has also mentioned the same problem below.

Answer 2

Try this:

var data = {a: 'foo', b: 'bar'};
console.log(data);
alert(data);

You'll see that console.log shows you the object, while alert gives you [object Object], which isn't useful. This is true also of, e.g. elements:

alert(document.body); // [object HTMLBodyElement] (exact result depends on your browser)

Answer 3

Both are just a way to get information about what's happening at the time in your JS. I used to use alert() all the time but migrated to console.log() for a few reasons. (Side note: console offers more than just log(), take a look at what else it can do).

I think the main benefits of console.log() are:

• it does not halt processes like alert does
• you can see what line of what script threw the log entry without putting the line into your message
• if you have more than one thing you're debugging it can get real annoying to keep hitting 'ok' on your alert boxes
• you can log objects and get lots of good info (thanks for the reminder, other answerers)

In the end it boils down to how you prefer to debug.

One thing to be aware of. Not all browsers SUPPORT console.log() and will have a problem if you leave your console.log() calls in your code. Provide a console stub if console is not available to get around that problem.

Answer 4

It is non-blocking and allows you to deeply examine objects (rather then just seeing the results of toString()ing them).

Answer 5

The alert needs to be dismissed before javascript execution can resume. console.log has no such problem.

console.log will also display the object with values, where a call to alert will require you to traverse the object first.

Answer 6

I guess its somewhat a matter of taste, but there are a number of benefits of using console.log:

• Say you want to log 20 different things, that would be quite annoying with alert.
• You can log objects for instance, and then inspect them.
• In Chrome Dev tools for instance, you can preserve the log between different pages.
• It is non-blocking
• It does not affect the end user if forgotten

To name a few.

Answer 7

If you forget to remove a debugging alert statement it will directly affect the end user.
If you forget to remove a debuggins console.log statement the user is not affected.
In addition console.log will allow you to see the full contents of an object instead of JavaScript's toString() representation.

Answer 8

Because alerts are a PITA, stop everything until there's input, and don't allow object introspection.

Using a debugger is even better under some circumstances.

Answer 9

alert() stops all interaction with the browser until the message is dismissed while console.log() just prints the message to the console.

Ex. You're printing the values of a bunch of variables to make sure they're right and don't want to dismiss the alert window after each variable.