How are the "class names" shown in Chrome's debugger determined? And what are they based on?

For example, with function Foo() {}, the "class name" is fairly obvious:

> function Foo() {}
> new Foo()
Foo {} // shows the "class name" Foo

It would seem that this controlled by the .name attribute, but that is not the case:

> Foo.name = "NotFoo"
> new Foo()
Foo {} // shows "Foo", not "NotFoo"

But sometimes it can be very surprising:

> function subclass(base, methods) {
  var initializer = methods.__init__;
  initializer.prototype = $.extend(initializer.prototype, base.prototype, methods);
  return initializer;
}
> Bar = subclass(Object, { __init__: function() {} });
> new Bar()
subclass.__init__ {__init__: function} // Shows "subclass.__init__"… ?!

How is that "class name" determined?

And, further, is it possible to control or modify?

This seems to be specific to Chrome, as Firefox doesn't appear to try and guess the "class name" in the second example.

How are the "class names" shown in Chrome's debugger determined? And what are they based on?

For example, with function Foo() {}, the "class name" is fairly obvious:

> function Foo() {}
> new Foo()
Foo {} // shows the "class name" Foo

It would seem that this controlled by the .name attribute, but that is not the case:

> Foo.name = "NotFoo"
> new Foo()
Foo {} // shows "Foo", not "NotFoo"

But sometimes it can be very surprising:

> function subclass(base, methods) {
  var initializer = methods.__init__;
  initializer.prototype = $.extend(initializer.prototype, base.prototype, methods);
  return initializer;
}
> Bar = subclass(Object, { __init__: function() {} });
> new Bar()
subclass.__init__ {__init__: function} // Shows "subclass.__init__"… ?!

How is that "class name" determined?

And, further, is it possible to control or modify?

This seems to be specific to Chrome, as Firefox doesn't appear to try and guess the "class name" in the second example.

• javascript
• google-chrome

3 Answers 3

Google Chrome's official website does not help on this, but I point you to this SO:

How are javascript class names calculated for custom classes in Chrome Dev Tools?

I don't think you can override chrome console's "deducing" mechanism.

some console play:

>>function Foo(){}
>>function NotFoo(){}
>>var a = new Foo();
>>a.constructor = NotFoo;
>>a
Foo {constructor: function}
constructor: function NotFoo(){}
__proto__: Foo
>> a instanceof Foo
true
>> a.__proto__.constructor.name
"Foo"
>> a.__proto__.constructor.name = "NotFoo"
"NotFoo"
>> a
Foo {constructor: function}
>> a instanceof Foo
true

If chrome developers wanted to make it pletely unoverridable, you can see how they could've made a check based on webkit's implementation of instanceof...

and: How to check the class of an instance in Javascript?

How is that "class name" determined?

See Chromium source code on github.

• console-dir-es6 testcase
• expected output (2022 update: I cannot locate the latest version of this file in HEAD -- but this is what you can use to determine whether or not you can shape the debugger output to your desires)

You can perhaps backtrack through the first page (might have to go through C code).

And, further, is it possible to control or modify?

You can parse the source of the class with .toString, do a .replace to change the name, and eval the modified source code. You now have a clone of the class that will display properly in the console inspector.

If you have no control over this (it's a third-party class), obviously don't do this, as the third party code may have references to the class. Also it creates a duplicate class; this would be confusing.

However, if you're doing a metaprogramming horror-show (and not for example for a job or anything that may see the light of day...), go ahead and use this. This is my personal tried and true method, until some better API appears. =\

I do not recall if there were performance implications of doing this

functions in Javascript can have name and when you define it like this:

function myfunc(){}

It is the same as if you do:

var myfunc = function myfunc(){}

in this function myfunc is your function's name, which is not unique, it means you can create different functions with the same name, of course you'd better not do that. and when you define your function like:

var myfunc = function(){}

you have created a function without any name, this would be an anonymous function and browser profilers have nothing to show you as the name of your function or as you have mentioned your class.