Debugger doesn't properly catch execution in TypeScript

antoineol commented 2 years ago

Issue Type: Bug

When:

I started noticing the issue today. It has likely started today or in the past few days. The only noticeable actions are VSCode and docker updates that have been installed recently. I can't relate it to any other event (no change in the dev env, stack, tooling...)

What:

When I start the debugger client, it seems to connect to the app as expected.
If I add a breakpoint through VSCode code editor, it does NOT catch the execution.
If I add a "debugger" keyword, it catches the execution and I can see the variable and their values. BUT:
- The code editor does NOT show the current line the execution is on
- The call stack is shown but grayed, with "Unknown Source" for all entries. Clicking them does not seem to do anything in the code editor.

Screenshot illustrating those:

The breakpoint was skipped. In this screenshot, the execution is paused on the debugger instruction (I can check it with the variables panel). No highlight and "Unknown Source" in the stacktrace.

The line number in the stack trace matches the JS file, not the TS file.

What I tried:

Downgrade VSCode to 1.67.1 and 1.67.0, no luck.
Downgrade Docker Desktop to 4.8.1, no luck.
Reinstalling both (latest version), no luck.

Maybe it's related to a plugin (core or external) update? But I have no idea how to downgrade them, so I couldn't check.

Environment info

VSCode UI is running on Windows
The source code is on WSL2, and I'm using the "Remote - WSL" extension to open the source code.
The nodejs app is running on a Docker container (in WSL2). So it's a "remote" debugging.
The nodejs app (NestJS) starts with the command: nest start --watch --debug 0.0.0.0:9229
VSCode attaches the debugger with a config in launch.js (workspace):

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Docker: Attach to Node",
      "type": "node",
      "request": "attach",
      "restart": true,
      "remoteRoot": "/app",
      "localRoot": "${workspaceFolder}/backend-clapy"
    }
  ]
}

When running the node app in WSL2 directly (not inside a docker container), it works as expected.

VS Code version: Code 1.67.0 (57fd6d0195bb9b9d1b49f6da5db789060795de47, 2022-05-04T12:06:02.889Z) OS version: Windows_NT x64 10.0.19044 Restricted Mode: No Remote OS version: Linux x64 5.10.60.1-microsoft-standard-WSL2

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz (4 x 2904)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: disabled_off
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
oop_rasterization: enabled
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_renderer: enabled_on
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled| |Load (avg)|undefined| |Memory (System)|31.89GB (13.79GB free)| |Process Argv|--crash-reporter-id 1f4c768f-1a7b-4358-bdc4-d730daa1828d| |Screen Reader|no| |VM|0%| |Item|Value| |---|---| |Remote|WSL: Ubuntu-20.04| |OS|Linux x64 5.10.60.1-microsoft-standard-WSL2| |CPUs|Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz (4 x 2904)| |Memory (System)|24.97GB (19.10GB free)| |VM|0%|

Extensions (20)

Extension|Author (truncated)|Version ---|---|--- vscode-eclipse-keybindings|alp|0.16.0 tsl-problem-matcher|amo|0.6.2 dotenv|mik|1.0.1 vscode-language-pack-fr|MS-|1.67.3 remote-containers|ms-|0.234.0 remote-wsl|ms-|0.66.3 mdx|sil|0.1.0 svg-preview|Sim|2.8.3 vscode-css-modules|cli|0.4.1 css-theme-completions|con|0.0.4 vscode-eslint|dba|2.2.2 gitlens|eam|12.0.6 vscode-html-css|ecm|1.12.2 code-runner|for|0.11.7 vscode-graphql|Gra|0.4.4 git-graph|mhu|1.30.0 vscode-docker|ms-|1.22.0 vscode-language-pack-fr|MS-|1.67.3 LiveServer|rit|5.7.5 vscode-surround|yat|1.3.0

A/B Experiments

``` vsliv368cf:30146710 vsreu685:30147344 python383cf:30185419 vspor879:30202332 vspor708:30202333 vspor363:30204092 vswsl492cf:30256860 pythonvspyl392:30443607 pythontb:30283811 pythonvspyt551cf:30345471 pythonptprofiler:30281270 vshan820:30294714 vstes263:30335439 pythondataviewer:30285071 vscod805:30301674 pythonvspyt200:30340761 binariesv615:30325510 bridge0708:30335490 bridge0723:30353136 vsaa593cf:30376535 vsc1dst:30438360 pythonvs932:30410667 wslgetstarted:30449410 pythonvsnew555:30457759 vscscmwlcmt:30465135 cppdebug:30492333 vsclangdc:30486549 ```

