How to Use JavaScript Source Maps (.Map Files)

How can I use JavaScript source maps (.map files)?

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.

what are .js.map files?

The config devtool: 'source-map' in webpack.config.js generated this file when you built it.

Why it is needed?

You can run minified Javascript or transpiled Javascript which is good for performance, but not particularly helpful when debugging. Source maps are a way for modern browsers to take the minified code (js, css) and allow us to read the code in its unminified state in the debugger.

How can I specify a file source map after the page loads up?

You can right-click on a minified source file and select "Add Source Map". Then paste in the URL of the map file.

If your mappings file doesn't include the original file contents alongside the mappings make sure the original file paths are accessible to Chrome.

Add Source Map

How to use sourcemaps to restore the original file?

Open up the source map in a text editor, and you’ll see that it’s mostly just a simple JSON object. The “sources” field contains an array of URLs/paths to all source files, which can help you to find them. There is also an optional “sourcesContent” field, which also is an array, where each item contains the contents of the file at the same index in the “sources” array; if so, you could find the original code right in the source map.

A CLI tool? Well, there’s source-map-visualize which tries to find all original sources and pre-loads them into this online source map visualization.

JS Source map file doesnt exist - Lighthouse

That's not how source maps work. You must append //# sourceMappingURL=swiper-bundle.js.map at the end of the JS file.