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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在运行WSL时在Windows中设置VS代码调试?相关的知识,希望对你有一定的参考价值。

我无法弄清楚如何在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中进行编辑。

以上是关于如何在运行WSL时在Windows中设置VS代码调试?的主要内容,如果未能解决你的问题,请参考以下文章

如何在运行时在由 android studio 创建的导航抽屉中设置默认片段

如何在运行时在 org.jboss.logging 中设置日志记录

调用 VBScript 时在批处理脚本中设置参数

使用 WSL-2 和 Docker 在 PhpStorm 中设置 PHPUnit:无法解析 PHPUnit 版本输出:无法打开输入文件

使用 Apache 时在 PHP 中设置用于访问的环境变量

Windows写代码,Linux运行 (WSL & VS Code)