What's the difference between FireBug's console.log() and console.debug() ?

Question

A very simple code to illustrate the difference.

var x = [0, 3, 1, 2];
console.debug('debug', x);
console.log('log', x);
// above display the same result
x.splice(1, 2);
// below display kind of a different result
console.debug('debug', x);
console.log('log', x);

The javascript value is exactly the same but console.log() displays it a bit differently than before applying splice() method. Because of this I lost quite a few hours as I thought splice is acting funny making my array multidimensional or something.

I just want to know why does this work like that. Does anyone know? :)

Answer 1

If you look at the documentation, it says:

The console knows four different types of messages, which are described below […]

See also the Console API for more information about the different commands.

A look on that page shows at console.log:

If objects are logged, they will be written not as static text, but as interactive hyperlinks that can be clicked to inspect the object in Firebug's HTML, CSS, Script, or DOM tabs.

So, I think that before the splice, the array is internally still an Array (I know, it is a kind of object), but after the operation, you get a general object, at least internally. I know this is a weak explanation, but Firebug has more strange behaviour in the console.

BTW, the ECMAScript specification says nothing useful, but we can read in the section about Array.prototype.splice (§ 15.4.4.12):

The splice function is intentionally generic; it does not require that its this value be an Array object. Therefore it can be transferred to other kinds of objects for use as a method. Whether the splice function can be applied successfully to a host object is implementation-dependent.

Answer 2

In Firebug 1.6a12 I get

debug [0, 3, 1, 2] blog.php (line 80) log [0, 3, 1, 2] debug [0, 2] blog.php (line 85) log [0, 2]

The debug() lines include a link to the source line of the console.debug() line.