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

Question

我使用create-react-app创建了我的应用，并在由Vagrant管理的虚拟机中运行它。这些源位于共享的/vagrant文件夹中，create-react-app声明与VS Code一起开箱即用的可调试性。我在主机上使用VS Code。

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

  

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

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代码的秘密因素。这会将通常作为项目根目录的/vagrant/目录映射到主机上作为项目根目录的${workspaceRoot}，作为VS代码中的目录打开。

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