How do I console.log a jQuery DOM Element in Chrome?

Question

I used to be able to do console.log(somejQueryObj); and it logged in an array all of the DOM elements that are in the object that I could click and go to the inspector.

Now it does something like this:

[prevObject: p.fn.p.init[1], context: , selector: ".next ()"]

which can confuse many people.

How do I make it so that Chrome logs how it used to log jQuery elements?

Here is a fiddle example

---

I am in:

Google Chrome 23.0.1271.97 (Official Build 171054) m

Solution 1

Update: I made a jQuery plugin to bring back the old style logging: jquery.chromelog.

---

You could create a little function to log all elements on one line:

$.fn.log = function() {
  console.log.apply(console, this);
  return this;
};

Usage:

$("...").log();

Solution 2

To do it for each element so that you can hover over it, try something like this:

$("div").each(function(){console.log(this)})​

Solution 3

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

is another way

Solution 4

I have found a solution that would log them individually if need be (but it could clutter the log if it is BIG selector):

http://jsfiddle.net/maniator/ya7As/

var log = function($selector) {
    $selector.each(function() {
        console.log(this);
    });
};
log($('selector'))​;

View more solutions

Comments

[Jack]

That'll just return the dom element.

[kidwon]

Oh pardon me then I misunderstood that it's the DOM el he's after

[kidwon]

What does console.info() give you?

[pimvdb]

I'm not on Chrome at the moment, but console.log can log multiple things in a line, so could you try console.log.apply(console, this);?

[Naftali]

@pimvdb what is this in this context?

[pimvdb]

Sorry, I meant the whole jQuery object. Something like console.log.apply(console, $selector); in this case.

[Naftali]

@pimvdb that seemed to work! jsfiddle.net/maniator/ya7As/2 post as an answer ^_^

[pimvdb]

@Neal: I still wasn't completely happy about it, but I noticed console.group. Here's a maybe more convenient one: jsfiddle.net/vMrka/7.

[Naftali]

Wow. that looks nice too. Can you add these as addendums to your answer?

[Khaneliman]

Nice concise way of accomplishing this.