Show Elements when logging jQuery object in Chrome Dev Tools console?

Question

It seems like something has changed lately with Chrome Dev Tools. Logging a jQuery object with console.log used to show the Element of the DOM node in the console. Something like this:

[<a href="#employees">Employees</a>]

Now it has changed to a clickable object like this:

[<a>, context: <a>]

Is there a way to go back to the old style of object logging or even a different method to call on console?

I'm currently using version 23.0.1271.64. Not sure exactly which version brought the change.

Answer 1

If you want console.log() to spit out the DOM element, you need to log the DOM element and not the jQuery object. The DOM element is always accessible as the 0th element of the jQuery selector. So, the way you would access the actual DOM element from a jQuery selector is like this:

   $("#someSingleDOMObjectSelector")[0]

And to get the DOM element to appear in the log the way you would like, you would do this:

   console.log($("#someSingleDOMObjectSelector")[0]);

And for jQuery selectors which contain/return multiple DOM elements, you could loop them, like this:

   $('.someMultipleDOMObjectSelector').each(function(){
           //console.log($(this)[0]); //or -->
           console.log(this);
   });

As to why Chrome's dev tools do this, I can only guess that it is done because it makes more sense to log a jQuery object as an object.