javascript - Chrome 中的断点不适用于 Sourcemap

标签 javascript google-chrome gulp webpack breakpoints

这是最烦人的问题。我遇到了this before here ,但是我的 webpack 配置和 gulp 中有相同的设置,但我无法在 Chrome Devtools 中正确设置断点。

我已经删除了我的应用程序文件和 map ,重新运行gulp webpack,它会再次自动生成它,并且它仍然不会破坏应用程序中我想要的位置:(

enter image description here

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/

相关文章:

JavaScript 和 HTML - 视频屏幕退出后停止背景声音

javascript - 动态改变 JavaScript 原型(prototype)会导致问题

javascript - Visual Studio 2015 JavaScript 语言服务陷入下载不存在的引用文件的无限循环

css - 如何解决呈现为黑色方 block 的动画元素(Chrome 错误)?

javascript - 为什么javascript触发提交表单(方法获取,目标空白)打开弹出窗口而不是新选项卡?

javascript - 是否可以在没有相对路径的情况下从项目目录外部请求模块?

javascript - 隐藏 id 字段的自动完成功能不起作用

google-chrome - 不触发内容安全策略违规事件

laravel - Elixir 未定义错误

sass - Gulp sass问题与导入以代字号开头的node_modules