[Chrome]: DevTools failed to load source map: Could not load content for bootstrap.min.js.map

When adding a bootstrap javascript library to my webpages, Chrome warned as DevTools failed to load source map.  Below is the complete error message:

DevTools failed to load source map: Could not load content for http://192.168.10.12/admin/css/bootstrap.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

As a developer, I expect console output to only contain messages relevant to my application development.

How to fix DevTools failed to load source map error

It was frustrating to see the above error because I had no reference to the file bootstrap.min.js.map in my webpage which was indicated in the warning message. I searched the whole website’s root directory for the file and only found bootstrap.min.js and not bootstrap.min.js.map file. Surprisingly found a reference in the file bootstrap.min.js for bootstrap.min.js.map as below:

//# sourceMappingURL=bootstrap.min.js.map

As it is commented didn’t pay much attention to it!

What is a SourceMap?

The Javascript sources are often combined and minified to optimize the website to load faster and reduce bandwidth usage. Minification and combining dramatically improve site speed and accessibility, directly translating into a better user experience. Such scripts are difficult to debug than the original source code. A source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original to the debugger. To enable the debugger to work with a source map, a source map file shall be generated and included in the transformed file as a comment that points to the source map file as below:

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

Solution: 

Simply remove the below line from the file or based on the bootstrap version, you can download the corresponding source map file and place it in the appropriate directory where bootstrap.min.js is placed.

//# sourceMappingURL=bootstrap.min.js.map

Similarly, if you found a warning corresponding to a missing source map file, either go to the corresponding file and remove the sourceMappingURL line or download the corresponding source map file and place it in the appropriate directory.