噶+的WebPack + sourcemap预处理不WebStorm在断点处停止(Karma + W

2019-09-28 15:22发布

我开始一个项目NG6-KIT-启动 。

我使用WebStorm。

我希望能够调试使用WebStorm我的单元测试,所以我跟着这个教程 。

我可以运行WebStorm单元测试,但我不能把断点,它永远不会在断点处停止,我不知道为什么。

我怀疑它做的是我使用的是预处理器在我的人缘配置文件中的事实的东西。

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

请看下文中我充分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文件:

import angular from 'angular';

import mocks from 'angular-mocks';

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

有谁知道如何使WebStorm这项工作,以便能够把断点在单元测试?

Answer 1:

刚试过2017.1 EAP -因果报应调试工作开箱:

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

2016年3月2日我必须刷新浏览器页面(即启用了JetBrains公司IDE扩展的一个),以获得断点命中。



Answer 2:

感谢您的回复,它帮我找到了我做错了。 所以,我测试了像你这样,它是工作完全按照您说的(你必须刷新Webstorm 2016和它的工作开箱即用EAP版本)。

于是我就承诺在提交(我没有犯4)找出我做错了:我是新用的WebPack,当我尝试了一些东西,我试图改变在karma.conf.js此设置:

更换:

webpack: {
    devtool: 'inline-source-map',

通过:

webpack: {
    devtool: 'source-map',

更改回来解决我的问题。 单元测试,现在停在断点

我做了一些调查,以便更好地了解这个设置是什么,看看这个问题,如果你有兴趣: 为什么内联源地图?



文章来源: Karma + Webpack + sourcemap preprocessor doesn't stop at breakpoints in WebStorm