This is the most annoying problem. I've run into this before here , however I have the same setup in my webpack config and gulp and I cannot set breakpoints correctly in the Chrome Devtools.
I've deleted my app file and map, re-run gulp webpack
which auto-generates it again, and it still does not break where I want too in the app :(
Webpack config
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 tasks
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']);
Sourcemaps are broken on the current version of Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=611328#c21
Once source maps are fixed (the fix is currently in canary), then I'm sure breakpoints with sourcemaps will be fixed as well.
EDIT: Last link was an outdated bug, the one linked above is current.
To my knowledge the only solution is to not use sourcemaps with minified code. Either compile your code without minification, or use chrome dev tools's builtin pretty-print feature. The problem is that minification usually compresses multiple lines into a comma expression. Comma expressions are not interpreted as separate statements by the dev tools, thats why you only can put breakpoints on the beginning of code blocks. Sourcemaps just convert back the textual representation of the minified code, but the engine executes them by lines in the minified code.
EDIT
See if disabling sourcemaps helps, this is where you find the setting in Chrome:
Open the developer console, press F1, and find the following checkbox
FOUND THE PROBLEMATIC PIECE OF CODE
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;
});
I had to rewrite the 2nd function like so:
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;
});
};
Note how alertVolumeUrl
is being used in the 2nd function now.
That for some reason was causing our breakpoints to fail.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.