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

Question

I'm trying to display an image selected from the local machine and I need the location of that image for a JavaScript function. But I'm unable to get the location.

To get the image location, I tried using console.log, but nothing returns.

console.log(document.getElementById("uploadPreview"));

Here's the HTML code:

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div align="center" style="padding-top: 50px"> <img align="center" id="uploadPreview" style="width: 100px; height: 100px;" /> </div> <div align="center" style="padding-left: 30px"> <input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" /> </div> <script type="text/javascript"> function PreviewImage() { var oFReader = new FileReader(); oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); oFReader.onload = function (oFREvent) { document.getElementById("uploadPreview").src = oFREvent.target.result; console.log(document.getElementById("uploadPreview").src); }; } </script> </body> </html>

Console Output:

Here's the warning:

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

If you click the link you'll see in the url that it's related to an extension. Probably AdBlock. — Juan Carlos Puerto
– Juan Carlos Puerto, Commented May 26, 2020 at 22:00
@JuanCarlosPuerto I had 10 of these warnings on my Drupal website. Disabled AdBlock and Brave Shields, now I only have 2. Thanks! — Chris Rahmé
– Chris Rahmé, Commented Aug 28, 2020 at 21:46
Possibly relevant: DevTools failed to load SourceMap: Could not load content (Thought it's a slightly different error: "HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE") — Scratte
– Scratte, Commented Feb 5, 2021 at 0:13
In my case help me deactivate Loom for Chrome. I test deactivating other extensions but the only one with the problem was Loom. — Erick
– Erick, Commented Mar 17, 2021 at 16:40
Similar (posted the day before): When adding a JavaScript library, Chrome complains about a missing source map. Why?. Probably the same root cause (support was added for source maps in Chrome). — Peter Mortensen
– Peter Mortensen, Commented Sep 10, 2021 at 17:58

Diego Oña · Accepted Answer · 2022-07-27 11:07:46Z

480

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.

edited Jul 27, 2022 at 11:07

answered Apr 26, 2020 at 15:02

Diego Oña

5,2371 gold badge9 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

23 Comments

iVoidWarranties Over a year ago

I have faced the same issue. Your answer gets rid of the warning, but do you know the proper solution instead of just disabling it? I mean why the warning is triggering to begin with? I am new to these source maps stuff.

Jack Steam Over a year ago

Everyone, please note that this answer DISABLES source maps in the dev tools. Make sure that's what you want.

kboul Over a year ago

This works great but it has a side effect. It changes the file name and line that a console log comes from. If you put a log in a js file it indicates the compiled es5 file (main.chunk.js: line number) instead of the actual file (f.i index.js: line)

MMachinegun Over a year ago

mine was caused by a webpack-config. I changed the config to include devtool: 'inline-source-map', as aiibe mentioned on github. Just mentioning it here in case somebody comes across the same issue and finds this first ;)

Jay J Over a year ago

@MMachinegun, I have many instances of the webpack-config in my application's ecosystem. How did you know which to change? I get this error for injectGlobalHook.js.map, react_devtools_backend.js.map, and contentScript.js.map

|

Peter Mortensen · Accepted Answer · 2021-09-11 15:06:49Z

157

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.

edited Sep 11, 2021 at 15:06

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Mar 2, 2021 at 14:06

Chandima

2,0811 gold badge14 silver badges7 bronze badges

3 Comments

Robin Clowers Over a year ago

Why would this be the right answer? Are these warning not indicating a problem that should be fixed? What does select context mean here?

philw Over a year ago

Not shipping a source map isn't "a problem": it's a choice of the extension supplier.

Norman Bird Over a year ago

This answer made all the bad warnings go away. (said in the voice of Betty Boop)

Peter Mortensen · Accepted Answer · 2021-09-11 15:17:23Z

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:

Go to the three dots in the upper right hand corner of Chrome.
Go to "More Tools" and click on "Extensions".
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:

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

This did the trick. I did not need to "Do this for one extension at a time" because the extension code shown in the extension list matched part of the error string. Thank you for providing the solution that "fixes" the issue instead of turning off or disabling Chrome features.
Agree with @Danny Remington - OMS. The answer with the most upvotes is not the best. As Danny put it: "It is like turning off the fire alarm instead of putting out the fire." You need to fix the underlying issue.
+1 This is the best answer. For me, it was AdBlock that caused the error as well. It didn't help to disable it for the current page, I had to disable the extension.
You can also just google the extension ID in the URL to find the offender. For example, googling klekeajafkkpokaofllcadenjdckhinm has McAfee as the first result.

user1849962 · Accepted Answer · 2023-05-17 12:46:43Z

I stumbled upon this Stack Overflow question after discovering loads of source map errors in the console for the Edge browser. (I think I had disabled the warnings in the Chrome browser long ago.)

