带有 VS-Code“Chrome 调试器”插件的 Webpack-Dev-Server

问题描述

我在我的项目中使用 Webpack-Dev-Server 并尝试让调试器与 Visual Studio Code 和 Debugger for Chrome 插件一起运行。

预期行为：

我想在 vscode 中设置一个断点并更新/停止正在运行的实时会话。

到目前为止我得到了什么：

我成功地使用下面的 launch.json 运行调试器。基本上我的开发服务器在一个隐身 Chrome 标签中运行。当我启动调试器时，会启动一个新的非隐身 Chrome 实例。这有效，但我失去了实时会话的所有好处。

是否可以将调试器“挂钩”到正在运行的实时会话而不创建新的独立非实时 chrome 实例？

launch.json：

{
    "type": "chrome","request": "launch","name": "Launch Chrome Debugger","port": 9222,"url": "http://localhost:8080/","webroot": "${workspaceRoot}","sourceMaps": true,},

我的 Webpack 配置被分成多个文件用于不同的配置（开发、测试、生产、开发实时）。您可以在下面找到我的 webpack-dev-server 配置的相关部分。如果您需要有关我的配置的任何其他信息，请告诉我。

webpack.development-live.js：

const commonConfig                  = require("./webpack.common");
const {merge}                       = require("webpack-merge");
const CircularDependencyPlugin      = require("circular-dependency-plugin");


const configName = "development-live";
const useHashes = false;


module.exports = merge([
    commonConfig(configName,useHashes,false),{
        mode: "development",devtool: "inline-source-map",devServer: {
            open: {                                                                                                                                                         
                app: ["chrome","--incognito"],proxy: {                                                                                                                                                        
                "/appServer/API": {
                    target: "http://127.0.0.1",logLevel: "info",secure: false,module: {
            rules: [
                {                                                                                                                                                                   
                    test: /\.css$/,use: [
                        "style-loader","css-loader",],]);

我正在使用：

• VS 代码 1.54.3
• vscode“Chrome 调试器”插件：4.12.12
• Webpack：4.44.1
• 铬：89.0.4389.90

提前致谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）