启动时打开Karma debug.html页面

Question

简短版：

如何启动 Karma 并在与 Karma 启动页面相同的浏览器中自动打开 debug.html 文件？

详细版：

我不喜欢使用 Karma 的控制台报告，因此我一直在使用 karma-jasmine-html-reporter-livereload，它会输出到 Karma 的 localhost:9876/debug.html 文件。问题是，每次我开始调试会话时，都需要在 karma 打开的网页上单击“debug”按钮。

我想找到一种通过 Gulp 任务自动打开 debug.html 页面的方法。我在多个浏览器中运行测试，所以希望在 Karma 打开的每个浏览器中都能打开 debug.html 页面作为第二个选项卡。我还想在 karma 关闭时关闭 debug.html 选项卡。我尝试了很多方法，但没有成功。

这是我的 Gulp 任务。'watch' 任务监视我的源 TypeScript 文件并将它们编译成 JavaScript……没什么花样。

gulp.task('watch-test', ['watch'], function (done) {
    //start a livereload server so that the karma html 
    //reporter knows to reload whenever the scripts change
    livereload.listen(35729);
    gulp.watch('dist/src/**/*.js').on('change', livereload.changed);

    new KarmaServer({
        configFile: __dirname + '/karma.conf.js',
        singleRun: false
    }, done).start();
});

- TwitchBronBron

---

我同意，每次都要点击那个按钮真的很烦人，特别是在使用karma-jasmine-html-reporter-livereload时。我一直在想同样的问题。你能否发布一下你已经尝试过的内容，这样我就不用重新发明轮子了？ - MaxRocket

Answer 1

你可以使用customLauncher浏览器定义：

  customLaunchers: {
    ChromeDebugging: {
      base: 'Chrome',
      flags: [ '--remote-debugging-port=9333', '--auto-open-devtools-for-tabs', 'http://localhost:9876/debug.html' ]
    }
  }

在你的karma配置中使用这个浏览器。

- Alexander Heimbuch

---

这会同时打开debug.html页和默认页。 - SirTophamHatt

Answer 2

我发现一种虽然不完美但可以永久的方法。你可以在上下文中注入一个javascript代码：

files: [
    "test/init.js",
    ...
]

然后在文件中添加以下代码：

(function (window) {
    if (!window.parent.initDone && window.location.pathname === '/context.html') {
         window.parent.initDone = true;
         window.open('/debug.html', '_blank');
    }
})(window)

这将确保窗口仅在第一次运行测试时打开，且仅在context.html中执行。

您可以在该块中添加任何初始化代码。

- ntrp

---

还是有点小技巧，但这正好满足我的需求！而且好的一点是我可以将文件检入，现在团队中的每个人都可以零配置地获得此功能。谢谢！ - TwitchBronBron

我将这个功能与karma的customLaunchers设置一起使用，以传递--auto-open-devtools-for-tabs和'--user-data-dir=' + path.resolve(__dirname, './.chrome')标志给Chrome，从而每次运行时都会打开一个窗口，位于相同的位置，并且已经打开了相同的devtools布局到调试选项卡。 - Duncan Beevers

Answer 3

我想不出一个优雅的方法来实现它，所以这是一种肮脏、下三滥、毫无价值、堕落、完全可耻的欺骗方式，但它可以达到效果:)

在 node_modules > karma > static > karma.js 文件中，我添加了以下几行代码:

var debugWin = window.open('http://localhost:7676/debug.html','Debugme');
debugWin.focus();

下面是上下文内容，从第366行开始（在版本0.13.19中）:

  var updateBanner = function (status) {
    return function (param) {
      var paramStatus = param ? status.replace('$', param) : status
      titleElement.innerHTML = 'Karma v' + VERSION + ' - ' + paramStatus
      bannerElement.className = status === 'connected' ? 'online' : 'offline'
    }
  }

  var debugWin = window.open('http://localhost:7676/debug.html','Debugme');
  debugWin.focus();

  socket.on('connect', updateBanner('connected'))
  socket.on('disconnect', updateBanner('disconnected'))
  socket.on('reconnecting', updateBanner('reconnecting in $ ms...'))
  socket.on('reconnect', updateBanner('connected'))
  socket.on('reconnect_failed', updateBanner('failed to reconnect'))
  socket.on('info', updateBrowsersInfo)
  socket.on('disconnect', function () {
    updateBrowsersInfo([])
  })
}

享受吧，你这个反叛者。

- MaxRocket

---

非常有创意。:) 不幸的是，这并不完全符合我所期望的永久性。如果我清除我的 node_modules 文件夹，或者我的团队中的另一个人拉取代码并运行它，除非我也至少将此文件与 node_modules 文件夹一起检入，否则他们不会持续看到这个更改。 - TwitchBronBron

像我说的那样，直接而简洁。如果你想到了更加永久的解决方案，请务必在这里发布！ - MaxRocket

Answer 4

您可以将client.clearContext设置为默认值true的false。

请参见http://karma-runner.github.io/6.4/config/configuration-file.html#clientclearcontext

// Karma configuration

module.exports = function(config) {
  config.set({
    // [...]

    client: {
      clearContext: false
    }

    reporters: [ 'kjhtml' ],

    // [...]
}

- Arber