CODEWITHSUNDEEP
javascriptgulpgoogle-chrome-devtoolsgulp-sourcemaps
Adzo13
Adzo13

Reputation: 124

Gulp-Sourcemaps: Chrome DevTools incorrectly references source of compiled js

Example case:

I have 3 javascript files (Act.js, Body.js, SpriteSheets.js) that are being compiled together with gulp 4.0 and source mapped with gulp-sourcemaps 2.6.4. An error is thrown on line 43 of Body.js, but the console says line 194 of Act.js. Act.js has 151 lines, so if I click the Act.js:194 link in the Console it opens up Sources and highlights the last line (151) in Act.js.

All 3 javascript sources display correctly in the Sources tab and the console prints the correct class and function names, but the console always points to Act.js, even console logs that exist in the other files.

I don't know if this is a Chrome issue, a gulp-sourcemaps issue, or a problem with my code. Any ideas?

Gulp Compile Function:

const gulp = require('gulp');
const concat = require('gulp-concat');
const minify = require('gulp-minify');
const plumber = require('gulp-plumber');
const sourcemaps = require('gulp-sourcemaps');
....

const compileJS = (src, dest, name, include) => {
    console.log(`js compile ${src}`);
    let glob = [src];
    if (include){
        glob = include.first ? include.src.concat(glob) : glob.concat(include.src);
    }
    return gulp.src(glob)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        // concat all js in folder and name result as folder's name
        .pipe(concat(name + '.js'))
        .pipe(minify({
            noSource: true,
            ext: {
                min: '.min.js'
            }
        }))
        .pipe(sourcemaps.write('./', {
            sourceMappingURLPrefix: src.replace('./', '').replace('src', '').replace('/**', '').replace('/*.js', '')
        }))
        .pipe(gulp.dest(dest));
};

I should note that SASS is also being compiled and sourced mapped and the sourcemap works correctly.

Upvotes: 0

Views: 251

Answers (1)

Adzo13
Adzo13

Reputation: 124

Looks like gulp-minify was the problem. It's an unsupported plug-in when it comes to using gulp-sourcemaps. Whoops! I should have read the documentation thoroughly. I switch to using gulp-uglify-es for minification.

Upvotes: 1

Related Questions