Search code examples
javascriptgoogle-chromegulpuglifyjssource-maps

Do source maps work when debugging?


I'm using gulp with gulp-uglify, gulp-concat and gulp-sourcemaps to minify/concatenate my js files and produce source maps.

When I open chrome dev-tool in the sources tab, I can see the minified file along a "source" directory with all the original files - as expected. But when I try to debug or get an error in the console, then the references are to the minified file (for example, error traces in the console, point to a line in the minified file...).

Is this how source-maps works? or I did something wrong?

My gulp js conf - gulpfile


Solution

  • With source maps the console should point you to the original file.

    Here I intentionally wrote some code that breaks jQuery's internal code. As you can see, the console brings me right to the original file and line. I only included the minified jQuery file. enter image description here

    If for some reason it is not working, make sure "Enable JavaScript source maps" is checked: enter image description here

    I'm not familiar with Gulpjs but just make sure the path of the map is correct.