How to debug typescript jasmine tests in visual studio?

Question

I have typescript code and typescript jasmine tests running within Karma. I can run the tests from the command-line (using Karma), and also run the tests from the ReSharper test runner. Presumably I could also run the tests using Karma Test Adapter VS extension or VS Adapter for Karma. So, lots of options for running the tests.

My question is: How do I debug the tests, in the VS debugger?

Answer 1

I was able to get Visual Studio debugging of typescript jasmine tests, running in Karma, working. Wow, that's a mouthful.

Here's how I did it:

1. In IE, Options, Advanced: Clear the "Disable script debugging (Internet Explorer)" checkbox.
2. Install the node modules (globally) required to run karma - if you haven't already:

npm install -g karma karma-chrome-launcher karma-ie-launcher jasmine-core karma-jasmine karma-jasmine-html-reporter
npm install -g phantomjs karma-phantomjs-launcher

3. In the karma.conf.js, add support for serving the required sourcemap and typescript files. Here's mine:

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],
    files: [
      'bower_components/angular/angular.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'dist/**/*.js',
      'test/out/**/*.js',
      // Key addition to support debugging typescript tests
      // Enable serving (but don't include as scripts) sourcemap and typescript files
      {pattern: '**/*.js.map', included: false},
      {pattern: '**/*.ts', included: false}
    ],
    reporters: ['html', 'progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS']
  });

}

4. After compiling your typescript, run karma, launching IE:

karma start --browsers=IE --reporters=html

5. In Visual Studio, Debug menu | Attach to Process... , then choose the iexplore.exe instance(s) that look right - eg the title may match the Karma web page title ("Karma DEBUG RUNNER" currently), and the process Type must be "Script". If typescript debugging doesn't work, try adding multiple iexplore.exe instances, including all the probably Script instances.

After that, you should see a "Script Documents" folder in Solution Explorer, and you should be able to put breakpoints in your typescript, run the tests in your browser, and step through your typescript code.

It turns out that all these steps also work for debugging Typescript tests and code in Chrome - just change step 4 to:

karma start --browsers=Chrome --reporters=html

(skip step 5) then open Chrome developer tools to debug the typescript in chrome.