Javascript debug start and run really slow (WSL)

[michaelnguyen08]

Type: Bug

Steps to reporduce:

• Open vscode in wsl, any folder
• Open javascript debug terminal and run any script or start debugging any npm script

Video: https://drive.google.com/file/d/1Yj4PpTHpE47V4oP-xT4LGEw8zs3G1dQN/view?usp=sharing

Actual result: it is really slow to start the process and run it (it can take a few minutes)

Expected result: start and run fast

VS Code version: Code 1.88.0 (5c3e652f63e798a5ac2f31ffd0d863669328dc4c, 2024-04-03T13:26:18.741Z) OS version: Windows_NT x64 10.0.22631 Modes: Remote OS version: Linux x64 5.15.146.1-microsoft-standard-WSL2

System Info

|Item|Value| |---|---| |CPUs|AMD Ryzen 7 7840S with Radeon 780M Graphics (16 x 3294)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: enabled_on
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_graphite: disabled_off
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: enabled| |Load (avg)|undefined| |Memory (System)|27.82GB (12.26GB free)| |Process Argv|--crash-reporter-id f0e6a8cb-ddb5-4ba0-a18e-34a1f5ed176d| |Screen Reader|no| |VM|0%| |Item|Value| |---|---| |Remote|WSL: Ubuntu| |OS|Linux x64 5.15.146.1-microsoft-standard-WSL2| |CPUs|AMD Ryzen 7 7840S with Radeon 780M Graphics (16 x 3293)| |Memory (System)|13.56GB (12.21GB free)| |VM|0%|

Extensions (17)

Extension|Author (truncated)|Version ---|---|--- better-comments|aar|3.0.2 Bookmarks|ale|13.5.0 es7-react-js-snippets|dsz|4.4.3 auto-rename-tag|for|0.1.10 jupyter-keymap|ms-|1.1.2 remote-containers|ms-|0.354.0 remote-ssh|ms-|0.110.1 remote-ssh-edit|ms-|0.86.0 remote-wsl|ms-|0.88.0 vscode-remote-extensionpack|ms-|0.25.0 remote-explorer|ms-|0.4.3 remote-server|ms-|1.5.1 odoo-snippets|mst|2.3.0 material-icon-theme|PKi|4.34.0 vim|vsc|1.27.2 vscode-caddyfile-syntax|zam|1.0.4 vscode-styled-components|sty|1.7.8 (1 theme extensions excluded)

A/B Experiments

``` vsliv368cf:30146710 vspor879:30202332 vspor708:30202333 vspor363:30204092 vswsl492:30256859 vscoreces:30445986 vscod805:30301674 binariesv615:30325510 vsaa593:30376534 py29gd2263:30899288 c4g48928:30535728 azure-dev_surveyone:30548225 962ge761:30959799 pythongtdpath:30769146 welcomedialog:30910333 pythonidxpt:30866567 pythonnoceb:30805159 asynctok:30898717 pythontestfixt:30902429 pythonregdiag2:30936856 pyreplss1:30897532 pythonmypyd1:30879173 pythoncet0:30885854 2e7ec940:31000449 pythontbext0:30879054 accentitlementsc:30995553 dsvsc016:30899300 dsvsc017:30899301 dsvsc018:30899302 cppperfnew:31000557 d34g3935:30971562 fegfb526:30981948 bg6jg535:30979843 ccp2r3:30993541 dsvsc020:30976470 pythonait:31006305 gee8j676:31009558 dsvsc021:30996838 gd77d436:30999572 ```

[kenkenpa198]

Hello. I am having the same problem.

When I start debugging on a project created with Next.js in WSL, it stops after running $ npm run dev. The process proceeds gradually as you wait for 5 to 10 minutes.

Environment

System Info

|Item|Value| |---|---| |CPUs|12th Gen Intel(R) Core(TM) i5-12400F (12 x 2496)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: enabled_on
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_graphite: disabled_off
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: enabled| |Load (avg)|undefined| |Memory (System)|15.85GB (4.59GB free)| |Process Argv|--folder-uri=vscode-remote://wsl+Ubuntu/home/kenkenpa198/works/develop/helloworld-next-app --remote=wsl+Ubuntu --crash-reporter-id 2c7d9fc9-7f1b-4727-84b1-927616dad247 --crash-reporter-id 2c7d9fc9-7f1b-4727-84b1-927616dad247| |Screen Reader|no| |VM|0%| |Item|Value| |---|---| |Remote|WSL: Ubuntu| |OS|Linux x64 5.15.133.1-microsoft-standard-WSL2| |CPUs|12th Gen Intel(R) Core(TM) i5-12400F (12 x 2496)| |Memory (System)|7.68GB (5.77GB free)| |VM|0%|

