New issue
Advanced search Search tips

Issue 162570 link

Starred by 14 users

Issue metadata

Status: Fixed
Closed: Nov 2012
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug

Sign in to add a comment

console.log doesn’t output jQuery objects properly

Reported by, Nov 25 2012

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.20 (KHTML, like Gecko) Chrome/25.0.1334.0 Safari/537.20

Steps to reproduce the problem:
1. Open
2. Enter $('h2') and console.log($('h2')) in the DevTools console

What is the expected behavior?
I expect to see the same output twice:

<h2>​Grab the latest version!​</h2>​, 
<h2 class=​"jq-whosUsing">​Who's using jQuery?​</h2>​, 
<h2>​jQuery Resources​</h2>​, 
<h2>​Books About jQuery​</h2>​

What went wrong?
$('h2') shows expected output, but console.log($('h2')) in Chrome 25.0.1334.0 shows:

► [<h2>, <h2>, <h2>, <h2>, <h2>, <h2>, selector: "h2", context: #document, init: function, selector: "", jquery: "1.4.2", size: function, toArray: function, get: function, pushStack: function, each: function, ready: function, eq: function, first: function, last: function, slice: function, map: function, end: function, push: function, sort: function, splice: function, extend: function, data: function, removeData: function, queue: function, dequeue: function, delay: function, clearQueue: function, attr: function, removeAttr: function, addClass: function, removeClass: function, toggleClass: function, hasClass: function, val: function, bind: function, one: function, unbind: function, delegate: function, undelegate: function, trigger: function, triggerHandler: function, toggle: function, hover: function, live: function, die: function, blur: function, focus: function, focusin: function, focusout: function, load: function, resize: function, scroll: function, unload: function, click: function, dblclick: function, mousedown: function, mouseup: function, mousemove: function, mouseover: function, mouseout: function, mouseenter: function, mouseleave: function, change: function, select: function, submit: function, keydown: function, keypress: function, keyup: function, error: function, find: function, has: function, not: function, filter: function, is: function, closest: function, index: function, add: function, andSelf: function, parent: function, parents: function, parentsUntil: function, next: function, prev: function, nextAll: function, prevAll: function, nextUntil: function, prevUntil: function, siblings: function, children: function, contents: function, text: function, wrapAll: function, wrapInner: function, wrap: function…]

In Chrome 23.0.1271.64 stable it’s better yet still different from the expected output:

► [<h2>, <h2>, <h2>, <h2>, <h2>, <h2>, selector: "h2", context: #document]

Did this work before? Yes Chrome 23.0.1271.64

Chrome version: 25.0.1334.0  Channel: canary
OS Version: OS X 10.8.2

Trending question on StackOverflow:
1) Not showing element content upon console.log is intentional. It was introduced with the The thing we missed was that we could still output nodes with their ids and classNames.

2) too many functions are due to the fact that we consider it array and preview 100 elements (while for objects we only add 3 elements. Fixing that would remove all these functions from the list and make it look like Chrome 23.
Labels: Mstone-24 Merge-Requested
Status: Started
This is a regression from the user point of view, fix landed as upstream. Waiting for Canary.
Re-landed upstream as
What was the rationale behind the change? It's extremely useful to be able to output a jQuery object to the console and quickly look at what HTML elements it contains. All of the the developers where I work do this hundreds or thousands of times a day, and our workflow has slowed down considerably since the change. 

Obviously I need to learn how to use the new output, but I still would like to be able to quickly see the output in terms of HTML elements and existing HTML attributes (e.g. I don't want to scroll through attributes that aren't set, and I don't want to see properties most of the time, I just want to see what HTML elements jQuery has grabbed with what I'm doing. 

What does it mean that the "fix landed ... upstream" and "waiting for Canary"? Does this mean the functionality will return to what it was? 
Also, I think where it says it worked before in Chrome 23.0.1271.64 is a typo.

Version 23.0.1271.64 outputs

  [<h2>, <h2>, <h2>, <h2>, <h2>, <h2>, selector: "h2", context: #document]

and if you expand the <h2> you don't get <span>s and other DOM stuff, you get attributes and properties. I think it was an older version that he meant. Perhaps 22?

Comment 6 by, Nov 26 2012

Would it be possible to enable the old style logging (the full element) as an option in DevTools?

If not, please consider the following. The old style logging can be put back by running `console.log = inspect;` in the console. But this `inspect` function isn't available in code (only in the console). Would it be possible to provide this `inspect` function to code, as in `console.inspect` for example, so that `console.inspect(elements)` would log the elements in the old style?

Personally, I truly miss the old style logging.

Comment 7 by, Nov 27 2012

webkit r135720 is now part of 25.0.1336.0 build. Please verify it.
Just tested on 25.0.1336.0 canary.

console.log($("h2")) outputs:

[h2, h2, h2.jq-whosUsing, h2, h2, h2, selector: "h2", context: document, init: function, selector: "", jquery: "1.4.2"…]

... whereas $("h2") still outputs the same expected result. That doesn't seem right. Am I misunderstanding what r135720 was intended to do?

Comment 9 by, Nov 27 2012

Looks okay to me.

Old style logging:

console.log.apply(console, []$('p'), 0))
-> ►<p>…</p>, ►<p>…</p>, <p class="label-key">viewed</p>

Comment 10 by, Nov 28 2012

Labels: -Merge-Requested Merge-Approved
Labels: -Merge-Approved Merge-Requested
It sounds like I need to merge first in order to not create conflicts. It is a small change it is there in a number of Canaries and Dev builds, should be safe to merge.

Comment 12 by, Nov 28 2012

Labels: -Merge-Requested Merge-Approved
Labels: -Merge-Approved Merge-Merged
Status: Fixed
134053 -> committed revision 136040 (1312)
135720 -> committed revision 136044 (1312)

Closing it as fixed because I merged it into M24. Please file missing pieces separately.
Project Member

Comment 14 by, Mar 10 2013

Labels: -Feature-DevTools -Mstone-24 Cr-Platform-DevTools M-24
Instead of console.log.apply(console, obj) consider using console.dirxml(obj)

I'm testing this in the console here on this page. (in case you got this in an email)

Where they return very similar results for a full jQuery selector result...
console.log.apply(console, $$('.issuecomment'))

The former fails to deliver a single result from the jQuery selector...
console.log.apply(console, $$('.issuecomment')[0])

(For the purpose of this demo Chrome's built in $$ selector is functionally equivilent to jQuery. I confirmed this with the jQuerify bookmarklet)

Comment 16 Deleted

Using Chrome 26.0.1410.43 the test case still fails.
This is still broken in 26.0.1410.65

When will the old (and correct) behavior be returned?
This is not fixed. As of 27.0.1453.94, it still fails to meet expected behavior as described in this ticket. 
Still broken in Version 28.0.1500.72 m

Sign in to add a comment