How do I console.log a jQuery DOM Element in Chrom

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

Answer 1

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

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

Answer 2

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

is another way

Answer 3

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'))​;

Answer 4

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();