google-chromebrowserifybabelify

Chrome breakpoints does not work with browserify and babelify

I am trying to debug my app on chrome. I was using typescript before and it was working fine. But when i switched to javascript with browserify and babelify break points are not triggered anymore. I can see original file source. I can put breakpoint. But it does not stop at the point. I tried to put breakpoint on transpiled file too but that is not works also. I tried on Microsoft Edge it is not working there too. Here is the code i am using to compile my javascript. Btw with debugger; it works. But i don't want to do it because i can forget to remove them.

browserify({
   entries: inputPath,
   debug: !prodMode // prodMode is false so debug is true
})
   .transform("babelify", { presets: ["@babel/preset-env"] })
   .bundle()
   .pipe(vinylSourceStream(path.basename(outputPath)))
   .pipe(gulp.dest(path.dirname(outputPath)));
Solution

  • I found the solution. It was because of the version query on script reference.

    turned

    /build/layoutModuleScripts/root/root.js?v=1601795818927

    to

    /build/layoutModuleScripts/root/root.js

    Now breakpoints work. I dont know is it anything to do with babel or browserify. But in typescript it was working with query string.