karma-runner - 如何在 Visual Studio 中调试 typescript jasmine 测试？

Question

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

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

Answer 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 ，添加对提供所需源 map 和 typescript 文件的支持。这是我的:

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。