5

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

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

Karma config:

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 Config:

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 Code Chrome Attach

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug tests in Chrome",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "sourceMapPathOverrides": {
                "webpack:///*": "${webRoot}/src/*"
           }
       }
   ]
}
Leonardo Venoso
  • 1,203
  • 12
  • 15
  • Depending on the degree to which your code has been transformed, the variable may not actually be in scope where you think it is. You can inspect the current callstack by opening the debug view (View -> Debug). This will allow you to see what is actually executing. – Aluan Haddad Jul 10 '17 at 08:18
  • Thanks so much Aluan, do you think I can debug the Typescript code over this stack? – Leonardo Venoso Jul 10 '17 at 08:30
  • This has certainly worked for me in the past but I have not used it in the context of these specific test frameworks. The VS Code Chrome Debug plugin is pretty reliable so I expect you will be able to get it working. – Aluan Haddad Jul 10 '17 at 08:33

0 Answers0