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

Posted 2021-04-03

我无法弄清楚如何在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有关，但我无法弄清楚我需要采取哪些不同的做法。

答案

您只需要在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:/*" }
        }        
    ]
}

另一答案

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

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