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

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


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.


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.


Yes there may be a change with jquery, check how they are now dealing with dom objects in version 1.9.1

http://jsfiddle.net/5HJ3L/1/

if you try the console.log in this manner

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

the output will be like

[div#item, context: document, selector: "#item", jquery: "1.9.1", constructor: function, init: function…]0: div#itemcontext: documentlength: 1selector: "#item"__proto__: Object[0]

if you check it closely you will find the required output in the above array at key 0, so the output for the following line will be

console.log(s[0]);

Output:

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

also if you try it without jquery the output will be the one you are required

var e = document.getElementById('item');console.log(e);

Output:

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

PS: this is not a suggestion against jquery but to show how they will be deal by google-chrome

Correction: Also note that output mention in the question is in array form whereas the ways I have suggested is in string