Karma + Webpack + sourcemap preprocessor doesn't stop at breakpoints in WebStorm

梦想的初衷 提交于 2019-12-13 18:13:21

问题


I'm starting a project the NG6-Kit-starter.

I'm using WebStorm.

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

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'] },

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
  });
};

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);

Does anyone know how to make this work with WebStorm in order to be able to put breakpoints in unit tests ?


回答1:


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

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

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




回答2:


Thanks for your reply, it helped me find what I was doing wrong. So I tested like you did and it is working exactly as you say (you have to refresh on Webstorm 2016 and it's working out of the box with the EAP version).

SO I went commit by commit (I did 4 commit) to find out what I was doing wrong: I'm new with webpack and when I was experimenting some stuff I tried changing this setting in karma.conf.js:

Replacing:

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

By:

webpack: {
    devtool: 'source-map',

Changing it back solved my issue. The unit tests now stops at breakpoints

I did a bit of research to understand better what this setting is, have a look at this question if you're interested: Why inline source maps?



来源:https://stackoverflow.com/questions/41988027/karma-webpack-sourcemap-preprocessor-doesnt-stop-at-breakpoints-in-webstorm

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!