Bug 11401 - Web Inspector doesn't understand object.method = function() {} syntax
Summary: Web Inspector doesn't understand object.method = function() {} syntax
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (Deprecated) (show other bugs)
Version: 420+
Hardware: All All
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2006-10-24 08:29 PDT by Jonathan Hurshman
Modified: 2013-07-16 08:19 PDT (History)
7 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Jonathan Hurshman 2006-10-24 08:29:32 PDT
Drosera's function list will list as "(anonymous function)" any function defined using the syntax:

SomeObject.someMethod = function(a, b) {


SomeObject.prototype.someMethod = function(a, b) {

This makes the function list not very useful if this particular syntax is frequently used (as it is in the projects I work on).

Please enable Drosera to determine the function name for methods defined by such syntax.
Comment 1 Mark Rowe (bdash) 2006-10-24 14:26:42 PDT
It is obvious why this is desirable, but what is less obvious is the difficulty in providing this.  At the time the function object is created, it is anonymous.  Assigning it to a variable or to property on another object does not change this fact.  Consider the following example:
SomeObject.someMethod = function(a, b) { };
SomeOtherObject.someOtherMethod = SomeObject.someMethod;
SomeOtherObject.someOtherMethod(1, 2);

What name should Drosera give to the frame created by the function call in the third line?  Coming up with a solution to this single case appears relatively easy, but is tricky to generalise in a fashion that won't produce more confusing results in some cases.
Comment 2 Jonathan Hurshman 2006-10-24 19:14:53 PDT
I agree, it is tricky. For what it's worth, here's what I've gathered from my observation of other debugging environments, based on this example:

      function SomeObject() { }     
      function SomeObject2() { }
      SomeObject.methodA = function() { 
        var a = "A"; 
      var tempMethod = function() {
        var b = "B";
      SomeObject.prototype.methodB = tempMethod;
      SomeObject.prototype.methodC = SomeObject.methodA;
      SomeObject2.prototype.methodD = SomeObject.prototype.methodB;
      function test() {
        var a = new SomeObject();
        var b = new SomeObject2();

Venkman labels functions with the name of what the function literal is originally assigned to. For this example, Venkman lists two methods labeled "methodA" and "tempMethod", both in the function list and in the call stack.

Firebug just goes with "anonymous", like Drosera currently does. I don't have a Windows machine handy to test Visual Studio's debugger.

Not knowing anything about how Drosera does its thing, I don't know how this would work, but it seems to me that the ideal solution would go beyond Venkman's. It would be great if it would show both the constructor-name-of-'this' and the callee name, as well as referencing the name and context of the original name.

Maybe something along the lines of:

SomeObject.prototype.methodC -> SomeObject.methodA
SomeObject.prototype.methodB -> window.tempMethod
SomeObject2.prototype.methodD -> window.tempMethod

That's getting a bit verbose, but I don't think it would cause confusion.

I must say that I have done heavy-duty JavaScript/AJAX development using Venkman for several years, and I have never once been confused by their function labels. So that solution, while not ideal, appears to me to be adequate.
Comment 3 Timothy Hatcher 2006-11-02 09:20:33 PST
Related to bug 9596.
Comment 4 Timothy Hatcher 2006-11-05 21:34:13 PST
Related to bug 11525.
Comment 5 Per Cederberg 2008-03-11 23:46:50 PDT
I've noted that the MochiKit JavaScript library allows assigning a "NAME" property to anonymous functions. I guess other libraries could have similar mechanisms (as the ordinary function "name" property is read-only).

Perhaps a work-around for this issue would be for Drosera to print the "NAME" value if "name" is undefined? It is pretty easy to name all functions in a namespace with this method by iterating over all properties, objects and prototypes.
Comment 6 Adam Roben (:aroben) 2008-03-13 23:04:57 PDT
Coming up with a good system here would make debugging the Inspector a lot easier.
Comment 7 Timothy Hatcher 2008-05-17 09:20:24 PDT
Still applies to the Web Inspector debugger, moving to that component.
Comment 8 Joseph Pecoraro 2009-10-02 22:48:57 PDT
Is this solved by the Inspector using function's "displayName" property like comment 5 suggests and as detailed in this April 2009 article:

For the example in this bug report:

  SomeObj.someMethod = function(a,b) { ... };
  SomeObj.someMethod.displayName = 'SomeObj.someMethod';

Will properly display SomeObj.someMethod in the profiler.
Comment 9 Timothy Hatcher 2013-07-16 08:19:42 PDT
We also auto detect the name now. Try the latest nightly.