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.

Solution 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.

Solution 2

I've found this helpful:

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

Also, if you run console.log = inspect; from inside the console, things will output the old way, but it doesn't work if you just do it from your code, it has to be from the console.

Solution 3

This was broken by the Chrome developers in November 12 and hasn't been fixed as of Canary today.

Use https://github.com/pimvdb/jquery.chromelog to restore the previous behavior as a workaround.

The syntax is slightly different:

$('a').log()

But it's designed to mirror the old, working behavior of Chrome.

Comments

[EricG]

@darkajax You didnt interprete my answer the way I intended it ;)

[EricG]

No problem, but is the +1 functional? xD

[David Tuite]

The trick with inspect doesn't seem to work for me but console.log.apply(console, $("a")); is nice.

[David Tuite]

That just logs something like this: jQuery.fn.jQuery.init[1].

[EricG]

I went to jQuery.com and tried in the console console.dir( document.getElementById("jq-siteContain")) and it gave me what you wanted. It didnt give me the init function. Dont use $("#el") but use document.getElementById(el)

[brentonstrine]

@DavidTuite The console.log=inspect thing only works if you enter it directly into the console and only applies to logs triggered from the console afterwards. Not a great solution, generally.The .apply(console, thing is way more helpful.

[Anthony Grist]

Why would you do $(this)[0] when that's identical to just using this?

[J.Wells]

To demonstrate usage of the 0th element ... You are correct. this = $(this)[0]

[mikemaccana]

@EricG That's an Element, not a JQuery object (there's a difference).

[EricG]

@nailer I know, this fella wanted to read the DOM element in console. Mission accomplished no?

[mikemaccana]

@Ericg: Sorry, but I'd say not accomplished. Obviously the parent asked to log a jQuery object, but rather than an HTMLElement. jQuery selectors support a different syntax than getElementById (querySelectorAll is closer, but not entirely the same) and may be multiple elements, rather than a single one.

[EricG]

@nailer I agree that it's debatable, but he asks in different ways, he says used to show the Element of the DOM node in the console, even the answer marked as correct gives the same result (=DOM elem). Also this answer might be useful to others, but whatever.

[Smilediver]

.each(console.log) will also give you the indexes, and is shorter.