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.

Answer 2

This doesn't answer your question in a very satisfying way, but it may help you, depending on what you're after:

I noticed that if you make the object less "array-like", then Chrome logs it as it would for a non-array object (i.e. with an expandable tree of properties).

One way to make it less array-like is to give the length property a non-numeric value:

var divs = $('div');
divs.length = "foo";
console.log(divs);

p.s. You'd probably want to set the object's length back to its original value before using it again.

Answer 3

I found this inspect function online one time and never looked back. It isn't jQuery though :/

function inspect(obj, maxLevels, level)
{
  var str = '', type, msg;

    // Start Input Validations
    // Don't touch, we start iterating at level zero
    if(level == null)  level = 0;

    // At least you want to show the first level
    if(maxLevels == null) maxLevels = 1;
    if(maxLevels < 1)     
        return '<font color="red">Error: Levels number must be > 0</font>';

    // We start with a non null object
    if(obj == null)
    return '<font color="red">Error: Object <b>NULL</b></font>';
    // End Input Validations

    // Each Iteration must be indented
    str += '<ul>';

    // Start iterations for all objects in obj
    for(var property in obj)
    {
      try
      {
          // Show "property" and "type property"
          type =  typeof(obj[property]);
          str += '<li>(' + type + ') ' + property + 
                 ( (obj[property]==null)?(': <b>null</b>'):('')) + '</li>';

          // We keep iterating if this property is an Object, non null
          // and we are inside the required number of levels
          if((type == 'object') && (obj[property] != null) && (level+1 < maxLevels))
          str += inspect(obj[property], maxLevels, level+1);
      }
      catch(err)
      {
        // Are there some properties in obj we can't access? Print it red.
        if(typeof(err) == 'string') msg = err;
        else if(err.message)        msg = err.message;
        else if(err.description)    msg = err.description;
        else                        msg = 'Unknown';

        str += '<li><font color="red">(Error) ' + property + ': ' + msg +'</font></li>';
      }
    }

      // Close indent
      str += '</ul>';

    return str;
}

Also console.log(obj) is cool, but I recently found another very cool function. Try console.dir(obj), then in the console you will see that your obj will be a nice little node type structure which you will be able to look at all depth levels. Try

console.dir(String)
// or  
obj = {'this' : 'that', 'one' : [2,3,4,5], 'A' : {} }; console.dir(obj)