Sourcemap of Minified CSS/ JS Codes

Question

After minify the CSS or JS code, it gives option to generate source-map file, and it looks like this.
{
"version":3,
"sources":["<unknown>"],
"names":[],
"mappings":"AACA,I,CADA,I,CAAO,S",
"file":"<unknown>",
"sourcesContent":["uninified/ original code"]
}

=> What is the purpose of generating that source-map file?

Please explain in simple language.

Answer 1

Bibek Oli Source maps are used to transform the minified css/js code back to the original code.

Source maps are used for debugging.

In Google Chrome, you can see the difference between the minified code used with source map and without source map in the source tab in developer console.

Refer this link for more detail:

https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map