reactjs - 运行 WSL 时如何在 Windows 中设置 VS 代码调试？

Question

我无法弄清楚如何在 VS Code 中设置调试，以便我可以在 WSL 中使用节点为应用程序提供服务。我在用:

Chrome 调试器

使用 create-react-app 创建的 React 应用程序

通过 npm start

在 bash (WSL) 中启动服务器

这是因为启动一个新的浏览器窗口并提供应用程序，但我无法设置任何断点。他们都举报 Unverified breakpoint .

这是我的 launch.json :

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

问题似乎与 webpack 有关，但我无法弄清楚我需要做些什么不同的事情。

Answer 1

我也遇到了这个问题并找到了解决方案:
我的设置

可视化工作室代码 1.43.2

Chrome 4.12.6 调试器

Visual Studio Code Remote - WSL 0.42.4

react 应用程序 (create-react-app)

NPM 6.13.7 在 WSL 中运行(npm start)

本地 => WSL
在您的 launch.json 中使用以下配置如果您已经在本地启动了 vscode 实例(不使用 WSL)并且想要连接到在 WSL 中运行的 NPM 实例。

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

WSL => WSL
在您的 launch.json 中使用以下配置如果你已经通过 WSL(使用 Visual Studio Code Remote - WSL 扩展)启动了你的 vscode 实例并且想要连接到在 WSL 中运行的 NPM 实例。

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

您可能需要在两种配置中调整驱动器。我正在运行来自 C:/dev 的所有内容所以 /mnt/c/*对我来说完全没问题。例如，如果您的代码位于 D:/dev/demo/src你将不得不使用 /mnt/d/* .
.script 对我调试正在发生的事情有很大帮助 Debugger for Chrome 的命令延期。

更新:最近 WSL、Chrome 和 VSCode 的集成似乎发生了一些变化，所以 sourceMapPathOverrides不再需要。我们现在成功地将以下配置用于我们的 WSL 设置:

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