断点无法通过 Windows 10 和 WSL2 上的 Visual Studio Code 在 Chrome 中调试 React 应用程序

Question

After this year's MSBuild conference and the announcement of Terminal 1.x, winget and other extras, I wanted to give Windows 10 another test run ahead of needing to purchase a new laptop (Surface Book 3 or MacBook Pro...that is the question).

The Issue

Breakpoints aren't working when debugging web apps in Chrome on Windows 10 using WSL2 and Visual Studio Code. When running a debug session the message Breakpoint set but not yet bound is shown.

The exact same app works flawlessly when debugging on MacOS.

My Setup

MacBook Pro running the latest version of MacOS with Windows 10 Pro installed under BootCamp.

Windows 10 has WSL2 running Ubuntu 20.04. Terminal 1.x is installed and used to access the Linux commandline.

Visual Studio Code is the latest 1.45.1 stable release and includes the WSL remote development extension (0.44.2) on Windows 10. VSCode is launched from within WSL2 by running code. within the project directory.

Debugger for Chrome extension is 4.12.8

The Application

The application is a default Create React App with only a small change to assign breakpoints.

I start by running:

npx create-react-app sandbox

I then simplified src/App.js and added a few arbitrary variables and assignments to use as breakpoint tests.

The App.js file contents.

import React from 'react';
import './styles/main.css';

function App() {
  const test = true;
  let temp = 9;
  temp = 10;
  return (
    <div>
      <h1>Breakpoint test</h1>
      <p>Did it work?</p>
    </div>
  );
}

export default App;

I place a breakpoint on the const and let creation lines as well as the reassignment of temp .

My launch.json contents as recommended by the Create React App editor setup documentation .

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

Win10 - What happens when running a Debug session?

I run the Create React App using npm run start and when I run the Launch Chrome debug config it automatically opens Chrome as expected.

Unfortunately, the breakpoints are ignored and inside Visual Studio Code the breakpoints are shown as unfilled circles. The message given is Breakpoint set but not yet bound .

MacOS - What happens when running a Debug session?

Chrome opens and control is shifted back to Visual Studio Code with the breakpoint information showing (eg variables data, call stack, etc).

Win10 - Firefox works

Interesting side point but Firefox debugging works. When running a Firefox debug session I do have to refresh the initial page load before the breakpoints trigger though.

The breakpoint initially showed the error Unverified Breakpoint . Clicking on this prompted a wizard to add a pathMappings to my config.

The Firefox launch.json configuration in use on Windows 10 is:

    {
      "name": "Launch Firefox",
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [
          {
             "url": "http://localhost:3000/home/rando/dev/sandbox/src",
             "path": "${workspaceFolder}/src"
          }
      ]
    }

Note that /home/rando/dev/sandbox/src is the location of the app within WSL2 Ubuntu. MacOS Firefox setup is the same but without the pathMappings .

Conclusion

At this stage I can only conclude it is something to do with the path mappings needing to be set differently despiteVisual Studio Code WSL documentation hinting no additional changes are required .

Help me, StackOverflow. You're my only hope.

Answer 1

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__/*"
      }
    }
  ]
}

Answer 2

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).

PS: 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.

Answer 3

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.

Answer 4

Specifying the webRoot on launch.json worked. Something like

"webRoot": "${workspaceFolder}/src/js"

or other folder that your webRoot path might be.

https://code.visualstudio.com/docs/nodejs/browser-debugging

Answer 5

The problem went away for me the moment I abandoned trying to use Microsoft Edge. Went ahead and installed Chrome, created a launch configuration and it worked.