Karma + Webpack + Sourcemap预处理器不会在WebStorm中的断点处停止 [英] Karma + Webpack + sourcemap preprocessor doesn't stop at breakpoints in WebStorm

问题描述

我正在启动 NG6-Kit-starter 的项目.

我正在使用WebStorm.

I'm using WebStorm.

我希望能够使用WebStorm调试单元测试，所以我遵循了

I want to be able to debug my unit tests using WebStorm, so I followed this tutorial.

我可以从WebStorm运行单元测试，但是我不能放置断点，它永远不会在断点处停止，而且我也不知道为什么.

I can run unit test from WebStorm but I can't put breakpoints, it never stops at breakpoints and I have don't know why.

我怀疑这与我在业力配置文件中使用预处理器这一事实有关.

I suspect it has to do something with the fact that I'm using a preprocessor in my karma config file.

preprocessors: { 'spec.bundle.js': ['webpack', 'sourcemap'] },

请参阅下面的完整karma.config.js

See below my full karma.config.js

module.exports = function (config) {
  config.set({
    // base path used to resolve all patterns
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha', 'sinon-chai'],

    // list of files/patterns to load in the browser
    files: [{ pattern: 'spec.bundle.js', watched: false }],

    // files to exclude
    exclude: [],

    plugins: [
      require("karma-sinon-chai"),
      require("karma-chrome-launcher"),
      require("karma-mocha"),
      require("karma-mocha-reporter"),
      require("karma-sourcemap-loader"),
      require("karma-webpack")
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: { 'spec.bundle.js': ['webpack', 'sourcemap'] },

    webpack: {
      //devtool: 'inline-source-map',
      devtool: 'source-map',
      module: {
        loaders: [
          { test: /\.js/, exclude: [/app\/lib/, /node_modules/], loader: 'babel' },
          { test: /\.html$/, loader: 'raw' },
          { test: /\.(scss|sass)$/, loader: 'style!css!sass' },
          { test: /\.css$/, loader: 'style!css' },
          { test: /\.svg/, loader: 'svg-url-loader' },
          { test: /\.json$/, loader: 'json-loader' }
        ]
      }
    },

    webpackServer: {
      noInfo: true // prevent console spamming when running in Karma!
    },

    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['mocha'],

    // web server port
    port: 9876,

    // enable colors in the output
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_DEBUG,

    // toggle whether to watch files and rerun tests upon incurring changes
    autoWatch: false,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],

    // if true, Karma runs tests once and exits
    singleRun: true
  });
};

还有我的spec.bundle.js文件:

And my spec.bundle.js file:

import angular from 'angular';

import mocks from 'angular-mocks';

let context = require.context('./client/app', true, /\.spec\.js/);
context.keys().forEach(context);

是否有人知道如何使用WebStorm使其能够在单元测试中放置断点?

推荐答案

只需尝试 2017.1 EAP -业障调试功能开箱即用:

Just tried 2017.1 EAP - karma debugging works out of the box:

• 右键单击karma.config.js
• 调试-client/app/common/hero/hero.spec.js中的断点被击中.

• right-click karma.config.js
• debug - breakpoints in client/app/common/hero/hero.spec.js are hit.

在 2016.3.2 中，我必须刷新浏览器页面(已启用JetBrains IDE扩展的页面)才能命中断点.

In 2016.3.2 I have to refresh the browser page (the one that has JetBrains IDE Extension enabled) to get breakpoints hit.

这篇关于Karma + Webpack + Sourcemap预处理器不会在WebStorm中的断点处停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！