Consider surfacing mapped variable names

[roblourens]

Sourcemaps can represent variable name mappings, like when they're changed in minified code, or TypeScript's this => _this. Chrome DevTools shows the original variable names in their variables sidebar: https://bugs.chromium.org/p/chromium/issues/detail?id=327092

One problem is that if you don't know the original names, you can't inspect them in the console or with watches. But I think it would still make debugging easier to have them just in the variables pane.

We could go one step further by showing both names, in the variable name space, just like myArray (t). And another step by adding this to the protocol so that the context menu "Add to Watch" would work. I don't know if it's a useful concept outside of JS though.

[isidorn]

This is a great feature request, however after discussing with @weinand we would need an AST understanding of the language in order to support this feature. Since the source map talks about the location in the file and there is no other correlation between the minified name and the original one.

We should investigate in the future what it would take for us to have a better understanding of the AST and decide if that logic should live on the vscode or the debug adapter side.
Unassigning myself since I am not a fan of multi-assigned issues :)

Other areas which would profit from a better AST understanding are the debug hover and showing evaluted variables inlined.

[nojvek]

Does the debug adapter expose an api to get mapped names per line?

I believe source map does expose how a variable in source code is mapped to transpiled code, right?

[roblourens]

The debug adapter returns the list of variables to vscode, so if we wanted to show the variables from TS, the debug adapter would do that mapping. The source-map library that vscode-chrome-debug-core uses exposes an API for this.

[weinand]

@nojvek source map support is an implementation detail of a debug adapter that does not leak through the API to VS Code. So VS Code does not know anything about source maps.

The source map specification defines naive support for symbol mappings (as opposed to range mapping), but I do not see how that can be used in practice without scope information. So something is missing here...

In addition I do not see broad support for symbol mappings in transpile tools. E.g. TypeScript (tsc) leaves the symbol mapping always empty and I'm not aware of a tsc option to turn symbol mappings on.

[nojvek]

This seems like a bug in Typescript not emitting names. Filed: microsoft/TypeScript#14688 So are you saying, once you have names correctly outputted in sourcemaps (babel does this), you are able to make this work? For my scenario, I will try to bypass ES5 output and just go directly to ES6.

…

On Thu, Mar 16, 2017 at 5:02 AM Andre Weinand ***@***.***> wrote: @nojvek <https://github.com/nojvek> source map support is an implementation detail of a debug adapter that does not leak through the API to VS Code. So VS Code does not know anything about source maps. The source map specification defines naive support for symbol mappings (as opposed to range mapping), but I do not see how that can be used in practice without scope information. So something is missing here... In addition I do not see broad support for symbol mappings in transpile tools. E.g. TypeScript (tsc) leaves the symbol mapping always empty and I'm not aware of a tsc option to turn symbol mappings on. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12066 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA-JVFA1PxwYrhT7-gooVDk7_hvMIhRgks5rmSTvgaJpZM4J9pi6> .

[roblourens]

Maybe, I think we don't yet have a good understanding of the work involved to make it work.

[roblourens]

microsoft/TypeScript#9627

[Lazarencjusz]

@roblourens can the problem with sourcemaps be fixed now? It's been half of the year since last activity here and many TypeScript versions came in.

[gynet]

I am still observing many related issues especially when typescript got compiled, such as typescript rename 'this' to '_this", or the variable names got minified somehow, arrow function context. This issue is really annoying to customers, and it makes VsCode debugger not useful sometimes. I think this feature should be considered with higher priority.

[themaskedavenger]

This is true - I'm trying to switch from Webstorm to VSCode and this makes the debugger virtually useless...how can you debug typescript code if you can't see the actual variables as they are named in the ts code?! Webstorm does this no problem.

[connor4312]

We now support this, in today's nightly. There is even limited support in the evaluation contexts, like the REPL and "watch" view.

REPL completions for renamed variables don't work, and this isn't supported in conditional breakpoints.