Bug 30962 – Use Object#toString to render object name in console and object tree

• Component: Web Inspector
• Status: RESOLVED FIXED

[Dan Dean]

I find it very useful that Firebug uses the toString method of an object to render the identifier of an object in all JS object inspections. I would love to see this bit of functionality in the WebKit Web Inspector.

Example:

console.log({
    toString: function() {
        return "[object MyAwesomeObject]";
    }
});

Firebug Console:
--> MyAwesomeObject

WebKit Console:
--> Object

[Timothy Hatcher]

We could do this. Right now we avoid it since some default toString methods are less than desirable (string, array to name a couple.)

[Dan Dean]

(In reply to comment #1)
> We could do this. Right now we avoid it since some default toString methods are
> less than desirable (string, array to name a couple.)

I agree with you on the native types. I think the current behavior should remain for String, Array, Number, Boolean and RegExp objects. Probably a couple others too, like HTMLElement...

This functionality is very useful for custom objects, though I understand how the implementation could be rather complex.

[Timothy Hatcher]

I agree we should do this for custom object.

[Timothy Hatcher]

<rdar://problem/7444878>

[Steven Roussey]

Created attachment 53502 [details]
Image of usefulness of toString in the ExtJS framework

Reference: http://www.extjs.com/forum/showthread.php?97007-ExtJS-debugging-help-in-Firebug

[Steven Roussey]

Created attachment 53503 [details]
Image of usefulness of toString in the ExtJS framework

Reference: http://www.extjs.com/forum/showthread.php?97007-ExtJS-debugging-help-in-Firebug

[Joseph Pecoraro]

So we've made some improvements here. We don't parse toString's, but we do deeper analysis of object's constructor properties / native type information.

We recently improved our handling here:

  js> function Foo() {}; new Foo // Always handled this
  Foo {}

  js> Bar = function() {}; new Bar // Just made this work
  Bar {}

As for letting scripts provide a name. If we end up with "Object" given the analysis above, then we fallback to "obj.constructor.name" if it is available. A rather crude example:

  js> console.log({constructor:{name:"test"}})
  test {}

--

That said, neither Firebug nor FireFox's developer tools seem to do this anymore. I think they have likely moved to constructor.name or better inference as well.