Debugging variables not working with gulp sourcemaps + uglify

Question

I have the following gulp task for bundling javascript:

gulp.task('js', function () {
    return gulp.src(paths.js)
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(concat('bundle.min.js'))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist'));
});

When I run this in the Chrome dev tools, sourcemaps are found and breakpoints work, but variables can't be debugged.

Take this example chunk of angular code:

iarApp.config(['$animateProvider', function ($animateProvider) {
    $animateProvider.classNameFilter(/angular-animate/);
}]);

If I add a breakpoint to see the value of $animateProvider, I get the following:

But if I turn off variable mangling in Uglify:

.pipe(uglify({ mangle: false }))

Then it works:

So it seems that the gulp-sourcemaps plugin can't follow up variables after Uglify mangles the names.

Can anyone else get the same issue and/or know a solution?

Answer 1

Turns out this is just not possible currently, since this is not part of the specification for source maps.

There are some proposals to add this feature, so we will have to wait until the spec and implementations are updated.