Karma + Webpack + sourcemap预处理器不停止在WebStorm的断点处

我开始一个项目NG6-Kit-starter。Karma + Webpack + sourcemap预处理器不停止在WebStorm的断点处

我正在使用WebStorm。

我希望能够使用WebStorm来调试我的单元测试，所以我跟着这个tutorial。

我可以从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为了能够在单元测试中放置断点？

来源

2017-02-01 Tonio

可你也提供您的package.json？示例项目（当然），将不胜感激。没有实际的源文件等需要 - 它可以是一个简单的项目与虚拟spec文件。但配置应该是一样的，所有必需的配置文件 – lena

抱歉，忽略我的评论;没有注意到一个链接https://github.com/AngularClass/NG6-starter – lena

刚刚尝试2017.1 RAP（https://confluence.jetbrains.com/display/WI/WebStorm+EAP） - 卡玛调试工程盒子;右键单击karma.config.js，调试客户端/ app/common/hero/hero.spec.js中的断点。在2016.3.2中，我必须刷新浏览器页面（启用了JetBrains IDE Extension的浏览器页面）以获得断点 – lena

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

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

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

来源

2017-02-01 20:40:53 lena

感谢您的回复，它帮我找到了我做错了。所以我测试过，就像你所做的一样，它的工作方式与您所说的完全相同（您必须在Webstorm 2016上进行刷新，并且可以使用EAP版本来开箱即用）。

所以我去承诺提交（我做了4提交），以找出我在做什么错：我是新的webpack，当我试验一些东西，我试着改变这个设置在karma.conf.js ：

更换：

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

通过：

webpack: { 
    devtool: 'source-map',

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

我做了一些研究，以更好地理解这个设置是什么，看看这个问题，如果你有兴趣：Why inline source maps?

来源

2017-02-02 14:56:31 Tonio

Karma + Webpack + sourcemap预处理器不停止在WebStorm的断点处

回答

相关问题