使用Chrome調試器與Visual Studio代碼和Webpack

Question

我想通過Webpack運行的應用程序在Visual Studio代碼中調試。有很多矛盾的信息，與Webpack使用有關的文檔非常差。

我明白，我需要一個launch.json文件在我的項目的根.vscode目錄，它似乎有兩種方法：

1. 啓動的WebPack（使用yarn start映射到webpack-dev-server --env development --open，然後有VSCode附加到。

2. 在Chrome中有無VSCode推出的WebPack，然後附加到。

經過幾個小時嘗試不同的事情，我沒有成功。

如果我運行的WebPack，並嘗試使用附加到它下面launch.json：

{ 
    "version": "0.0.0", 
    "configurations": [ 
    { 
     "name": "Attach", 
     "type": "chrome", 
     "request": "attach", 
     "port": 9222, 
     "url": "http://localhost:8080/", 
     "webRoot": "${workspaceRoot}" 
    } 
    ] 
} 

我得到VSCode一個錯誤說：

得到了來自目標應用程序的響應，但沒有找到目標網頁

解決此問題的最佳方法是什麼？

我應該嘗試選項2並從VSCode運行Webpack？

請注意，運行yarn start在Chrome中成功運行應用程序。

Answer 1

當使用"request": "attach"配置時，您需要指定'urlFilter'而不是'url'。請注意，'urlFilter'使用通配符，所以你的配置應該看起來像這樣;

{ 
    "name": "Attach", 
    "type": "chrome", 
    "request": "attach", 
    "port": 9222, 
    "urlFilter": "http://localhost:8080/*", 
    "webRoot": "${workspaceRoot}" 
} 

Ref; https://github.com/Microsoft/vscode-chrome-debug#other-optional-launch-config-fields