Question

我正在尝试使用通过Webpack运行的应用程序在Visual Studio代码中进行调试。有很多相互矛盾的信息，与Webpack使用相关的文档很差。

我知道我的项目根目录launch.json目录中需要一个.vscode文件，看起来有两种方法：

启动Webpack（使用映射到yarn start的{{1}}，然后将VSCode附加到该文件夹。
让VSCode在Chrome中启动webpack，然后附加到该文件夹。

经过几个小时尝试不同的事情后，我没有成功。

如果我运行webpack并尝试使用以下webpack-dev-server --env development --open附加到它：

launch.json

我在VSCode中遇到错误：

从目标应用获得回复，但未找到目标网页

解决此问题的最佳方式是什么？

我应该尝试选项2并从VSCode运行Webpack吗？

请注意，运行{ "version": "0.0.0", "configurations": [ { "name": "Attach", "type": "chrome", "request": "attach", "port": 9222, "url": "http://localhost:8080/", "webRoot": "${workspaceRoot}" } ] }会在Chrome中成功运行该应用程序。

Answer 1

使用"request": "attach"配置时，您需要指定＆＃39; urlFilter＆＃39;而不是＆＃39; url＆＃39;。请注意＆＃39; urlFilter＆＃39;使用通配符，所以你的配置应该是这样的;

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

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

使用Chrome调试器和Visual Studio代码以及Webpack

1 个答案: