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

*Seems* to be jQuery: [demo](http://jsfiddle.net/davidThomas/9prm9/); though now I think about it, it's possibly just a difference in the way Chrome logs Objects, rather than DOM nodes/elements. — David Thomas, Jun 03 '13 at 16:34
yes looks like it works differently with plain javascript. Thanks for this, really useful — Zokora, Jun 03 '13 at 16:37
I tried changing the jQuery version in the fiddle, it didn't change the output significantly (the main difference is that the jQuery object didn't have a `jquery: ` property before 1.9). I think the difference the OP may be thinking of is between evaluating a jQuery object in the console and using `console.log`. — Barmar, Jun 03 '13 at 16:39
[Here](http://codepen.io/NickTomlin/pen/EfKjH) (note — may have to refresh the page to get console output to show up correctly) is a codepen with $ versions 1.10.1, 1.9.0, and 1.8.3. Output is identical except for the jQuery version number as @Barmar says. There must be something else going in in the OP's case (perhaps a Chrome update). — Nick Tomlin, Jun 03 '13 at 16:49
possible duplicate of [console.log() not outputting HTML of jQuery selection object](http://stackoverflow.com/questions/13268015/console-log-not-outputting-html-of-jquery-selection-object) — Barmar, Jun 03 '13 at 22:51
You cant print Jquery Object. it is not a string. in order to print $("#item") stored text you can use console.log($("#item").text()) — Ori Refael, Dec 19 '13 at 15:13

Barmar · Answer 1 · 2013-06-03T22:52:01.120

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.

score 1 · Answer 2 · answered Oct 26 '13 at 07:52

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.

score 1 · Answer 3 · answered Oct 26 '13 at 08:50

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#item
context: document
length: 1
selector: "#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

score 1 · Answer 4 · edited Apr 07 '17 at 16:19

1

You can control the output style of a console log output with c style console.log: https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

For example, to out put with a simple dom element style:

console.log("%o", document.body)

edited Apr 07 '17 at 16:19

biphobe

4,525
3
35
46

answered Dec 28 '13 at 06:59

Daiwei

40,666
3
38
48

score 0 · Answer 5 · edited Oct 26 '13 at 07:47

0

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

edited Oct 26 '13 at 07:47

sashkello

17,306
24
81
109

answered Oct 26 '13 at 07:28

Amol Navsupe

172
1
11

1

this will give you `pas` not `[
pas
]` – zzlalani Oct 26 '13 at 08:37
http://stackoverflow.com/questions/13974740/how-do-i-console-log-a-jquery-dom-element-in-chrome – Amol Navsupe Oct 31 '13 at 10:44
i hope this is help full – Amol Navsupe Oct 31 '13 at 10:44

score 0 · Answer 6 · answered Dec 13 '13 at 15:20

0

I got the expected result for the console sending the DOM element and not the jquery.

console.log($("div")[0])

answered Dec 13 '13 at 15:20

Paulo Lima

1,238
8
8

score -1 · Answer 7 · answered Oct 26 '13 at 07:34

-1

    if div value printed on div .. then plz menstion html(). 

    var s = $("#item").html();

    console.log(s);

answered Oct 26 '13 at 07:34

Amol Navsupe

172
1
11

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

7 Answers7