Debug in Visual Studio Code Karma + Webpack + Chrome Debugger

I would like to debug Visual Studio Code some tests that run on the following stack: Typescript + Karma + Mocha + Chai + Webpack + Chrome Debugger Extension.

Problem: It never reaches breakpoints. If I restart the test (from the green arrow), it reaches breakpoints, but I cannot evaluate any variable. It says ReferenceError: myVariable is undefined. Any help is appreciated ...

Karma configuration:

var webpackConfig = require("./webpack.config");
module.exports = function (config) {
    config.set({
        basePath: "",
        frameworks: ["mocha", "sinon", "chai", "karma-typescript"],
        files: [
            { pattern: "src/**/*.ts" },
            { pattern: "src/**/*.js.map", included: false }
        ],
        exclude: [
        ],
        preprocessors: {
            "src/**/*.ts": ["webpack", "sourcemap"],
            "src/**/*.ts": [ "karma-typescript", "sourcemap"],
        },
        webpack: {
           module: webpackConfig.module,
           resolve: webpackConfig.resolve
        },
        karmaTypescriptConfig: {
           karmaTypescriptConfig: true
        },
        browsers: ["ChromeDebugging", "PhantomDebugging"],
        reporters: ["progress", "karma-typescript"],
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        singleRun: false,
        concurrency: Infinity,
        plugins: [
            require("karma-sinon"),
            require("karma-chai"),
            require("karma-chrome-launcher"),
            require("karma-phantomjs-launcher"),
            require("karma-webpack"),
            require("karma-mocha"),
            require("karma-typescript"),
            require("karma-sourcemap-loader")
        ],
        customLaunchers: {
        ChromeDebugging: {
            base: "Chrome",
            flags: ["--remote-debugging-port=9222"],
            debug: true
        },
        PhantomDebugging: {
            base: "PhantomJS",
            options: {
                windowName: "phantom-window",
                settings: {
                    webSecurityEnabled: false
                },
                flags: ["--load-images=true"],
                debug: true
            }
        }
    },
})
}

      

        
        
        
      

    

WebPack configuration:

const path = require("path");
const WriteFilePlugin = require("write-file-webpack-plugin");

module.exports = {
    entry: "./src/example/example.ts",
    devtool: "source-map",
    module: {
        rules: [
        {
            test: /\.ts?$/,
            use: "ts-loader",
            exclude: /node_modules/
        }
    ]
},
resolve: {
    extensions: [".ts", ".js"]
},
plugins: [
    new WriteFilePlugin()
],
output: {
    filename: "example.js",
    path: path.resolve(__dirname, "./dist")
}

      

        
        
        
      

    

}

Visual Studio App Code for Chrome

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug tests in Chrome",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "sourceMapPathOverrides": {
                "webpack:///*": "${webRoot}/src/*"
           }
       }
   ]
}