如何在 Visual Studio 中调试 typescript jasmine 测试？答案

【问题标题】：How to debug typescript jasmine tests in visual studio?如何在 Visual Studio 中调试 typescript jasmine 测试？
【发布时间】：2015-11-05 17:58:34
【问题描述】：

我在 Karma 中运行 typescript 代码和 typescript jasmine 测试。我可以从命令行运行测试（使用 Karma），也可以从 ReSharper 测试运行程序运行测试。大概我也可以使用Karma Test Adapter VS extension 或VS Adapter for Karma 运行测试。因此，运行测试有很多选择。

我的问题是：如何在 VS 调试器中调试测试？

【问题讨论】：

标签： karma-runner karma-jasmine

【解决方案1】：

我能够让 Visual Studio 调试 typescript jasmine 测试，在 Karma 中运行，正常工作。哇，真是一口。

我是这样做的：

在 IE 中，选项，高级：清除“禁用脚本调试 (Internet Explorer)”复选框。
安装运行 karma 所需的节点模块（全局） - 如果您还没有：

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

在karma.conf.js 中，添加对提供所需源映射和打字稿文件的支持。这是我的：

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']
  });

}

编译你的 typescript 后，运行 karma，启动 IE：

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

在 Visual Studio 中，调试菜单 |附加到进程...，然后选择看起来正确的 iexplore.exe 实例 - 例如标题可能与 Karma 网页标题匹配（当前为“Karma DEBUG RUNNER”），并且进程类型必须为“脚本”。如果 typescript 调试不起作用，请尝试添加多个 iexplore.exe 实例，包括所有可能的 Script 实例。

之后，您应该会在解决方案资源管理器中看到一个“脚本文档”文件夹，并且您应该能够在 typescript 中放置断点，在浏览器中运行测试，并逐步执行 typescript 代码。

事实证明，所有这些步骤也适用于在 Chrome 中调试 Typescript 测试和代码 - 只需将步骤 4 更改为：

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

（跳过第 5 步）然后打开 Chrome 开发者工具以在 chrome 中调试 typescript。

【讨论】：