Show all source code when debugging against a remote process

[yunong]

• VSCode Version: 1.9.1
• OS Version: macOS 10.12.3
• Node.js Version: v6.9.4

I have some workflows where my node process is running remotely. I am using VSCode as my debugger front end, attaching the debugger to the remote process. However, VSCode isn't showing the sources from the remote process, which makes it impossible to set breakpoints.

As an example, when I attach the WebStorm debugger to the same remote process, I can see all of the source code, including the Node runtime source:

Bringing in all of the source code from the remote process would be extremely helpful for our workflow.

[yunong]

cc @dzapata

[weinand]

@yunong in order to better understand the scope of this request, I'd appreciate if you could answer the following questions.

You are talking about "source" but you really mean "loaded scripts", right?

Loaded scripts are only available if the debug session is active (and the node runtime is running). So you would not expect to see this "source" even if you are not attached to a remote node process, right?

In real life the "loaded scripts" do not contain the source but some JavaScript that was generated by a transpilation process (e.g. Babel, TypeScript, WebPack, minify, uglify). I assume that in this case you do not want to set the breakpoints in the generated JavaScript (which might be unreadable) but in the original source?

Where does that "real" source code live? Remotely as well?

[yunong]

@weinand my answers are in-line

You are talking about "source" but you really mean "loaded scripts", right?

Yes, I mean the loaded JS that's in the Node process. You are correct, I would only expect to see this source if I am attached to a Node process.

In real life the "loaded scripts" do not contain the source but some JavaScript that was generated by a transpilation process (e.g. Babel, TypeScript, WebPack, minify, uglify). I assume that in this case you do not want to set the breakpoints in the generated JavaScript (which might be unreadable) but in the original source?

We're not currently doing any transpilation, but if that were the case, it would be nice to be able to specify source-maps for the remote process. You are right, most likely the generate JS will be unreadable.

Where does that "real" source code live? Remotely as well?

Yes, you should assume that we do not have access to the source code at all locally. Do we need access to the remote source? I thought that the Node process itself contained all of the JS in the process space?

[weinand]

@yunong VS Code does support source-maps for the remote process already, but it assumes that the source lives locally (where VS Code has file system access to them), and the generated JavaScript lives remotely and is loaded into the node runtime. This picture shows this "normal" setup:

VS Code can relatively easy access the JS scripts loaded in the runtime because the node runtime provides API for this through the Node Debugger protocol. But VS Code has no access to other files on the remote system (e.g. in the picture from above VS Code has no access to the generated JavaScript that is not loaded into the node runtime).

From your answers to my questions I learned that you prefer to have all source and the generated code on the remote system:

The problem with that approach is that VS Code can only access the scripts loaded into the runtime. But since the "real source" is never loaded into the runtime, VS Code cannot access it easily.

I wonder whether it is possible to mount the remote filesystem into the local system?

With this approach VS Code would have access to source and generated JavaScript (and this approach would already work today).

[yunong]

@weinand Let's table transpilation and source maps for now -- that's not our mainline use case.

Our primary use case is trying to debug a remote process using the loaded scripts inside the remote process. Debugging remote processes is currently rather difficult in VSCode because it doesn't show the loaded scripts in the debugger view. As you said, VSCode can already access the scripts loaded in the runtime, is it possible to display them and use them in the debugger?

Most of the time we don't have any local source code available. For example, we may be debugging a service in the cloud, remotely, or even in a container running locally, and having access to the loaded scripts once we attach the process would unlock the full potential of the VSCode debugger.

[weinand]

@yunong so mounting the remote file system is not possible in your setup?

Supporting "loaded scripts" in the UI requires considerable implementation effort on our side. We did not consider this an important use case for VS Code because VS Code was designed as an editor for local files and not a remote debugger per se (and we are not aware of any other requests for that feature).

If we would implement the feature, it would not help in any way

• with JavaScript that has not been loaded in the runtime (because these files are not visible through the debugger connection),
• with the remote source/remote transpilation scenario from above (shown in the 2nd picture).

[yunong]

@weinand Most of the time it's quite difficult to mount the remote file system. The remote process is in the cloud, firewall and security considerations generally make it difficult to mount the remote FS in.

Regarding remote debugging -- is this something that's better suited with Visual Studio? JS engineers here at Netflix really love VSCode, for its simplicity, ease of use, debugger, and powerful feature set.

[weinand]

@yunong So the scope for this feature request is really "Show all loaded scripts when debugging against a remote process".
The request is already on our backlog and we will considering it in the upcoming planning discussions.

/cc @egamma @seanmcbreen

[weinand]

@yunong would a QuickPick UI be sufficient (instead of a full explorer-like navigator panel)?

[delfinof]

@weinand I'd like to point out the scenario discussed here TypeStrong/ts-node#46 (comment)

Basically the point is to attach visual studio code to a process running in a docker container started with ts-node.
While the *.ts sources are local, when you start a typescript program with ts-node in a docker container the transpiled javascript and the sourcemaps are written under /tmp/ts-node-hash/hash/hash.(js|js.map) in the container.
Every time you set a breakpoint in the typescript file, vscode tries to load the source map without success and assumes the line in the TS corresponds to the line in JS (which is not true most of the time, e.g. if you strip comments etc).

This looks like an hybrid of the scenarios you described above:

• source files are available both locally and remotely
• transpired files and source maps are only available in the remote system

Is it something you are going to support?

Thanks

[yunong]

@weinand I did some googling and couldn't find what a QuickPick UI looks like. Would you mind showing an example?

[weinand]

@yunong Quickpick is the ubiquitous VS Code drop down menu, e.g. for picking files:

You type some characters and you quickly get a list of all matching files.

The "Quickpick" mechanism would allow us to support access to loaded scripts fairly quickly because we would not have to build a new explorer.

[yunong]

@weinand this would work for us 👍
Of course having an explorer is nicer, but this immediately unblocks our debugging work flow.

[weinand]

@delfinof your scenario is already supported (but it requires some effort to setup and getting the sourcemaps right). It is unrelated to this issue.

Please create an issue in the vscode repo and we can discuss it there.

[weinand]

@yunong I did a quick prototype:

Would something like this work for you?

/cc @isidorn @egamma

[yunong]

@weinand Much thanks! 🍺

[weinand]

In the next Insider release (but there will be bugs...)

[yunong]

@weinand Is this now in the latest insider release?

[roblourens]

Yes, this is in the last stable release, 1.11.