devtools failed to parse sourcemap


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=



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 –


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.

    Tweet this to help others

Sign Up for Our Newsletters

Get only the best articles delivered to your mail

You May Also Like

React convert JSON to CSV

React convert JSON to CSV using JSONToCSVConvertor function. Suppose you have a table (GUI react table tool) and you want to export it into excel, then this function will come…
View Post

.map is not a function

map() can only be used with Arrays. So, if you are getting error .map is not a function, you are probably using it on either the objects or other variables…
View Post