551

Recently I have seen files with the .js.map extension shipped with some JavaScript libraries (like Angular), and that just raised a 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.
Improve this question
1
  • The accepted answer links to a video at mozilla.org explaining what a sourcemap is, but I found this intro to be better. Not saying it's perfect, but it goes through a few webpack sourcemap settings showing how each changes the appearance of a simplest-case chunk of code in dev tools as you debug. Spoiler: There's a range of [minimized to original] code. The closer you are to minimized, the faster the sourcemap is created but the uglier the code might be. Closer to original & you get more human-readable code but pay in sourcemap transpilation time
    – ruffin
    Commented Oct 13, 2022 at 19:11

5 Answers 5

Reset to default
823

The .map files are for JavaScript and CSS (and now TypeScript too) files that have been minified. They are called source maps. 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 source map will help take your ugly file, and will allow you to see the original version of the code. If you didn't have the source map, 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 its 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. Sourcemaps fail if the output file is not located in the project root directory #71

I hope this makes sense.

Improve this answer
3
  • 41
    note that the map file will not be sent untill you call it, that is what made me confused stackoverflow.com/a/27196201/861487
    – Abdelouahab
    Commented Nov 28, 2014 at 21:52
  • @frosty To de-reference uglified code. Can you explain this please? Doesn't a .js.map file maintains a relation (oftentimes called reference) between hand-crafted file and a minified file?
    – Zameer Ansari
    Commented Dec 24, 2015 at 11:59
  • 1
    @student it says de-reference because I don't want to reference the minified code. It is minified and if I look at it, it is next to worthless. But, if it could de-reference it back to the original source, that would be epic. And that is exactly what a sourcemap is. I hope that helps.
    – frosty
    Commented Jan 1, 2016 at 22:14
69

How can a developer use it?

  1. Don't link your js.map file in your index.html file (no need for that)

  2. Minification 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...

  3. Chrome: Open dev-tools, navigate to Sources tab. You will see the sources folder, where un-minified applications files are kept.

Improve this answer
1
  • 14
    How can I provide a source map from my local filesystem if this comment is not present in the minified source and I cannot modify it?
    – SasQ
    Commented Mar 15, 2021 at 15:46
50

I just wanted to focus on the last part of the question; How are source map files 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
Improve this answer
2
  • 2
    2021 Update: If using ES6 JS, try using gulp-terser. gulp-uglify as I understand, does not support ES6. If you are using Babel to transpile to ES5, then no issues.
    – iCode
    Commented Mar 11, 2021 at 20:16
  • There is a tool written in Ruby that I've used before: github.com/ConradIrwin/ruby-source_map. I'm looking for something written in python or c.
    – NuclearPeon
    Commented Jul 3, 2021 at 18:47
18

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.

Improve this answer
1
4

Just to add to how to use map files: I use Google Chrome for Ubuntu and if I go to sources and click on a file, if there is a map file a message comes up telling me that I can view the original file and how to do it.

For the Angular files that I worked with today I click Ctrl + P and a list of original files comes up in a small window.

I can then browse through the list to view the file that I would like to inspect and check where the issue might be.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.