How do I use the new `console.log()` output of Chrome?

Question

Chrome 24 has a new way of outputting objects in console.log().

For example, console.log($("p")); on this jsFiddle example outputs this insanity:

▼[<p>, <p>, <p>, prevObject: jQuery.fn.jQuery.init[1], context: #document, selector: "p"]
  ► 0: <p>
  ► 1: <p>
  ► 2: <p>
  ► context: #document
    length: 3
  ► prevObject: jQuery.fn.jQuery.init[1]
    selector: "p"
  ► __proto__: Object[0]

I can see that it puts the collection of DOM elements at the beginning. But if you try to expand even a simple <p> tag that is mostly empty, it throws up all over you:

▼ 0: <p>
   accessKey: ""
   align: ""
 ► attributes: NamedNodeMap
  ...
  [stopping here for sanity's sake]

So how do I use all this information? My first instinct is to tame it down to how it used to look, but on second thought, there really is a lot of info in there that I might want to have access to. But I'm having a hard time understanding what I'm looking at. Much of it looks like jQuery values. Is this a list of every jQuery value that the object has (or doesn't have)?

Then there's the whole issue of the ► context: thing and the ► __proto__: thing. Once you start drilling down in __proto__ you will never stop. I think it goes infinitely down!

How can I begin to learn how to use this new output?

EDIT: I actually just realized that I'm still using Chrome 23, this isn't something that was introduced in 24. Someone in this thread said it was a Chrome 24 issue, but maybe it's new in 23? At any rate, I only just recently started noticing this on jQuery objects.

EDIT 2: If you're just looking for how to log the old way, try this: (hat tip)

 console.log.apply(console, $("div"));

Answer 1

In your demo fiddle, you are logging NodeLists or HTMLCollections. Each of the elements within a NodeList is represented as a numeric index 0, 1, 2, etc. 0 being the first in the NodeList if any elements exist in it.

When you expand the Elements you see all available properties of an HTML Element as defined in DOM Core 3 specification. Refer here for more information about this http://domenlightenment.com/#3.2 and for a list of all properties and their purposes go here: https://developer.mozilla.org/en-US/docs/DOM/element. None of this is new in Chrome.

What is new in the latest Chrome version is the top level logged object, so if you just opened the console and typed:

console.log(window)

Which for me when I just did it logged a preview of what the expanded window object it provides when logging it. So for example, you should see something like:

Window {is_minor: 5, bmi_ie6: false, careers_adselector: "div.hireme, div#hireme"...}

Other NodeLists properties listed below the Elements of the list:

• context - the context of the selection - http://domenlightenment.com/#4.4
• length - the number of Elements in the HTMLCollection
• selector - the selector used to select the Element or NodeList
• __proto__ - An Object's __proto__ property references the same object as its internal [[Prototype]] (often referred to as "the prototype"), which may be an object or null (in the case of Object.prototype.__proto__). For more info on this refer to: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/proto

I modified the fiddle slightly and should show the preview of the objects when you view the console http://jsfiddle.net/jaredwilli/H3YWq/2/

You can't really get rid of any of these things either, they're a part of the DOM and will exist always otherwise the NodeType of what you're looking at will be something other than an ElementNode.

Answer 2

I'm just as annoyed as you are with this change. I know this isn't ideal, but it will hopefully help you a little bit.

console.log($('p')[0]);

You may have seen that solution before, and then found it didn't work if you were in a loop for instance:

$('p').each(function(){
 console.log($(this)[0]);
});

That doesn't end up giving you the result you were used to either, so I had to use ['context'] instead of [0] like this:

$('p').each(function(){
 console.log($(this)['context']);
});

Again, I'm looking for a better solution myself, but I thought I'd share with you what I've found.

Answer 3

You want first element so use [0]

As another option, check out Firebug in Firefox. I know, I love chrome too and use it every day, but Firebug is a great plugin and I've never had an issue with it.