Debugger setting a different 'this' than node.js when using arrow functions

[ejose19]

• VSCode Version: 1.20
• OS Version: Ubuntu

Steps to Reproduce:

1. Create a js file and add this code:

let Person = {
    name: 'Test',
    getNameF: function() {
        console.log(this.name);
    },
    getNameAF: () => {
        console.log(this.name);
    },
};

Person.getNameF();
Person.getNameAF();

2. Run the code with node and you will get:

Test
undefined

Which implies that the 'this' inside the arrow function is undefined (as should be), however if you add a breakpoints on:

Person.getNameF();
Person.getNameAF();

You will notice the 'this' value in the debugger is the same in both functions! so for some reason it's not binding to node 'this'

Note: Tested on chrome browser debugger and the expected 'this' value (which is undefined) appears for the arrow function, so this problem is related to vs code only.

[weinand]

I've compared the behaviour of VS Code and Chrome Dev Tools.

Here is the Chrome Dev Tools state for the two breakpoints.

Line 4:

Line 7:

The Scope view (Variables view in VS Code) shows no difference for both breakpoints in CDT and in VS Code (which seems to be a bug both in VS Code and CDT).

Evaluating "this" in the REPL results in VS Code in this:

Which is the same as in CDT:

So, VS Code and CDT behave the same.

But I see a difference when hovering over "this".

In VS Code there are no differences (which is the bug), but in CDT they differ.

The problem is that VS Code implements the hover by matching variables against the information available in the Variables view. Since there are no differences shown in that view the hover does not show any differences either.

If I enable an option in VS Code to implement the hover by using "evaluate", the problem is solved:

Here is the hover in CDT (and the discrepancy between hover and scope view):

@roblourens @isidorn should we turn on evaluate based hovers for node-debug?

[isidorn]

/findDuplicates

[vscodebot]

Potential duplicates:

• Debuger error: It loses the this context when destructuring a callback (#44743)
• PHP Debugger (#43134)
• Ctrl + Shift + F5 to start debugger even if the debugger isn't currently running (#24425)
• When scrolling down through a long body of code, place a cookie crumb of the function(s) you are in. (#44042)
• Show unverified function breakpoints in debug viewlet (#3388)

[roblourens]

This is #13967 dupe bot found one but not the original.

It is fixed in Chrome so the fix should be coming down the pipeline to newer node versions very soon.

[roblourens]

should we turn on evaluate based hovers for node-debug?

I don't think we should turn it on to work around this one bug, although it's been filed a few times now. I wouldn't want to trigger side effects in getters without an explicit evaluate step like Chrome devtools has.

[isidorn]

@roblourens why don't we turn on evalute on hover at least for insiders to get some feedback before making a final decision?
Imho triggering a getter will be a very rare case, while the evaluate will be much more precise compared to our current heuristic of looking at the variables (ignoring the scope ranges which are wrong most of the time)

[roblourens]

We can try it. Have there been many issues besides the scope ranges issue?

Is it weird that CDT shows the ReferenceError when evaluating throws?

[roblourens]

I wouldn't want to trigger side effects in getters without an explicit evaluate step like Chrome devtools has.

I'm wrong, if you hover over something.getter in CDT, there is no explicit step. Only when you hover something and see the getter property. Not sure what the point of having one but not the other is.

In vscode we invoke getter when you hover something.

It's still worth trying though.

[isidorn]

@roblourens there have not been so many issues lately, but through history I remember people always complaing about this.
Yeah, let's try it out and get feedback for a couple of weeks and than make an informed decision.

Another idea is to do evaluate when our first strategy does not find any results. So to do evaluate as a fallback. We would probably need a new capability for this though.

[ejose19]

I updated my vscode insiders to latest version and still get this to reference the object, both by side panel and by hovering. Was this implemented yet?

[ejose19]

Also worth nothing, when I used google chrome my results differ from @weinand, as CDT was showing the correct result in both hovering and side panel.

[roblourens]

It's not checked in to Insiders yet.