使用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