How to debug javascript typescript tests in visual studio?

Question

I have typescript code and typescript jasmine tests running inside Karma. I can run tests from the command line (using Karma), as well as run tests from the ReSharper test runner. Presumably, I could also run tests using the Karma adapter extension extension or the Karma VS adapter . Thus, many options for running tests.

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

Answer 1

I was able to get debugging Visual Studio typescript jasmine tests working in karma working. Wow, this is a sip.

Here is how I did it:

• In IE options, Advanced: uncheck the "Disable script debugging (Internet Explorer)" box.
• Install the node modules (globally) needed to run karma - if you haven't done it yet:

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 karma.conf.js add support for serving the necessary 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, start karma by running IE:

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

5. Visual Studio Debugging Menu | Attach to the process ..., then select the iexplore.exe instance that looks correct - for example, the title may correspond to the title of the Karma web page ("Karma DEBUG RUNNER" at present), and the process type should be "Script". If typescript debugging does not work, try adding multiple instances of iexplore.exe, including all possible instances of the script.

After that, you should see the “Script Documents” folder in Solution Explorer, and you can place breakpoints in your typescript, run tests in your browser and execute 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 the Chrome developer tools to debug typescript in chrome.