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

【问题标题】：How can I debug a React app running inside a Vagrant VM with VS Code?如何使用 VS Code 调试在 Vagrant VM 中运行的 React 应用程序？
【发布时间】：2018-04-10 03:19:00
【问题描述】：

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

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

断点被忽略，因为找不到生成的代码（源映射问题？）

【问题讨论】：

标签： javascript reactjs debugging vagrant visual-studio-code

【解决方案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 的秘诀。这会将通常是 VM 上项目根目录的 /vagrant/ 目录映射到在 VS Code 中作为目录打开时作为主机上项目根目录的 ${workspaceRoot}。

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

【讨论】：