Karma + Webpack + sourcemap 预处理器不会在 WebStorm 中的断点处停止
Karma + Webpack + sourcemap preprocessor doesn't stop at breakpoints in WebStorm
我正在开始一个项目NG6-Kit-starter。
我正在使用 WebStorm。
我希望能够使用 WebStorm 调试我的单元测试,所以我遵循了这个 tutorial。
我可以 运行 从 WebStorm 进行单元测试,但我不能设置断点,它永远不会在断点处停止,我也不知道为什么。
我怀疑这与我在 karma 配置文件中使用预处理器这一事实有关。
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.1 EAP - karma 调试开箱即用:
- right-click
karma.config.js
- 调试 -
client/app/common/hero/hero.spec.js
中的断点被命中。
在 2016.3.2 中,我必须刷新浏览器页面(启用 JetBrains IDE 扩展的页面)才能命中断点。
感谢您的回复,它帮助我找到了我做错的地方。因此,我像您一样进行了测试,它完全按照您所说的那样工作(您必须在 Webstorm 2016 上刷新,并且 EAP 版本开箱即用)。
所以我逐个提交(我做了 4 次提交)以找出我做错了什么:
我是 webpack 的新手,当我尝试一些东西时,我尝试在 karma.conf.js:
中更改此设置
正在替换:
webpack: {
devtool: 'inline-source-map',
作者:
webpack: {
devtool: 'source-map',
改回来解决了我的问题。单元测试现在在断点处停止
我做了一些研究以更好地了解此设置是什么,如果您有兴趣,请查看这个问题:Why inline source maps?
我正在开始一个项目NG6-Kit-starter。
我正在使用 WebStorm。
我希望能够使用 WebStorm 调试我的单元测试,所以我遵循了这个 tutorial。
我可以 运行 从 WebStorm 进行单元测试,但我不能设置断点,它永远不会在断点处停止,我也不知道为什么。
我怀疑这与我在 karma 配置文件中使用预处理器这一事实有关。
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.1 EAP - karma 调试开箱即用:
- right-click
karma.config.js
- 调试 -
client/app/common/hero/hero.spec.js
中的断点被命中。
在 2016.3.2 中,我必须刷新浏览器页面(启用 JetBrains IDE 扩展的页面)才能命中断点。
感谢您的回复,它帮助我找到了我做错的地方。因此,我像您一样进行了测试,它完全按照您所说的那样工作(您必须在 Webstorm 2016 上刷新,并且 EAP 版本开箱即用)。
所以我逐个提交(我做了 4 次提交)以找出我做错了什么: 我是 webpack 的新手,当我尝试一些东西时,我尝试在 karma.conf.js:
中更改此设置正在替换:
webpack: {
devtool: 'inline-source-map',
作者:
webpack: {
devtool: 'source-map',
改回来解决了我的问题。单元测试现在在断点处停止
我做了一些研究以更好地了解此设置是什么,如果您有兴趣,请查看这个问题:Why inline source maps?