For me it meant first realising what a source map is; please refer to Macro Mazzon's answer to understand this. Since it's a good idea, it was just a case of finding out how to turn them on.

It's as simple as adding this line in your webpack.config.js file -

module.exports = { devtool: "source-map", }

Now that Edge could detect a source map, the errors disappeared.

Commenting in Feb 2022. This one solved it. All of my warnings went away
@Tyrcnex That's external stuff. The answer should not assume people have installed or are using this.

Peter Mortensen · Accepted Answer · 2021-09-10 18:01:47Z

54

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.

edited Sep 10, 2021 at 18:01

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 25, 2020 at 12:32

Ravikiran kalal

1,0708 silver badges11 bronze badges

4 Comments

Rubyx Over a year ago

This solution works for me too. But the line was inside js.cookie.min.js

mjwach Over a year ago

Yeah I just solved my problem (with the React Developer Tools extension) in this same way. I had to find the three React DevTools files that were being complained about, delete the sourcemapping comments out of them, and restart Chrome. Then things were fine. Hooray for hacks!

Khalid Abu Shawarib Over a year ago

This is the proper solution instead of working around by disabling maps or ignoring warnings.

Peter Mortensen Over a year ago

That line has apparently been inserted by a minification tool.

Peter Mortensen · Accepted Answer · 2021-09-11 13:58:49Z

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.

Peter Mortensen · Accepted Answer · 2022-08-17 00:06:54Z

Chrome has changed the UI in 2022, so this is a new version of the most upvoted reply.

Open the dev tools (hit F12 or Option + Command + J)
Select the gear at the top. There are two gears in that area, so be sure to select the one at the top, top.
Locate the Sources section
Deselect "Enable JavaScript source maps"

Check to see if it worked!

Thanks for updating with fresh instructions. But I already have these ticked and still get two warnings.

Peter Mortensen · Accepted Answer · 2021-09-11 15:05:31Z

Right: it has nothing to do with your code. I've found two valid solutions to this warning (not just disabling it). To better understand what a source map is, I suggest you check out this answer, where it explains how it's something that helps you debug:

The .map files are for JavaScript and CSS (and now TypeScript too) files that have been minified. They are called SourceMaps. When you minify a file, like the angular.js file, it takes thousands of lines of pretty code and turns it into only a few lines of ugly code. Hopefully, when you are shipping your code to production, you are using the minified code instead of the full, unminified version. When your app is in production, and has an error, the sourcemap will help take your ugly file, and will allow you to see the original version of the code. If you didn't have the sourcemap, then any error would seem cryptic at best.

First solution: apparently, Mr Heelis was the closest one: you should add the .map file and there are some tools that help you with this problem (Grunt, Gulp and Google closure for example, quoting the answer). Otherwise you can download the .map file from official sites like Bootstrap, jQuery, font-awesome, preload and so on... (maybe installing things like popper or swiper by the npm command in a random folder and copying just the .map file in your JavaScript/CSS destination folder)
Second solution (the one I used): add the source files using a CDN (content delivery network). (Here are all the advantages of using a CDN). Using content delivery network (CDN) you can simply add the CDN link, instead of the path to your folder. You can find CNDs on official websites (Bootstrap, jquery, popper, etc.) or you can easily search on some websites like Cloudflare, cdnjs, etc.

There's zero point in downloading source maps for Bootstrap/jQuery/etc. If you wanted to debug this stuff you wouldn't use the minified sources anyway. Much simpler just to ignore these non-warnings.

Peter Mortensen · Accepted Answer · 2021-09-10 18:04:53Z

Extensions without enough permissions on Chrome can cause these warnings, for example for React developer tools. Check if the following procedure solves your problem:

Right click on the extension icon.

Or

Go to extensions.
Click the three-dot in the row of React developer tool.

Then choose "This can read and write site data".

You should see three options in the list. Pick one that is strict enough based on how much you trust the extension and also satisfies the extension's needs.

Removing React developer tools removed the warning for me. It was showing up on all non React sites.
@RonniDC It is enough if you follow these answer steps and select the first option When you click the extension. Not necessary to uninstall the extension.

Peter Mortensen · Accepted Answer · 2021-09-11 13:54:13Z

I appreciate this is part of your extensions, but I see this message in all sorts of places these days, and I hate it: how I fixed it (this fix seems to massively speed up the browser too) was by adding a dead file

physically create the file it wants it/where it wants it, as a blank file (for example, "popper.min.js.map")

put this in the blank file

{ "version": 1, "mappings": "", "sources": [], "names": [], "file": "popper.min.js" }

make sure that "file": "*******" in the content of the blank file matches the name of your file ******.map (minus the word ".map")

