[英]Breakpoints in Chrome not working with Sourcemap
这是最烦人的问题。 我之前在这里遇到过这个问题 ,但是我在webpack配置和gulp中设置了相同的设置,并且无法在Chrome Devtools中正确设置断点。
我已经删除了我的应用程序文件和地图,重新运行了gulp webpack
,它再次自动生成了它,但在应用程序中我也仍然无法打破它:(
Webpack配置
var webpack = require('webpack');
var PROD = JSON.parse(process.env.PROD_DEV || '0');
// https://stackoverflow.com/questions/25956937/how-to-build-minified-and-uncompressed-bundle-with-webpack
module.exports = {
entry: "./entry.js",
devtool: "source-map",
output: {
devtoolLineToLine: true,
sourceMapFilename: "tickertags.bundle.js.map",
pathinfo: true,
path: __dirname,
filename: PROD ? "tickertags.bundle.min.js" : "tickertags.bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
},
plugins: PROD ? [
new webpack.optimize.UglifyJsPlugin({ minimize: true })
] : []
};
Gulp任务
gulp.task('webpack',['build:html-templates'],function() {
return gulp.src('entry.js')
.pipe(webpack( require('./webpack.config.js') ))
.pipe(gulp.dest('app/assets/js'));
});
// Development watch /////////////////////////////////////////////////////////// 🤖☕️⏎→
gulp.task('watch', function() {
gulp.watch('app/**/**/*.html', ['build:html-templates']).on('change', function(file) {
var filePath = file.path.split(rootPath);
process.stdout.write(gutil.colors.red(' →→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→ ' +filePath[1]+ '\n'));
});
gulp.watch('app/assets/imgs/*.svg').on('change', function(file) {
var filePath = file.path.split(rootPath);
process.stdout.write(gutil.colors.red(' →→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→ ' +filePath[1]+ '\n'));
});
gulp.watch('sass-smacss/sass/**/*.scss', ['app-css']).on('change', function(file) {
var filePath = file.path.split(rootPath);
process.stdout.write(gutil.colors.red(' →→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→ ' +filePath[1]+ '\n'));
});
gulp.watch(paths.scripts, ['webpack']).on('change', function(file) {
var filePath = file.path.split(rootPath);
process.stdout.write(gutil.colors.red(' →→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→ ' +filePath[1]+ '\n'));
});
});
gulp.task('default', ['watch', 'webpack']);
在当前版本的Chrome上,源地图已损坏: https ://bugs.chromium.org/p/chromium/issues/detail?id=611328#c21
一旦修复了源地图(修复程序目前在canary中),那么我确定具有sourcemap的断点也将被修复。
编辑:最后一个链接是一个过时的错误,上面链接的是当前的。
发现有问题的代码段
var alertVolumeUrl = function(ticker, term_id) {
var url = api.alertsVolume;
return _.isEmpty(term_id) ? url + ticker : url;
};
function alertsVolume(ticker, params) {
var url = alertVolumeUrl(ticker, params.term_id);
return $http.get(url, {params: params}).then(function(res){
return res.data.alerts;
});
我不得不像这样重写第二个函数:
var alertVolumeUrl = function(ticker, term_id) {
var url = '/app/api/alerts/volume/';
return _.isEmpty(term_id) ? url + ticker : url;
};
var alertsVolume = function(ticker, params) {
return $http.get(alertVolumeUrl(ticker, params.term_id), { params: params }).then(function(res){
return res.data.alerts;
});
};
请注意,现在在第二个函数中如何使用alertVolumeUrl
。
由于某种原因导致我们的断点失败。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.