You can debug Karma by attaching the debugger to a Chrome instance. You'd want to set your launch.json config to something like this:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach Karma Chrome",
            "address": "localhost",
            "port": 9333,
            "pathMapping": {
                "/": "${workspaceRoot}/",
                "/base/": "${workspaceRoot}/"
            }
        }
    ]
}

But you also need to adjust your karma.conf.js config, so that it launches Chrome instance with dev tools listening to 9333 port, like so:

browsers: [
  'ChromeDebugging'
],

customLaunchers: {
  ChromeDebugging: {
    base: 'Chrome',
    flags: [ '--remote-debugging-port=9333' ]
  }
},

With such setup you can just run your karma server (with captured browser), and then start debugging in visual studio.

If you'd like to find more details I made a tutorial on debugging Karma with Visual Studio Code.

1. In karma.conf.js:

   browsers = ['Chrome'];
   

2. In your failing spec:

   it('spec', function() {
       debugger; // This is like setting a breakpoint
       // ...
   });
   

3. Run Karma.
4. Go to the newly opened Chrome Browser, open the console and refresh the page.

Now in Chrome's Developer Tools source tab you should see the execution stopped at the debugger.

In karma.conf.js I updated added debug option in your version.

customLaunchers: {
   Chrome_with_debugging: {
     base: 'Chrome',
     flags: ['--remote-debugging-port=9222'],
     debug: true
}}

launch.json Add below snippet as launch configuration,

{
    "name": "Debug tests",
    "type": "chrome",
    "request": "attach",
    "port": 9222,
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}"
}

Then triggered the tests using below command,

ng test --browsers Chrome_with_debugging

Use Visual Studio Code debug option "Debug tests" to get attached to UT. With this I am able to debug unit tests using breakpoints in "Visual Studio Code + Debugger for Chrome extension".

I had edited my karma config file to include the ts files and the map files. When I set them both to include=false and launch from the terminal with ng test, the Sources window looks more like this:

This is what I was seeing before, but it confused me because I was expecting to see my own files. However, if I search in that file, I find my own code:

It still doesn't stop on the break point, but it's a start.

When I try to debug it through Webstorm, it still is seeing the Mime type as video/mp2t, so I'm guessing that it is interfering somehow with the Mime Types set up in the Karma config file.

I find myself wondering if the devs working on this Framework build anything other than Frameworks, since at every turn it seems like they've erected huge, unnecessary barriers to actually seeing what's going on in your app.

Update:

It looks like this is a bug that comes and goes in Angular-CLI. Seems to be in the "comes" phase today.

Update 2

You can find the files in the webpack:// folder that's next to the localhost://folder. It's logical to think that the files you need will be in the apparent site root, but they're not.

Install the node-inspector globally from NPM:

npm install -g node-inspector

Then start the node-inspector and background the process (use fg to bring it back to the foreground and kill %1 to stop it):

node-inspector &

And then start your test runner like in debug mode this

node --inspect ./node_modules/karma/bin/karma start

Then connect to the inspector from your local loopback. To start debugging, open the following URL in Chrome: chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/e771f282-5e94-4247-ac1c-89d7dc035129

If all goes well, you’ll see some developer tools from which to begin debugging.