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

Question

我不知道如何在 VS Code 中设置调试，以便我可以在 WSL 中使用节点为应用程序提供服务。我正在使用：

Chrome
使用 create-react-app 创建的 React 应用程序
通过 npm start

这是有效的，因为它启动了一个新的浏览器 window 并提供了应用程序，但我无法设置任何断点。他们都报告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

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

最初的解决方法是 windows 下的运行应用程序，我现在正在愉快地调试。长期是尝试 Sung Kim 的建议，并尝试只在 WSL 中进行编辑。

Answer 2

您只需将 sourceMapPathOverrides 添加到 launch.json。它最终看起来像这样：

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

Answer 3

我也遇到过这个问题并找到了解决方案：

我的设置

Visual Studio 代码 1.43.2
- Chrome 4.12.6
- Visual Studio 远程代码 - WSL 0.42.4
React 应用程序 (create-react-app)
WSL 中的 NPM 6.13.7 运行（npm 启动）

本地 => WSL

如果您已经在本地启动了 vscode 实例（未使用 WSL）并且想要连接到 WSL 中的 NPM 实例运行，请在 launch.json 中使用以下配置。

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

WSL => WSL

如果您已经通过 WSL（使用 Visual Studio Code Remote - WSL 扩展）启动了 vscode 实例并希望连接到 NPM 实例 [=71]，请在 launch.json 中使用以下配置=] 在 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/*",
  },
}

您可能需要在两种配置中调整驱动器。我是运行 C:/dev 的所有成员，所以 /mnt/c/* 对我来说完全没问题。例如，如果您的代码位于 D:/dev/demo/src，则必须使用 /mnt/d/*.

Debugger for Chrome 扩展的 .script 命令对我调试正在发生的事情有很大帮助。

更新： 好像最近在WSL的整合上发生了一些变化，Chrome和VSCode所以sourceMapPathOverrides不是不再需要。我们现在成功地将以下配置用于我们的 WSL 设置：

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

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

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

debugging

reactjs

webpack

visual-studio-code

windows-subsystem-for-linux