How can I inspect a jQuery object?

Question

In jQuery 1.4.4, if I do this in Google Chrome's console:

var divs = $('div');

... what I get back appears to be an array of DOM elements. But I know it must be a jQuery object, because I can chain jQuery methods on it:

divs.hide('slow').show('slow'); // etc

What I want to see is the jQuery object, with a .fn property listing all its methods, etc. I'm pretty sure I used to be able to see this.

If I make my own object, like this:

var foo = {species: 'marmot', flavor: 'lemon'}

...I can dig into its properties in the console.

How can I inspect the jQuery object in the console?

Also, what magic is being done to make this look like an array?

Update - it did change

If I load an old version of jQuery - for example, copy and paste this into my console in a blank tab:

http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js

... and I then do this:

var divs = $('div');

... I do get back jQuery.fn.jQuery.init, which I can dig into in the console. So something definitely changed since then.

Answer 1

I believe this site describes what you're looking for in detail but to summarize (from the link):

The interesting thing about the jQuery object is that while its datatype is an object, it has array-like characteristics:

• its property names (the ones that refer to DOM elements, at least) are
  numeric
• it has a length property

And: $('div').toSource(); Edit: Only works in FF
Should be what you want for showing the properties of the object.

For Chrome:

Basically, you go to the Javascript Console in Chrome. Click on the Scripts tab (#1). Put a breakpoint on the spot where the code is you want to check (#2). Then run the script and when it breaks on that spot, check the scope variables (#3). Specifically the __proto__ section.