如何使用VS代码调试在Vagrant VM内运行的React应用程序？

Question

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

但是，我不知道如何设置自己的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代码中作为目录打开时是主机上项目的根目录。

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