Extensions (43)

Extension|Author (truncated)|Version ---|---|--- mermaid-markdown-syntax-highlighting|bpr|1.6.0 es7-react-js-snippets|dsz|4.4.3 vscode-drawio|hed|1.6.6 less-toml|jug|0.6.0 dotenv|mik|1.0.1 jupyter-keymap|ms-|1.1.2 remote-containers|ms-|0.354.0 remote-wsl|ms-|0.88.0 laravel5-snippets|one|1.18.0 material-icon-theme|PKi|4.34.0 vscode-zipfs|arc|3.0.0 regex|chr|0.4.0 vscode-markdownlint|Dav|0.54.0 vscode-eslint|dba|2.4.4 vscode-html-css|ecm|2.0.9 EditorConfig|Edi|0.16.4 vscode-github-actions|git|0.26.2 vscode-htmlhint|HTM|1.0.5 reg|ion|1.1.0 vscode-insertdatestring|jsy|2.3.1 vscode-wsl-workspacefolder|lfu|1.1.2 vscode-autohotkey-plus-plus|mar|5.0.3 rainbow-csv|mec|3.11.0 git-graph|mhu|1.30.0 vscode-docker|ms-|1.29.0 vscode-language-pack-ja|MS-|1.88.2024041009 csdevkit|ms-|1.4.29 csharp|ms-|2.23.15 vscode-dotnet-runtime|ms-|2.0.3 vscodeintellicode-csharp|ms-|2.0.25 debugpy|ms-|2024.4.0 python|ms-|2024.4.1 vscode-pylance|ms-|2024.4.1 powershell|ms-|2024.2.0 autodocstring|njp|0.6.1 vscode-sql-formatter-mod|nmr|1.4.5 vsnotes|pat|0.7.1 LiveServer|rit|5.7.9 trailing-spaces|sha|0.4.1 markdown-preview-enhanced|shd|0.8.13 markdowntable|Tak|0.11.0 volar|Vue|2.0.10 markdown-all-in-one|yzh|3.6.2 (2 theme extensions excluded)

A/B Experiments

``` vsliv368cf:30146710 vspor879:30202332 vspor708:30202333 vspor363:30204092 vscod805:30301674 binariesv615:30325510 vsaa593cf:30376535 py29gd2263:30899288 vscaac:30438847 c4g48928:30535728 azure-dev_surveyone:30548225 962ge761:30959799 pythongtdpath:30769146 pythonidxpt:30866567 pythonnoceb:30805159 asynctok:30898717 pythontestfixt:30902429 pythonregdiag2:30936856 pyreplss1:30897532 pythonmypyd1:30879173 pythoncet0:30885854 h48ei257:31000450 pythontbext0:30879054 dsvsc016:30899300 dsvsc017:30899301 dsvsc018:30899302 cppperfnew:31000557 d34g3935:30971562 fegfb526:30981948 bg6jg535:30979843 ccp2r3:30993541 dsvsc020:30976470 pythonait:31006305 gee8j676:31009558 dsvsc021:30996838 gd77d436:30999572 945dj816:31013170 ```

Reproduce

