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

【问题标题】：How to setup VS code debugging in Windows when running WSL?运行 WSL 时如何在 Windows 中设置 VS 代码调试？
【发布时间】：2019-01-01 17:09:32
【问题描述】：

我不知道如何在 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 有关，但我无法弄清楚我需要做些什么不同的事情。

【问题讨论】：

你会尝试在 WSL 中安装和运行 VS Code 吗？您可以按照此说明进行操作。 dev.to/nickjj/… 但我不确定这是否还需要您在 WSL 中安装 Chrome……只要我的 2 美分。
有趣的想法。我必须说服我的 IT 部门升级我的操作系统，但这看起来很有希望。当然，欢迎任何可能提供有关如何解决原始问题的信息的人加入:)

标签： reactjs debugging webpack visual-studio-code windows-subsystem-for-linux

【解决方案1】：

我也为这个问题苦苦挣扎，找到了解决办法：

我的设置

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

本地 => 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 实例并希望连接到在 WSL 中运行的 NPM 实例，请在您的 launch.json 中使用以下配置。

{
  "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}",
}

【讨论】：

将此标记为已接受的答案。它对我有用

【解决方案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:/*" }
        }        
    ]
}

【讨论】：

【解决方案3】：

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

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

【讨论】：

这launch.json template 有帮助吗？我有使用 WSL 和 VS 代码的相同设置，这适用于调试我的 C++ 项目。也许它也可以应用于其他情况。