将 Chrome 调试器与 Visual Studio Code 和 Webpack 一起使用

Question

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

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

1. 启动 Webpack（使用映射到 webpack-dev-server --env development --open 的 yarn start，然后将 VSCode 附加到它。

2. 让 VSCode 在 Chrome 中启动 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}"
}

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