运行 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

我也曾被这个问题困扰并找到了解决方案：

我的设置

• Visual Studio 代码 1.43.2
  • Chrome 4.12.6 的调试器
  • Visual Studio 代码远程 - WSL 0.42.4
• 反应应用程序（创建反应应用程序）
• 在 WSL 中运行的 NPM 6.13.7（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:/*"
  }
},

威斯康星=>威斯康星

launch.json如果您已通过 WSL（使用扩展）启动 vscode 实例Visual Studio Code Remote - WSL并希望连接到在 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}",
}

Answer 2

我大约 99% 确信这是无法完成的：在 linux (wsl) 下运行 React 应用程序并尝试在 Windows 下的 VS Code 中进行调试。问题在于，在 Linux 中运行应用程序时创建的源映射使用 Linux 文件名，但 VS Code 需要 Windows 路径。线索是查看开发工具中的源代码。在linux下运行时，有linux文件路径。

最初的解决方法是在 Windows 下运行应用程序，我现在很高兴进行调试。长远来看，我会尝试 Sung Kim 的建议，并尝试在 WSL 中进行编辑。