1. Create a Next.js project. Reference: API Reference: create-next-app | Next.js

   # in Ubuntu (on WSL with Zsh)
   
   # Make Next.js project
   $ npx create-next-app@latest
   ✔ What is your project named? … helloworld-next-app
   ✔ Would you like to use TypeScript? … No / Yes # Yes
   ✔ Would you like to use ESLint? … No / Yes # Yes
   ✔ Would you like to use Tailwind CSS? … No / Yes # No
   ✔ Would you like to use `src/` directory? … No / Yes # Yes
   ✔ Would you like to use App Router? (recommended) … No / Yes # Yes
   ✔ Would you like to customize the default import alias (@/*)? … No / Yes # No
   ...
   Success! Created helloworld-next-app at /home/.../helloworld-next-app
   
   # Change directory
   $ cd helloworld-next-app
   
   # Open with VS Code
   $ code .

2. Use VS Code to place a debug configuration file into .vscode/launch.json. Reference: Configuring: Debugging | Next.js

   

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "Next.js: debug server-side",
         "type": "node-terminal",
         "request": "launch",
         "command": "npm run dev"
       },
       {
         "name": "Next.js: debug client-side",
         "type": "chrome",
         "request": "launch",
         "url": "http://localhost:3000"
       },
       {
         "name": "Next.js: debug full stack",
         "type": "node-terminal",
         "request": "launch",
         "command": "npm run dev",
         "serverReadyAction": {
           "pattern": "- Local:.+(https?://.+)",
           "uriFormat": "%s",
           "action": "debugWithChrome"
         }
       }
     ]
   }

3. Click Run and Debug, then Start Debugging with Next.js: debug server-side selected.

   

4. The DEBUG CONSOLE will be opened, but nothing will be displayed at this point.

   

5. Click TERMINAL. It appears to stop with $ npm run dev displayed.

   

6. Wait 5 to 10 minutes and it will gradually execute as shown in michaelnguyen08's video.

   

Supplementary info

• WSL extensions are already activated. And the same was true even after disabling the extension with $ code --disable-extensions .
• After the run completes, Google Chrome opens but nothing is displayed (Slow connection?).
• If I cancel the execution with Ctrl + C and send an npm command such as $ npm --version on the debug console, the result is not returned. If you use $ node --version, it will return immediately.
• If I open another zsh in VS Code terminal and run $npm run dev, the server starts normally.
• Performing the same procedure on the Windows side or MacOS works fine.
• The startup of ~/.vscode-server/bin/e170252f762678dec6ca2cc69aba1570769a5d39/extensions/ms-vscode.js-debug/src/bootloader.js which seems to be executed behind the scenes seems to be slow. Or is it due to WSL 2 and Windows Performance across OS file systems?

---

Any other information needed will be provided. Thank you in advance.

[michaelnguyen08]

@roblourens is there any update on this?

[roblourens]

Thanks for the video but it's very long... I didn't see whether you start node outside of a debug terminal to confirm that it starts fast in that case?

[connor4312]

I suspect it's some WSL networking oddities, of which there are many -- naturally I don't reproduce this. As a start I recommend making sure you're running the latest version of WSL, which you can grab from https://github.com/microsoft/WSL/releases

[connor4312]

This might actually be https://github.com/microsoft/vscode-js-debug/issues/2004 depending on your configuration.

Please try the next nightly build (8 hours from now) and let me know if it's fixed for you.

[kenkenpa198]

@connor4312 Thanks for the reply. I have tried the following but no improvement.

1. updated WSL version from 2.0.14.0 to 2.1.5 .
2. installed nightly build of microsoft/vscode-js-debug.

Regarding WSL, I also tried the pre-release version 2.2.4, but there was no change.

[connor4312]

Ah, apologies, it looks like there's a pipeline issue that prevented the nightlies from getting published. I'll let you know when the next build is available.

[michaelnguyen08]

@connor4312 sorry about the video, I made another 20 seconds video for you to compare (running the April update), and as you mentioned above, I disabled the firewall, and still no luck, no improvement

Version: 1.89.0 (user setup) Commit: b58957e67ee1e712cebf466b995adf4c5307b2bd Date: 2024-05-01T02:09:22.859Z Electron: 28.2.8 ElectronBuildId: 27744544 Chromium: 120.0.6099.291 Node.js: 18.18.2 V8: 12.0.267.19-electron.0 OS: Windows_NT x64 10.0.22631

https://drive.google.com/file/d/1DdknUbliZ_9xb_rOqyFpOzZ6n2t6X-d9/view?usp=sharing

[connor4312]

Please confirm whether you're using the latest nightly build as instructed in https://github.com/microsoft/vscode/issues/209910#issuecomment-2083222740 (which is now available)

[michaelnguyen08]

@connor4312 thank you, the nightly build seems fixed the issue, it works for me

[kenkenpa198]

@connor4312 I too have solved my problem. Thank you very much!

[connor4312]

Thanks for confirming! Will close this as a dupe