Why Google Chrome has different console.log() output via jQuery?

Question

When I console log a jquery object eg.

var s = $("#item");
console.log(s);

I get something like this

[div#item, context: document, selector: "#item", jquery: "1.9.1", constructor: function, init: function…]

I remember before ( one month ago or so ), I would get something like:

 [<div id="item">pas</div>]

Is this change in Chrome itself? Or there was a change in jquery? Or I actually did something to make output look differently

I find this second output much easier to read and I can hover over this and have it marked on page. Now I get too much infos it's quite hard to read

Answer 1

What I think you're noticing is the difference between evaluating a jQuery object in the console and displaying it with console.log(). Using David Thomas's fiddle, set a breakpoint on the console.log statement. When it stops at the breakpoint, type $s into the console and you'll see

[<div id="item">pas</div>]

Then continue, and you'll see the verbose object printed by console.log().

I'm not really sure what jQuery or Chrome is doing that causes this difference. The output when you type $s seems to be the result of $s.toArray(), while console.log() shows the real jQuery object.

More proof that this isn't new behavior -- I just linked a duplicate question from November.

Answer 2

try...

var s = $("<div>").append($("#item").clone()).html();

console.log(s);

$(s).remove();

It's not in its prettiest form but the result is what you're looking for and I'm sure you could come up with a good function for it...

Basically I'm creating a div, putting a copy of #item into it, and spewing the div's innerHTML out to the console in order to show the entire #item element. (Not just #item's innerHTML) Then I destroy s to clean up.