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

Question

我已经为我的缩小的javascript文件创建了一些源映射，包括Gulp，gulp-sourcemaps，Babel和uglify：

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/应该有可能吗？我做错了什么吗？

我正在使用火狐开发者 72.0b5(64 位(

Answer 1

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

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