如何使用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代碼中作爲目錄打開時是主機上項目的根目錄。

一個非常簡單的修復，事後。