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

Question

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

我知道我需要在项目根目录下的.vscode目录中创建launch.json文件，并且似乎有两种方法：

1. 启动Webpack（使用yarn start映射到webpack-dev-server --env development --open），然后让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？

请注意，在Chrome中运行yarn start可以成功运行应用程序。

- Undistraction

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

- Kjetil Klaussen

---

很好，运行得非常顺畅 :-)，我们正在进行一个vue/webpack/typescript项目，确实在VS code中获得了不错的typescript调试。 - Ben Croughs