Javascript .map files - javascript source maps

Problem

Recently I have seen files with .js.map extension shipped with some JavaScript libraries (like Angular), and that just raised few questions in my head:

  • What is it for? Why do the guys at Angular care to deliver a .js.map file?
  • How can I (as a JavaScript developer) use the angular.min.js.map file?
  • Should I care about creating .js.map files for my JavaScript applications?
  • How does it get created? I took a look at angular.min.js.map and it was filled with strange-formatted strings so I assume it's not created manually.
Problem courtesy of: Muhammad Reda

Solution

The .map files are for js and css files that have been minified. They are called SourceMaps. When you minify a file, like the angular.js file, it takes thousands of lines of pretty code and turns it into only a few lines of ugly code. Hopefully, when you are shipping your code to production, you are using the minified code instead of the full, unminified version. When your app is in production, and has an error, the sourcemap will help take your ugly file, and will allow you to see the original version of the code. If you didn't have the sourcemap, then any error would seem cryptic at best.

Same for CSS files. Once you take a SASS or LESS file and compile it to CSS, it looks nothing like it's original form. If you enable sourcemaps, then you can see the original state of the file, instead of the modified state.

So, to answer you questions in order:

  • What is it for? To de-reference uglified code
  • How can a developer use it? You use it for debugging a production app. In development mode you can use the full version of Angular. In production, you would use the minified version.
  • Should I care about creating a js.map file? If you care about being able to debug production code easier, then yes, you should do it.
  • How does it get created? It is created at build time. There are build tools that can build your .map file for you as it does other files. https://github.com/gruntjs/grunt-contrib-uglify/issues/71

I hope this makes sense.

Solution courtesy of: frosty

Discussion

Just wanted to focus on the last part of the question; How source map files are created? by listing the build tools I know that can create source maps.

  1. Grunt: using plugin grunt-contrib-uglify
  2. Gulp: using plugin gulp-uglify
  3. Google closure: using parameter --create_source_map

I don't know if there are other tools that can create source maps.

Discussion courtesy of: Muhammad Reda

The map file maps the unminified file to the minified file. If you make changes in the unminified file, the changes will be automatically reflected to the minified version of the file.

Discussion courtesy of: Surendra Yadav
  • How can a developer use it? I didn't find answer for this in the comments, here is how can be used:

    1. Don't link your js.map file in your index.html file (no need for that)
    2. Minifiacation tools (good ones) add a comment to your .min.js file: //# sourceMappingURL=yourFileName.min.js.map , which will connect your .map file

When the min.js and js.map files are ready...

  1. Chrome: Open dev-tools, navigate to 'Sources' tab, You will see 'sources' folder, where unminifide applications files are keep
Discussion courtesy of: garfunkel61

This recipe can be found in it's original form on Stack Over Flow.