javascript - 如何使用 VS Code 调试在 Vagrant VM 内运行的 React 应用程序？

Question

我使用 create-react-app 创建了我的应用程序，并在 Vagrant 管理的虚拟机中运行它。源代码位于共享的 /vagrant 文件夹中，并且 create-react-app 声称可以使用 VS Code 进行开箱即用的调试。我在主机上使用 VS Code。

但是，我不确定如何为我的用例设置 Chrome 启动配置，并且无论我尝试什么，我都会在设置的任何断点上收到此消息:

breakpoint ignored because generated code not found (source map problem?)

Answer 1

这是一个示例配置:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://127.0.0.1:3000/",
            "webRoot": "${workspaceRoot}",
            "sourceMapPathOverrides": {
                "/vagrant/*": "${workspaceRoot}/*"
            }
        }
    ]
}

地点:

"sourceMapPathOverrides": {
   "/vagrant/*": "${workspaceRoot}/*"
}

确实是使源映射适用于 VS Code 的秘诀。这会将 /vagrant/ 目录(通常是虚拟机上项目的根目录)映射到 ${workspaceRoot} (主机上项目的根目录)，当在 VS Code 中作为目录打开。

事后看来，这是一个非常简单的修复。