Javascript 如何使用VS代码调试运行在流浪VM中的React应用程序？

我用

create react app

创建了我的应用程序，并在Vagrant管理的VM中运行它。源代码位于共享的

/vagrant

文件夹中，并且

create-react-app

声明了VS-code的开箱即用可调试性。我在主机上使用VS代码

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

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

---

下面是一个示例配置：

{
    "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代码的秘密因素。当在VS代码中作为目录打开时，这会将通常是VM上项目根目录的

/vagrant/

目录映射到主机上项目根目录的

${workspaceRoot}

---

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

下面是一个示例配置：

{
    "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代码的秘密因素。当在VS代码中作为目录打开时，这会将通常是VM上项目根目录的

/vagrant/

目录映射到主机上项目根目录的

${workspaceRoot}

事后看来，这是一个非常简单的解决办法