Firefox Developer 调试变量在使用源映射时标记为未定义

Question

我使用 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 位）

Answer 1

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

似乎如果您使用 gulp-uglify 或 gulp-terser 运行 javascript 缩小，您将无法在调试器中查看变量。这与 chrome

中的问题相同