soucemaps on browserify output only work with compress = false

[rob-bateman]

I've been pulling my hair out with this one, but it would seem that the uglifyjs setting compress influences whether sourcemaps are maintained when using gulp-uglify.

The only defining factor in my setup that i can see is the fact that the js input for uglify is coming from a browserify step further up my gulp task list (yes i know browserify has its own options for sourcemaps but i can't seem to get any of them to work effectively).

I've isolated the problem to the following:

this works

return gulp.src('./bin/js/app.js')
        .pipe(sourcemaps.init({loadMaps:true}))
        .pipe(uglify({compress:false}))
        .pipe(sourcemaps.write('./',{sourceRoot:'./'}))
        .pipe(gulp.dest('./bin/js/'));

this doesn't work

return gulp.src('./bin/js/app.js')
        .pipe(sourcemaps.init({loadMaps:true}))
        .pipe(uglify())
        .pipe(sourcemaps.write('./',{sourceRoot:'./'}))
        .pipe(gulp.dest('./bin/js/'));

in the second setup, the sourcemaps appear to work but when i set breakpoints and step through the code, everything after the main entry point source file is mapped incorrectly

Whats surprising is the lack of effectiveness of the compress option - leaving it on only knocks about 10k off a 580k file with it off so I'm happy to leave it like this, but was wondering if anyone else had experienced similar issues

[aarononeal]

I can confirm the same issue. With compress:true my breakpoints are never hit. With compress:false they are hit, but stepping through line by line makes it clear that the mapping is still borked because the wrong lines are being shown as hit. If I eliminate the uglify transform then the sourcemap works fine.

[aarmour]

I am seeing the same behavior as @aarononeal. Even with compress:false, the mapping is not correct. In Chrome, the wrong lines are grayed out in the source files.

[saalmaan]

I can also confirm that I am experiencing similar issue with gulp-uglify and browserify, @aarononeal @aarmour @terinjokes can you try uglify({mangle:false}) option & leave all other options as default and see if you can hit the breakpoints. There is also chrome bug opened since 2013 to address this very issue, seems like they de-prioritised it.

here is how I am using it.

    var b = browserify({
      entries: 'index'
    })
    .bundle( {debug: true} )
    .pipe(source('index.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true, debug:true}));

     eventStream.merge(b, gulp.src('old.js'))
    .pipe(concat('script.js'))
    .pipe( uglify({mangle:true}) )
    .pipe(sourcemaps.write('.', { addComment: true }) )
    .pipe(gulp.dest( './public/dist/js') );

[terinjokes]

Can any of you install from the "uglifyjs-the-hard-way" branch and let me know if this is resolved for you.

npm install git+https://github.com/terinjokes/gulp-uglify.git#uglifyjs-the-hard-way

[saalmaan]

@terinjokes Just tried this but no difference, I tried {mangle:false} then mappings are correct, but with {mangle:true} i only see unified vars. Screenshot attached

[terinjokes]

@saalmaan Does this work with other tools? I've always understand that as a limitation of Chrome's debugger, not that the source maps are incorrect.

[saalmaan]

@terinjokes Do you mean grunt-uglify and other source map generation tools? I have in the past generated source maps through grunt and they have worked with chrome dev tools. Does source maps mangle variables work with non-browserify scripts?

[emallson]

I can confirm that sourcemaps do not work with {compress: true} but do work with {compress: false}. Chrome actually simply fails to load them for me (mash Ctrl-R a few times to make it reload everything) with compression on. Here is my gulp task:

gulp.task('browserify', function() {
    var b = browserify('index.js', {
        debug: true,
        standalone: 'testapp'
    });

    return b.bundle()
        .pipe(source('testapp.min.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(uglify({compress: false}))
        .on('error', gutil.log)
        .pipe(sourcemaps.write('./maps/'))
        .pipe(gulp.dest('./dist/js'));
});

Changing {compress: false} to true breaks the source maps.

[macaullyjames]

I've spent the best part of two days trying to work around this, nice to see that it's not just me :) I've tested in Safari, Chrome and Firefox (all on a Mac) and here are the results:

• Safari

  Source maps are shown with the default uglify configuration. It's possible to trace the code back to the correct place in the uglified file, but any set breakpoints are ignored. No combination of compress: false or mangle: false makes debugging possible. Removing gulp-uglify from the pipeline completely makes the code debuggable again.

• Chrome

  Source maps don't even load with the default configuration. Passing {compress: false} makes them show up and makes debugging possible.

• Firefox

  Everything works as expected out of the box (sigh... I really don't like the Firefox dev tools).

Here's my gulpfile.coffee:

gulp       = require "gulp"
sourcemaps = require "gulp-sourcemaps"
browserify = require "browserify"
source     = require "vinyl-source-stream"
buffer     = require "vinyl-buffer"
stringify  = require "stringify"
ngAnnotate = require "gulp-ng-annotate"
uglify     = require "gulp-uglify"

gulp.task "default", ->
        bundler = browserify
            entries: ["src/index.js"]
            debug: yes
            transform: do stringify

        bundler.bundle()
            .pipe(source "endev.full.js")
            .pipe(do buffer)
            .pipe(sourcemaps.init loadMaps: yes)
            .pipe(do ngAnnotate)
            .pipe(uglify()) # Uglify config passed here
            .pipe(sourcemaps.write "./")
            .pipe(gulp.dest "./dist")

Hope this helps. If anyone has found a fix I'd love to know.

[wwalser]

I'm having the same issue. This seems like a naive question, but I don't see anything in the source that's using the inSourceMap option of Uglify. Would adding that be enough to fix the issue @terinjokes ?

edit: It's also not used on the uglifyjs-the-hard-way branch.

[terinjokes]

@wwalser it used to be there, but was removed in a PR by the creator of gulp-sourcemaps in https://github.com/terinjokes/gulp-uglify/commit/8b9fc8c124fb8fc691cb3fdfc2bff26f9ea32129.

[isaackearl]

Any updates? I still can't get this resolved and I've been pulling my hair out on it 2 days. I can confirm that breakpoints work for me with compress : false, but they are still partially borked, as when I try to add breakpoints they jump to different lines etc sometimes.

return browserify(config.base + 'app/app.js', {debug: true})
        .bundle().on('error', function (err) {
            // print the error (can replace with gulp-util)
            console.log(err.message); 
            // end this stream
            this.emit('end');
        })
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(uglify({
            mangle: false,
            compress:{
                sequences: false
            }
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.base + 'dist/js'))

Any help would be appreciated.

[terinjokes]

@isaackearl I'm sorry you're running into an issue 😦 . Can you let me know what version of gulp-uglify you're using in this project?

[isaackearl]

@terinjokes I've been doing more testing, and I've come to realize the problem isn't with uglify for me... Most of my problems were fixed by adding compress: { sequences: false }, but it still acts funny and jumps around sometimes. However if I remove uglify completely I still have problems with my breakpoints, so maybe it is something with my browserify version.

[jesstelford]

Can confirm @isaackearl's approach is working for me: https://github.com/jesstelford/js13k-2016/blob/cc0459e656859acb6590973144e9487f59aa710f/gulpfile.js#L58-L69

[eugenio4]

Same problem with compress = true. The breakpoints are not working.