Chrome 中的断点不适用于 Sourcemap

Question

这是最烦人的问题。我已经运行进入，但是我在我的 webpack 配置和 gulp 中有相同的设置，我无法在 Chrome Devtools 中正确设置断点。

我已经删除了我的应用程序文件和地图，重新运行 gulp webpack 再次自动生成它，它仍然没有在应用程序中我想要的地方中断:(

Webpack 配置

var webpack = require('webpack');
var PROD = JSON.parse(process.env.PROD_DEV || '0');
// 

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']);

Answer 1

据我所知，唯一的解决办法是不使用带有缩小代码的源映射。要么在不缩小的情况下编译代码，要么使用 chrome 开发工具的内置漂亮打印功能。问题是缩小通常会将多行压缩成一个逗号表达式。开发工具不会将逗号表达式解释为单独的语句，这就是为什么您只能在代码块的开头放置断点。 Sourcemaps 只是转换回缩小代码的文本表示，但引擎在缩小代码中按行执行它们。

编辑

查看禁用源映射是否有帮助，这是您在 Chrome 中找到设置的地方：

打开开发者控制台，按F1，找到如下复选框

Answer 2

源映射在 Chrome 的当前版本上已损坏：https://bugs.chromium.org/p/chromium/issues/detail?id=611328#c21

一旦源映射被修复（修复目前在 Canary 中），我相信源映射的断点也会被修复。

编辑：最后一个 link 是一个过时的错误，上面的 linked 是最新的。

Answer 3

找到有问题的代码

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 现在如何在第二个函数中使用。

由于某种原因导致我们的断点失败。

Chrome 中的断点不适用于 Sourcemap

Breakpoints in Chrome not working with Sourcemap

javascript

google-chrome

gulp

webpack

breakpoints