CODEWITHSUNDEEP
javascriptjquerygoogle-chromeconsole
Fellow Stranger
Fellow Stranger

Reputation: 34013

I want to display an object's values in chrome's console

It's something I'm missing in Chrome's console. I'm following a screencast where a javascript object is displayed in a browsable tre-like structure like this:

(arrow here) Object

When typing this for example, I'm only getting an empty array:

jQuery()

Upvotes: 1

Views: 2951

Answers (2)

Joseph Silber
Joseph Silber

Reputation: 219930

If you want to browse the elements within the jQuery object, you'll have to select something first.
$() returns an empty jQuery object.

If, on the other hand, you want to browse the methods/properties of the object created, you should use the console.dir method, which will give you a more in-depth view of your object:

console.dir(jQuery());

Here's the fiddle: http://jsfiddle.net/asYay/

Upvotes: 4

Beat Richartz
Beat Richartz

Reputation: 9622

The Object you are getting by typing 

jQuery()

is an empty jQuery Object, which is represented by the same syntax as an empty array

[]

jQuery Objects are Array-like objects of html elements you select from the body. In your case, the selector (the first argument of the function which you would normally write into the function) is empty, so there is nothing to search for for jQuery and it returns an empty object. If you would pass an argument with a DOM element (for example the body), it would return the body within the array

jQuery('body') //=> Array with the body html element inside

Note that HTML elements within the jQuery Object are normally not represented the same as standard objects in the Google Console. For standard objects, you will get the Object with its properties as a tree structure with an arrow before it to expand it (like the one you see in the screencast), with HTML elements, you get the DOM node, but no properties or methods to expand.

To see the difference, try this:

Display of an instance or a standard object in the Chrome console:

var object = {
  hi: 'im an object', 
  and_i: 'am represented as a tree like structure', 
  i_can_haz: function() { return 'this is great, it shows all the stuff' }
};

If you type again:

object

You will get the Chrome Console Object representation.

For a HTML Object, just do this

var object = document.getElementsByTagName('body');

And if you want to access its properties and functions, use the dir method

dir(object);

You can use dir on virtually any object to access the properties

And object will be a representation of the body element. As said before, all jQuery does when selecting is putting these elements into an array, essentially.

Upvotes: 2

Related Questions