Firefox Developer debug variables marked as undefined when using sourcemaps

Question

I've created some sourcemaps for my minified javascript files uing Gulp, gulp-sourcemaps, Babel and 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'));
});

I can place breakpoints in the sourcemapped code on the browser and it hits them okay. But whenever I hover over a variable it is reported as undefined. The actual minified variable can't be, because the code seems to run okay.

According to https://hacks.mozilla.org/2018/05/debugging-modern-web-applications/ it should be possible? Am I doing something wrong?

I'm using Firefox Developer 72.0b5 (64-bit)

Answer 1

Turns out not running the uglify() task will make it work. Removing that line and rerunning the gulp task, I can debug the original code in the browser and see the variable values.

It seems if you run javascript minification with gulp-uglify or gulp-terser you won't be able to view the variables in the debugger. This is the the same problem in chrome Debugging variables not working with gulp sourcemaps + uglify