How to setup VS code debugging in Windows when running WSL?

Question

I cannot figure out how to setup debugging in VS Code so I can serve the app with node in WSL. I am using:

• Debugger for Chrome
• React app created with create-react-app
• Starting server in bash (WSL) via npm start

This works in that is launches a new browser window and the app is served, but I cannot set any break points. They all report Unverified breakpoint.

This is my launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "React",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src"
    }
  ]
}

The problem seems related to webpack, but I can't figure out what I need to do differently.

Answer 1

I have also struggled with this problem and found a solution:

My Setup

• Visual Studio Code 1.43.2
  • Debugger for Chrome 4.12.6
  • Visual Studio Code Remote - WSL 0.42.4
• React Application (create-react-app)
• NPM 6.13.7 running in WSL (npm start)

LOCAL => WSL

Use the following configuration in your launch.json if you have started your vscode instance locally (not using WSL) and want to connect to a NPM instance running in WSL.

{
  "name": "chrome-localhost-local-to-wsl",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceRoot}",
  "sourceMapPathOverrides": {
    "/mnt/c/*": "C:/*"
  }
},

WSL => WSL

Use the following configuration in your launch.json if you have started your vscode instance via WSL (using the Visual Studio Code Remote - WSL extension) and want to connect to a NPM instance running in WSL.

{
  "name": "chrome-localhost-wsl-to-wsl",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceRoot}",
  "sourceMapPathOverrides": {
    "/mnt/c/*": "/__vscode-remote-uri__/mnt/c/*",
  },
}

You might have to adjust the drive in both configurations. I am running everything from C:/dev so /mnt/c/* is perfectly fine for me. If you have your code located for example at D:/dev/demo/src you will have to use /mnt/d/*.

What helped me a lot to debug what is going on was the .script command of the Debugger for Chrome extension.

---

Update: It seems that something has changed recently in the integration of WSL, Chrome and VSCode so the sourceMapPathOverrides are not required anymore. We successfully use the following configuration now for our WSL Setup:

{
  "name": "chrome-localhost-wsl-to-wsl",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceRoot}",
}

Answer 2

You just need to add a sourceMapPathOverrides to your launch.json. It ends up looking something like this:

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