时间戳

首页 > 解决方案 > 使用源映射时，Firefox 开发人员调试变量标记为未定义

javascript - 使用源映射时，Firefox 开发人员调试变量标记为未定义

问题描述

我使用 Gulp、gulp-sourcemaps、Babel 和 uglify 为我的缩小 javascript 文件创建了一些源映射：

gulp.task('babel-transpile', ['clean-js'], function () {
    return gulp.src([
                'wwwroot/js/**/*.js',
                'wwwroot/js/**/*.jsx'
            ])
        .pipe(sourcemaps.init())
        .pipe(babel())
        .pipe(uglify())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('wwwroot/js'));
});

我可以在浏览器的源映射代码中放置断点，并且可以正常运行。但是每当我将鼠标悬停在一个变量上时，它就会被报告为未定义。实际的缩小变量不可能，因为代码似乎运行正常。

根据https://hacks.mozilla.org/2018/05/debugging-modern-web-applications/应该有可能吗？难道我做错了什么？

我正在使用 Firefox Developer 72.0b5（64 位）

标签： javascriptfirefoxbabeljssource-mapsgulp-sourcemaps

解决方案

事实证明，不运行 uglify() 任务将使其工作。删除该行并重新运行 gulp 任务，我可以在浏览器中调试原始代码并查看变量值。

似乎如果您使用 gulp-uglify 或 gulp-terser 运行 javascript 缩小，您将无法在调试器中查看变量。这与 chrome Debugging variables 中的相同问题不适用于 gulp sourcemaps + uglify

推荐阅读