Question

我无法弄清楚如何在VS Code中设置调试功能，因此可以在WSL中将应用程序与节点一起使用。我正在使用：

Chrome调试器
使用create-react-app创建的反应应用
通过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 Code Remote-WSL 0.42.4
反应应用程序（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（使用launch.json扩展名）启动了vscode实例，并想连接到在WSL中运行的NPM实例，请在Visual Studio Code Remote - 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/*。

对{@ 1}}扩展名的.script命令的调试很有帮助。

更新：似乎最近WSL，Chrome和VSCode的集成发生了一些变化，因此不再需要Debugger for Chrome。现在，我们已成功将以下配置用于我们的WSL设置：

sourceMapPathOverrides

Answer 2

您只需要在您的launch.json中添加一个sourceMapPathOverrides。最终看起来像这样：

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

我大约有99％的人确定无法做到这一点：在linux（wsl）下运行react app，并尝试在Windows下的VS Code中进行调试。问题是，当您在linux中运行应用程序时创建的源映射正在使用linux文件名，但是VS Code需要Windows路径。线索在于查看开发工具中的资源。在linux下运行时，存在linux文件路径。

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

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

3 个答案: