Source Maps are not getting activated in Google Chrome

Question

I'm really having a tough time with source maps. Any ideas ?
Here is the context :

• Stack : babel+gulp+browserify
• Srouce map link is added at the bottom of my file.
• Source maps are enabled in Chrome
• Chrome indicates that it detected the source maps.
• Files are hosted on Shopify
• When I enter Ctrl+P I don't detect the source map
• I tried multiple variations of adding the source map manually as indicated here, but it didn't work. (name.js.map | name.js.map?v=xxxxx | full url etc..)

gulpfile.js

//////
var sourcemaps = require('gulp-sourcemaps');
//////

////
function compileBrowserify(done) {
    var bundler = watchify(browserify(paths.scripts.target, { debug: true })
        .transform(babel,
            {
                "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-private-methods", "@babel/plugin-transform-runtime",],
                "presets": ["@babel/preset-env"]
            })
    );

    function rebundle() {
        bundler.bundle()
            .on('error', function (err) { console.error(err); this.emit('end'); })
            .pipe(source('sz_xxxx.js'))
            .pipe(buffer())
            .pipe(sourcemaps.init({ loadMaps: true }))
            .pipe(sourcemaps.write('./'))
            .pipe(header(banner.main, { package: package }))
            .pipe(touch())
            .pipe(dest(paths.scripts.output));
    }

    bundler.on('update', function () {
        console.log('-> bundling...');
        rebundle();
    })

    rebundle();
    done();
}
////