Alex Rivera | Logout

What makes a jQuery object show up as an array in Chrome's Developer Tools?

Asked 2011-08-31T18:30:44.890
10

I'm wondering how it's possible that jQuery objects show up as an array in the console log of Developer Tools in Chrome.

E.g. if I execute $('<a>'), what I see in the console log is:

[<a>​</a>​]

But the following statements are false:

var a = $("<a>");

Array.isArray(a);   // false
a instanceof Array; // false

I tried to modify jQuery and see what happens, and one thing that was surprising is that removing length from the jQuery function removes the array notation:

length: 0, // commenting this line removes array notation

Instead, it then shows up as (arrow is that solid one to expand):

> jQuery.jQuery.fn.jQuery.init

But, if I try to make my own constructor which is supposed to be displayed in array notation, it does not work:

var test = function() { this.length = 0 };

new test();

// Logged (arrow is same one as before):
// > test

So I'm wondering what in the jQuery code makes Developer Tools show instances as an array. What property/function/thing is added to jQuery that makes Developer Tools handle it as an array when displaying an instance?

Edit
Report

1 Answer

4

You probably know this, but console.log is not displaying passed content "as is", it is trying to be "smart" and does some post processing. If you want to see original object "as is", there is console.dir method.

answered 2011-08-31T18:54:57.347

Your Answer