Error message "DevTools failed to load SourceMap: Could not load content for chrome-extension://..."

Solution 1:

That's because Chrome added support for source maps.

Go to the developer tools (F12 in the browser), then select the three dots in the upper right corner, and go to Settings.

Then, look for Sources, and disable the options:

• "Enable JavaScript source maps"
• "Enable CSS source maps"

If you do that, that would get rid of the warnings. It has nothing to do with your code. Check the developer tools in other pages and you will see the same warning.

Solution 2:

Go to Developer tools → Settings → Console → tick "Selected context only". The warnings will be hidden. You can see them again by unticking the same box.

The "Selected context only" means only the top, iframe, worker and extension contexts. Which is all that you'll need, the vast majority of the time.

Solution 3:

The include.prepload.js file will have a line like below, probably as the last line:

//# sourceMappingURL=include.prepload.js.map

Delete it and the error will go away.

Solution 4:

For me, the problem was caused not by the application in development itself, but by the Chrome extension React Developer Tool. I solved it partially by right-clicking the extension icon in the toolbar, clicking "Manage extension" and then enabling "Allow access to files URLs." But this measure fixed just some of the alerts.

I found issues in the React repository that suggests the cause is a bug in their extension and is planned to be corrected soon - see issues 20091 and 20075.

You can confirm is extension-related by accessing your application in an anonymous tab without any extension enabled.

Solution 5:

Fixing "SourceMap" error messages in the Development Tools Console caused by Chrome extensions:

Examples caused by McAfee extensions:

DevTools failed to load SourceMap: Could not load content for chrome-extension://klekeajafkkpokaofllcadenjdckhinm/sourceMap/content.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

If you are developing, then you need "Enable JavaScript source maps" and "Enable CSS source maps" checked to be able see your source code in Chrome Developer Tools. Unchecking those takes away your ability to debug your source code. It is like turning off the fire alarm instead of putting out the fire. You do not want to do that.

Instead you want to find the extensions that are causing the messages and turn them off. Here is how you do that:

1. Go to the three dots in the upper right hand corner of Chrome.
2. Go to "More Tools" and click on "Extensions".
3. Do this for one extension at a time until no more "SourceMap" errors are in the console:
   1. Turn off the extension by sliding the switch to the left.
   2. Reload the page that you were using the Development Tools on.
   3. Check if any of the "SourceMap" error messages disappeared.
      1. If any did, then that extension was causing those messages.
      2. Otherwise, that extension can be turned back on.

After determining which extensions caused the issue either:

1. If you need it, then contact the maker to have them fix the issue.
2. Otherwise, remove the extension.