Chrome 中的断点不适用于 Sourcemap

Posted 2023-03-08

【中文标题】Chrome 中的断点不适用于 Sourcemap

【英文标题】：Breakpoints in Chrome not working with Sourcemap

【发布时间】：2016-10-27 05:28:35

【问题描述】：

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

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

Webpack 配置

var webpack = require('webpack');
var PROD = JSON.parse(process.env.PROD_DEV || '0');
// https://***.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']);

【参考方案1】：

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

编辑

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

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

【讨论】：

是的，我的代码没有被缩小，它只有在我为生产 Gulp 任务运行构建时才会被缩小。这是我当前源图的结尾：//# sourceMappingURL=tickertags.bundle.js.map

webpack 也有可能生成错误的 sourcemap。我自己从未尝试过。

奇怪，我的设置和你的不一样 :( 我也有最新的 Chrome

您在正确的设置菜单中吗？开发工具打开时按 f1

好吧，我已经启用了...我的源地图过去可以工作，叹息...将不得不继续挖掘。

【参考方案2】：

Sourcemaps 在当前版本的 Chrome 上被破坏：https://bugs.chromium.org/p/chromium/issues/detail?id=611328#c21

一旦源映射被修复（修复目前在 canary 中），那么我确信带有源映射的断点也将被修复。

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

【讨论】：

甜蜜！很高兴知道 :D 想知道为什么它们坏了，特别是因为我们有一段时间没有更新 webpack 或 gulp 并且它们还是坏了。

编辑，抱歉在我的情况下它与 Chrome 完全无关。现在发布答案。

有什么方法可以禁用源地图？

【参考方案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 现在是如何在第二个函数中使用的。

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