Breakpoints not working debugging React app in Chrome through Visual Studio Code on Windows 10 and WSL2

I just ran into this and I think I have it working for myself. Using the .script command of the Debugger for Chrome extension, I saw the below output.

› http://localhost:3000/static/js/0.chunk.js (/__vscode-remote-uri__/home/user/projects/TachiWeb-React/src/static/js/0.chunk.js)    - /home/user/projects/TachiWeb-React/node_modules/@babel/runtime-corejs2/core-js/date/now.js (/home/user/projects/TachiWeb-React/node_modules/@babel/runtime-corejs2/core-js/date/now.js)

It seems it doesn't append your webroot to the inferred local path. But using ${webRoot}/* also doesn't work for some reason. Doing so leads to your path repeating twice like the below result.

/__vscode-remote-uri__/home/user/projects/TachiWeb-React/src/home/user/projects/TachiWeb-React/node_modules/@babel/runtime-corejs2/core-js/date/now.js

But manually writing out "/__vscode-remote-uri__/*" seems to get round the above duplicate path problem.

This is my working configuration of launch.json:

{  "version": "0.2.0",  "configurations": [    {      "name": "WSL Chrome",      "type": "chrome",      "request": "launch",      "url": "http://localhost:3000",      "webRoot": "${workspaceFolder}/src",      "sourceMapPathOverrides": {        "/*": "/__vscode-remote-uri__/*"      }    }  ]}

After upgrading to WSL2 my debugger (only using attach) stopped working.

I'm using the "Remote WSL" feature on VS Code connecting to my $wsl/Ubuntu/project-path-here + Edge (the good one) + Latest VS Code + Win 10 machine with all updates (stable)

Checking .scripts on vscode debug console reveals that my paths are still weird, not repeating, but still weird.

1 - using the "classic" config (that used to work just fine):

"name": "Attach to Edge","type": "edge","request": "attach","port": 9222,"url": "http://localhost:4300/*","webRoot": "${workspaceFolder}"

results in this:

webpack:///./src/app/component-one/component-one.component.html (\home\my-username\employer-folder\mono-repo\actual-project\src\app\component-one\component-one.component.html)

2 - using the first answer on this post (also from https://github.com/microsoft/vscode-remote-release/issues/2068 and https://github.com/microsoft/vscode-chrome-debug/issues/899):

"name": "Attach to Edge","type": "edge","request": "attach","port": 9222,"url": "http://localhost:4300/*","webRoot": "${workspaceFolder}","sourceMapPathOverrides": {   "/*": "/__vscode-remote-uri__/*"}

results in this (which looks incorrect with the c: usage):

webpack:///./src/app/component-one/component-one.component.html (c:\home\my-username\employer-folder\mono-repo\actual-project\webpack:\src\app\component-one\component-one.component.html)

At this point I've tried every single combination in the launch.json, even tried to mix $wsl/Ubuntu to get the full correct path (checked on .scripts) and the breakpoint is always disabled.

Also, when I press the attach it is weirdly fast... it used to take a while (probably checking/using source maps).

Ended up doing the following (wanted to see if the same would happen):

• Added --start-debugger-server to my Firefox Developer launch config

• Updated launch.json with a new attach config for FF (also installed Debugger for Firefox extension):

"name": "Attach to Firefox","type": "firefox","request": "attach","url": "http://localhost:4300/*","webRoot": "${workspaceFolder}",

BINGO, first try... no extra path configs or anything, the way it should be and the way it was before my WSL upgrade (plus no need for port attribute).

P.S: I'll check on my other pc that has a clean Windows 10 2004 + WSL2 install, I'm thinking this might be an "existing/running wsl1 + upgrade to wsl2" thing.

The problem I am looking at for most people is a difference on the sourcemap path between the one reflected on Chrome or other browser and the one recognized by vscode. The configuration that worked for me on Chrome running (npm start on wsl) was as follows:

My particular solution:

.vscode/launch.json

{    "version": "0.2.0",    "configurations": [        {            "name": "Launch Chrome",            "request": "launch",            "type": "pwa-chrome",            "url": "http://localhost:3000",            "webRoot": "${workspaceFolder}",            "sourceMapPathOverrides": {                "\\mnt\\c\\*": "C:/*"            }        }    ]}

Question is: How to debug how source paths are translated into Chrome?

Here is a simple way:

1. Start the development server with: npm start
2. Launch Chrome in debug mode(F5) with standard configuration (no need to include sourceMapPathOverrides)
3. Go to Chrome Developer console => Sources,
4. Find your file (example App.js) and set a breakpoint there.

5. Refresh the page and go to vscode.

6. Set a breakpoint in the same place of the document, in the new file that appeared (/mnt/e/ in my case) and in your file.

You'll get the idea that you will have to replace "\mnt\e"... with "E:/" in the sourceMapPathOverrides.