作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是最烦人的问题。我遇到了this before here ,但是我的 webpack 配置和 gulp 中有相同的设置,但我无法在 Chrome Devtools 中正确设置断点。
我已经删除了我的应用程序文件和 map ,重新运行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
一旦源映射被修复(修复目前在金丝雀中),那么我确信源映射的断点也将被修复。
编辑:最后一个链接是一个过时的错误,上面链接的链接是最新的。
关于javascript - Chrome 中的断点不适用于 Sourcemap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38016021/
我是一名优秀的程序员,十分优秀!