(I suspect you could physically add this dead file method to the addon yourself.)

My browser lists the desired files are chrome extensions for example: chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/injectGlobalHook.js.map. Where would that location be in the file system?
@MrHeelis: Unfortunately, after I applied your solution to an extension, then Chrome has disabled that extension, showing a message "This extension may be corrupted". It was only possible to click "Repair this extension" to enable it again. The repair process has removed the dead file which I had added, because it has reinstalled the extension.

Peter Mortensen · Accepted Answer · 2021-09-10 18:03:01Z

5

I do not think the warnings you have received are related. I had the same warnings which turned out to be the Chrome extension React Dev Tools. I removed the extension and the errors were gone.

edited Sep 10, 2021 at 18:03

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Oct 27, 2020 at 12:02

Jozadad1

791 silver badge2 bronze badges

2 Comments

Constantin Over a year ago

Please read How to write a good answer

Merrin K Over a year ago

This work`s removing this extension solved the issue

Peter Mortensen · Accepted Answer · 2022-08-16 23:58:45Z

3

You have just missing files.

Go to the website https://www.cdnpkg.com/. Download what you need and copy it to the right folder.

edited Aug 16, 2022 at 23:58

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 17, 2022 at 12:36

Panda

892 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2022-08-17 00:01:58Z

For me, the warnings were caused by the Selenium IDE Chrome extension. These warnings appeared in the Console on every page load:

DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/atoms.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/polyfills.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/escape.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/playback.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/record.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Since Selenium IDE was already set to be able to read site data on all sites, I uninstalled it. (I read in another comment here that you might try enabling more permissions for an extension instead of removing it.) In my case, removing Selenium IDE (Chrome extension) got rid of the warnings.

Harsh Rathod · Accepted Answer · 2022-12-04 20:14:47Z

I had the same problem. I tried to disable the extensions one by one to check it, and finally realized I had Adblock enabled, which was causing this issue. To remove that error I followed the step below,

Three dots (top right corner).
Click More tools --> extensions.
Disable the Adblock.
Reload the page.

And it should work now.

Avatar · Accepted Answer · 2023-01-17 18:31:36Z

DevTools failed to load source map: Could not load content for chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND

Disable the Chrome extension "Adblock Plus - free ad blocker". https://chrome.google.com/webstore/detail/adblock-plus-free-ad-bloc/cfhdojbkjhnklbpkdaibdccddilifddb

Lately this error is caused by the extension.

It works, can someone explain why is it and if there is a chance to use the extension without the error in react
You can use Brave browser which has an adblocker and a track-blocker included.
This can be due by CSP header. If apply, remove the CSP header or changes the directive values/parameters such as the origin.

Peter Mortensen · Accepted Answer · 2021-09-10 18:12:32Z

It is also possible to add the file that is missing, aside with other .js libraries in the same folder (no need to reference the .map in the .html file, <script> tag).

I had the same error, when trying to code in Backbone.js.

The problematic file was backbone-min.js, and the line that created the error was sourceMappingURL=backbone-min.map.

After downloading the missing file (the link comes from here), the error disappeared.

danronmoon · Accepted Answer · 2022-11-30 16:50:12Z

Problems with Debugging and Sourcemaps in Web Browsers

Hope this clarifies the technicals behind the problem...knowing how things works helps some :)

This browser error means it has some compiled version of your JavaScript in a sourcemap intermediate file it or some 3rd party created that is now needed when debugging that same script in "devtools" in your web browser.

This can happen if your script fails (or in your case trying to get an image source hidden in the sourcemap code that created the script) but whose script error is tied to some JavaScript that got created from an original sourcemap file that now cannot be found to debug that same error. So it's an error about an error, a missing debugging file creating a new error. (crazy, huh?)

This error is likely coming from an extension in the web browser and is reporting it has generated a script error it has recorded in the console.log window of devtools (press F12 in the browser). The error is likely from the extension (not your code) saying it has some code that contains an address to a sourcemap file it cannot access, has a bad URI/URL address, is blocked, or that is missing.

The browser only needs this sourcemap file if a developer using devtools will need to debug the original script again.

A sourcemap, by the way, is a file that translates or transpiles code from one language to another language. Often this is a file that the browser uses to translate this source code into a child script like JavaScript/ECMAScript, or when it needs to do the opposite and recreate the source file from the child script. In most cases this file is not needed at all as a 3rd party software program has already compiled or transpiled the source code into the child script for the browser. For example, developers who like TypeScript use it to create JavaScript. This source code gets transpiled into JavaScript so the browser script engine can run it. The URI/URL to this sourcemap file is usually at the top of the javaScript or application compiled code file in a format like //#....

When this intermediary transpile file is missing or blocked for security reasons in a web browser, the application will usually not care unless it needs the source file for debugging the child script using this source file. In that case it will complain when it feels it needs this file and cannot find it, as it uses it to recreate the source file for the code running in the browser when debugging the script in order to allow a developer to debug the original source code. When it cannot find it, it means that any developer trying to debug it will not be able to do so, and is stuck with the compiled code only. So it is safe to turn off these errors in the various ways mentioned in this post. It should not affect your own scripts if it is connected to an extension. Even if it is related to your own scripts, it is still unlikely you need it unless you plan to run debugging from devtools.

gurkan · Accepted Answer · 2023-10-31 14:52:03Z

TL;DR : Source maps aim to improve the web debugging experience. Although it is particularly useful when debugging JavaScript frameworks, if you want to disable it you can do it as follows.

Chrome, Opera, Edge etc. chromium browsers.

Developer Tools > F1+Shift (Developer Settings Preferences)

Uncheck "Enable JavaScript source maps"
Uncheck "Enable CSS source maps"

Chromium Browser Developer Settings Preferences

According to What are source maps?

The need for source maps

Back in the good old days, we built web applications with pure HTML, CSS, and JavaScript and deployed the same files to the web.

However, as we are building more complex web applications nowadays, your development workflow may involve using various tools. These tools require a build process to transpile your code into standard HTML, JavaScript, and CSS that browsers can understand. Additionally, to optimize performance, it's common practice to compress (for example to minify and mangle JavaScript) and combine these files, reducing their size and making them more efficient for the web.

However, this optimization can make debugging more challenging. Compressed code with everything in a single line and shorter variable names can make it difficult to pinpoint the source of an issue. That's where source maps come in—they map your compiled code back to the original code.

Generating source maps

Source maps are files with names ending with .map (for example, >example.min.js.map and styles.css.map). They can be generated by most build >tools, for example, Vite, webpack, Rollup, Parcel, esbuild, and more.

Some tools include source maps by default, while others may need additional configuration to produce them.
/* Example configuration: vite.config.js */ /* https://vitejs.dev/config/ */ export default defineConfig({ build: { sourcemap: true, // enable production source maps }, css: { devSourcemap: true // enable CSS source maps during development } }) 
Understanding the source map

These source map files contain essential information about how the compiled code maps to the original code, enabling developers to debug with ease. Here is an example of a source map.
{ "mappings": "AAAAA,SAASC,cAAc,WAAWC, ...", "sources": ["src/script.ts"], "sourcesContent": ["document.querySelector('button')..."], "names": ["document","querySelector", ...], "version": 3, "file": "example.min.js.map" } 

https://web.dev/articles/source-maps

SayJeyHi · Accepted Answer · 2022-12-05 11:45:14Z

In my case, it was JSON Viewer extension that was blocking the source map files from being loaded

filouDcode · Accepted Answer · 2023-03-08 16:47:33Z

Deactivate the AdBlock extension (the one with a white hand on a red background) and chrome should load all source maps quite well.

But do NOT disable :

The options JS sources maps.
The options CSS sources maps.

Mohammed Yousuff · Accepted Answer · 2023-05-26 05:41:52Z

0

In my case i made silly mistake by adding bootstrap.min.js instead of bootstrap.bundel.js :)

edited May 26, 2023 at 5:41

answered Dec 6, 2022 at 13:55

Mohammed Yousuff

3461 gold badge3 silver badges12 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2021-09-10 18:07:03Z

-3

You need to open Chrome in developer mode: select More tools, then Extensions and select Developer mode

edited Sep 10, 2021 at 18:07

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Dec 21, 2020 at 0:17

lamrini

31 bronze badge

1 Comment

Jake Over a year ago

2022 Update I can't even find this in the Chrome menus.

Collectives™ on Stack Overflow

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

22 Answers 22

23 Comments

3 Comments

10 Comments

5 Comments

4 Comments

Comments

1 Comment

2 Comments

2 Comments

3 Comments

2 Comments

Comments

Comments

Comments

3 Comments

Comments

Problems with Debugging and Sourcemaps in Web Browsers

Comments

Developer Tools > F1+Shift (Developer Settings Preferences)

The need for source maps

Generating source maps

Understanding the source map

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

22 Answers 22

23 Comments

3 Comments

10 Comments

5 Comments

4 Comments

Comments

1 Comment

2 Comments

2 Comments

3 Comments

2 Comments

Comments

Comments

Comments

3 Comments

Comments

Problems with Debugging and Sourcemaps in Web Browsers

Comments

Developer Tools > F1+Shift (Developer Settings Preferences)

The need for source maps

Generating source maps

Understanding the source map

Comments

Comments

Comments

Comments

1 Comment

Linked

Related