vscodenpa commented 2 years ago

Thanks for creating this issue! It looks like you may be using an old version of VS Code, the latest stable release is 1.67.2. Please try upgrading to the latest version and checking whether this issue remains.

Happy Coding!

roblourens commented 2 years ago

What language or debug extension are you using? Please file this on the repo for the debug extension

antoineol commented 2 years ago

Thanks for the quick answer! I'm using TypeScript and I'm debugging using the embedded debugger.

I think I omitted an important piece (I've just edited):

Environment info

VSCode UI is running on Windows
The source code is on WSL2, and I'm using the "Remote - WSL" extension to open the source code.
The nodejs app is running on a Docker container (in WSL2). So it's a "remote" debugging.
The nodejs app (NestJS) starts with the command: nest start --watch --debug 0.0.0.0:9229
VSCode attaches the debugger with a config in launch.js (workspace):

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Docker: Attach to Node",
      "type": "node",
      "request": "attach",
      "restart": true,
      "remoteRoot": "/app",
      "localRoot": "${workspaceFolder}/backend-clapy"
    }
  ]
}

Should I file it here: https://github.com/microsoft/vscode-remote-release ?

antoineol commented 2 years ago

I added a screenshot above to illustrate the breakpoint thing. I also tried to reinstall VSCode + Docker, no luck :(

I don't know what else I can try to get back to a working debugging environment.

antoineol commented 2 years ago

Update: when I run the nodejs app in WSL2 directly (not inside a docker container), the debugger works as expected. I use it as a workaround now.

Another tip, just in case: the docker container debugging works from WebStorm (although they have another issue with their config, I assume unrelated).

roblourens commented 2 years ago

Not sure what's going on, but @connor4312 will need a log. From vscode-js-debug repo:

If you're able to, add `"trace": true` to your `launch.json` and reproduce the issue. The location of the log file on your disk will be written to the Debug Console. Share that with us.

⚠️ This log file will not contain source code, but will contain file paths. You can drop it into https://microsoft.github.io/vscode-pwa-analyzer/index.html to see what it contains. If you'd rather not share the log publicly, you can email it to connor@xbox.com

antoineol commented 2 years ago

Thanks! I've just sent 2 log files to Connor by email. Each log is on a different docker image, cf below.

It's super weird, now the debugging works almost well: the breakpoints are caught and the UI shows all the line highlights and other stuff... Except that it's debugging in the compiled JS code instead of the source TS file. I can't be sure whether it's a vscode issue, sourcemap issue... because I have changed nothing significant since last time it ran well.

What I did today: I tried another docker image to run the node app (node 16-alpine instead of 14-slim), but I have restored the previous version (altough maybe more up-to-date) and I have the new behavior (debug in JS) in both cases. So it doesn't seem related, but I mention it because it's the only thing I've done in the node app that would have anything to do with debugging :)

No other idea.

In the meanwhile, I work with node running outside docker containers, as mentioned previously. The debugging works well there.

connor4312 commented 2 years ago

Back from vacation 👋 And thanks for the logs.

It looks like in both the log files you sent, the remoteRoot is not configured. This is necessary in order to figure out how to map paths between your remote (in this case a docker container) and your local computer. Though in your comments it does look like it's set correctly -- can you make sure everything is set up like you commented?

If the remoteRoot is configured like it says it the comments, then it'll expect the compiled file to locally be at ${workspaceFolder}/dist/features/export-code/2-create-ts-compiler.js. If that's there then I'd expect it to work.

antoineol commented 2 years ago

Hey @connor4312 , hope you enjoyed your vacation!

Well, it seems the issue is now resolved, I have the debugging interface as it was back in the time :) Either I did something wrong I couldn't identify (and I fixed it, no idea how), or something was fixed somewhere in the background.

I confirm the config from my tests 3 weeks ago included the remoteRoot. And when it broke, I hadn't changed the config previously as far as I can remember.

But for the logs I've sent, they were probably missing the remoteRoot. I found I introduced another launch configuration without it 2 weeks ago, probably when testing around things, and I didn't realize I was breaking it. But the config 3 weeks ago was fine, so it doesn't explain the initial issue. Sorry for the misleading logs.

For the initial issue, all good on my side. Should I close this issue?

connor4312 commented 2 years ago

Cool, thanks for confirming!

It sounds like this was just some confusion of the launch configs, so I'll go ahead and close this. If you run into further problems, do not hesitate to open issues 🙂

microsoft / vscode

Debugger doesn't properly catch execution in TypeScript #150036