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 conso

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.