Webpack-Dev-Server with VS-Code “Debugger for Chrome” Plugin

Question

I use the Webpack-Dev-Server in my project and try to get the debugger running with Visual Studio Code and the Debugger for Chrome addon.

Expected Behavior:

I want to set a breakpoint in vscode and update/halt the running live session.

What I got so far:

I succeeded in getting the debugger running with the launch.json below. Basically my dev-server runs in an incognito Chrome tab. When I start the debugger, a new non-incognito Chrome instance is started. That works, but I lose all the benefits of a live-session.

Is it possible to “hook” the debugger into a running live-Session and not create a new independent non-live chrome instance?

launch.json:

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

My Webpack config is split into multiple files for different configs (dev, test, prod, dev-live). Below you can find the relevant part of my webpack-dev-server config . If you need any additional info on my config, please let me know.

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",                                                                                                                                   
                    ],
                },
            ],
        },
    },
]);

I am using:

• VS Code 1.54.3
• vscode “Debugger for Chrome” plugin: 4.12.12
• Webpack: 4.44.1
• Chrome: 89.0.4389.90

Thanks in advance