How to make JavaScript objects more readable/navigable?

Question

I'm creating an object with a bunch of nested objects. When working with the web inspector, I'm constantly having to reorient myself because all of these objects are simply called Object. A condensed version of my object tree looks like this:

v Object
    v fields: Array[3]
        v 0: Object
            v fields: Array[2]
                v 0: Object
                    name: 'name'
                    placeholder: 'name'
                    tag: 'input'
                    type: 'text'
                > 1: Object
            name: 'name'
            tag: 'fieldset'
        > 1: Object
        > 2: Object
    name: 'name'

This gets old fast. Is there any way to make this more readable/navigable? If so, is it efficient? Like this:

v form
    v fields: Array[3]
        v 0: fieldset
            v fields: Array[2]
                v 0: input
                     name: 'name'
                     placeholder: 'name'
                     tag: 'input'
                     type: 'text'
                > 1: textarea
            name: 'name'
            tag: 'fieldset'
        > 1: fieldset
        > 2: button
    name: 'name'

Or is this just something I'm going to have to deal with?

Answer 1

To expand all properties automatically and not read Object or Array[l] everywhere, a common technique is to log the prettyfied JSON representation. It also has the benefit of not changing in the console when your objects are mutated after being logged. You only should not do it with very large objects, and it's impossible on cyclic objects.

console.log(JSON.stringify(tree, null, 4));

Answer 2

If you would prefer to read plain text, you can console.log(JSON.stringify(your_object)).

Answer 3

Use a named function to create your objects:

  var a = {foo:"bar"};
  var b = new function myobj() {
    this.foo = "bar";
  }
  console.log(a,b); // Object, myobj

If you want reusable objects, you should use

  function myobj() {
    this.foo = "bar";
  }
  var objA = new myobj();
  var objB = new myobj();
  console.log(objA,objB); // myobj, myobj

If you want to dive deep into the differences, see this very detailed answer of TJ Crowder to my question.