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的斷點處

回答

相關問題