If you got the warning that devtools failed to parse sourcemap then you need to know that either browser is not able to find sourcemap location or file is corrupted.
What is a sourcemap?
You already know that the production ready javascript files are minified and obfuscated to keep the size small. It is also useful to prevent reverse engineering.
Sourcemap are the files which keeps the information to convert original file to the minified file. In one sense you can say that with the help of sourcemap you can get the original file from minified file without impacting the performance.
Why it is needed?
Now the question is, why we need a sourcemap? It is needed because it is very hard to debug a minified code. Suppose you got an error in an event and want to inspect that then developer console with direct you to the appropriate javascript file. But since the file is minified, the whole code will be in a single line and debugger will just highlight that line without showing the actual position of part with error.
To solve this issue, sourcemaps are used. They can help browsers to convert the part of code back into original source. For example – A coffeescript file converted to javascript file but during debugging you need to access coffeescript file.
How sourcemaps are identified in files?
Each javascript file which has a sourcemap has a comment at the end, indicating the location of sourcemap for that file. According to mdn, it looks like this –
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
or
//# sourceMappingURL=main.js.map
Why we get devtools warning?
When devtools are not able to find the sourcemap file in the provided location or the file is corrupt, then they throw a warning. Since, these sourcemaps are used for debugging purpose, so it’s okay to ignore.
How to prevent the warning?
In order to prevent the warning, you can either remove the comment from javascript file which indicates the location of sourcemap. So, remove any comment like this –
//# sourceMappingURL=main.js.map
You can also turn off sourcemaps from devtools –
1. Open devtools from browser options (ctrl+shift+i)
2. Click on gear icon.
3. Uncheck sourcemaps options for javascript and css.
Also, sometimes browser extensions like Adblock causes issues. So turning the extension off will solve the problem.
