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, May 26 '20 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é, Aug 28 '20 at 21:46
Possibly relevant: [DevTools failed to load SourceMap: Could not load content](https://stackoverflow.com/questions/61205390/why-when-adding-a-javascript-library-browsers-complain-about-a-missing-source) (Thought it's a slightly different error: "HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE") — Scratte, Feb 05 '21 at 00:13
In my case help me deactivate Loom for Chrome. I test deactivating other extensions but the only one with the problem was Loom. — Chris, Mar 17 '21 at 16:40
Similar (posted the day before): *[When adding a JavaScript library, Chrome complains about a missing source map. Why?](https://stackoverflow.com/questions/61205390/)*. Probably the same root cause (support was added for source maps in Chrome). — Peter Mortensen, Sep 10 '21 at 17:58

score 249 · Answer 1 · edited Sep 11 '21 at 13:48

249

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 Sep 11 '21 at 13:48

Peter Mortensen

30,030
21
100
124

answered Apr 26 '20 at 15:02

Diego Oña

2,705
1
3
4

84

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. – iVoidWarranties May 17 '20 at 16:19
71

Everyone, please note that this answer DISABLES source maps in the dev tools. Make sure that's what you want. – Jack Steam Jun 08 '20 at 20:10
6

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) – kboul Jun 12 '20 at 14:24
2

For me this worked since it stopped the warnings but did not disable the sourcemap from webpack – franksands Jul 08 '20 at 12:24
4

mine was caused by a webpack-config. I changed the config to include `devtool: 'inline-source-map',` as [aiibe mentioned on github](https://github.com/webpack/webpack-dev-server/issues/1161#issuecomment-345940858). Just mentioning it here in case somebody comes across the same issue and finds this first ;) – MMachinegun Oct 07 '20 at 21:43
That's works. other pages also showing this warning. But when I disable "Enable JavaScript source maps" its fix the issue. I think this issue only for the Chrome, I tried with Opera GX and it's worked fine. – Nuwan Dissanayaka Oct 08 '20 at 04:02
3

@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` – Jay J Oct 25 '20 at 18:30
1

@JayJ not sure which project I came across this issue, but most of the time I only have one config file for webpack, which is sat in the root of the project. So maybe some trial and error, add it in all of them (if they're not too many) and see if it resolves it. If yes, remove one after the other to see which ones actually need that setting to resolve those errors. Just my first thoughts of what I might try to do. – MMachinegun Oct 25 '20 at 20:08
2

facing the same issue for injectGlobalHook.js.map, react_devtools_backend.js.map, and contentScript.js.map files. – Or Assayag Oct 26 '20 at 09:18
While this was helpful, it prevents your own source code from being mapped so it can be debugged. The better solution is to determine which extensions are causing the issues and then handle those extensions as explained in my answer below. – Danny Remington - OMS Mar 10 '21 at 17:24
yes see github [here] if this hapen using vscode (https://github.com/Microsoft/vscode/issues/34385#issuecomment-777191202) – user1767316 Apr 23 '21 at 05:15
1

Disabling the feature that shows a warning message has never been a real solution for the original issue in the warning message. Ever. – Tim Jun 11 '21 at 03:31
@Tim Fua, la re vivís escubi – Diego Oña Jun 12 '21 at 15:00
1

it is only hiding the warning, its not correct – Asfandyar Khan Aug 25 '21 at 14:07
This is not a good solution for most developers. I don't think I am speaking for just myself when I say that this feature of Chrome is very important. The Javascript source maps are useful to those who need to debug their minified/transpiled code... – austinw Jan 01 '22 at 06:19
It's not good solution, the good solution is here: https://stackoverflow.com/a/67559032/1407491 – Nabi K.A.Z. Feb 20 '22 at 16:51
Why would it give a warning though? I mean, it's like Chrome adding a warning for "you did not add some tag that we think you should have in your HTML"... like, that's super-arbitrary. Why does Google think a source map is in some way necessary for a web page to run properly? – SteveExdia May 04 '22 at 18:48

score 98 · Answer 2 · edited Sep 11 '21 at 15:06

98

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 '21 at 15:06

Peter Mortensen

30,030
21
100
124

answered Mar 02 '21 at 14:06

Chandima

1,399
10
6

20

Why would this be the right answer? Are these warning not indicating a problem that should be fixed? What does select context mean here? – Robin Clowers May 12 '21 at 17:35
1

Not shipping a source map isn't "a problem": it's a choice of the extension supplier. – philw Feb 13 '22 at 13:51

score 42 · Answer 3 · edited Sep 10 '21 at 18:01

42

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 '21 at 18:01

Peter Mortensen

30,030
21
100
124

answered Aug 25 '20 at 12:32

Ravikiran kalal

912
7
11

This solution works for me too. But the line was inside js.cookie.min.js – Rubyx Sep 11 '20 at 15:59
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! – mjwach Nov 03 '20 at 17:22
3

This is the proper solution instead of working around by disabling maps or ignoring warnings. – Khalid Abu Shawarib Jun 10 '21 at 12:48
1

That line has apparently been [inserted by a minification tool](https://stackoverflow.com/questions/21719562/how-can-i-use-javascript-source-maps-map-files/36554691#36554691). – Peter Mortensen Sep 11 '21 at 14:42

score 34 · Answer 4 · edited Sep 11 '21 at 15:22

34

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.

Apologies if this answer insults anybody's intelligence, but maybe somebody reading this will be as clueless about source maps as I was.

edited Sep 11 '21 at 15:22

Peter Mortensen

30,030
21
100
124

answered May 16 '21 at 16:21

user1849962

895
1
8
14

my errors disappeared. thank – malik kurosaki Dec 02 '21 at 10:41
Commenting in Feb 2022. This one solved it. All of my warnings went away – atlee19 Feb 02 '22 at 20:11

score 30 · Answer 5 · edited Sep 11 '21 at 13:58

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.

score 30 · Answer 6 · edited Sep 11 '21 at 15:17

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. — Neil_Tinkerer, Mar 31 '21 at 17:57
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. — Robin Zimmermann, Apr 20 '22 at 19:24

score 11 · Answer 7 · edited Sep 11 '21 at 15:05

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.

score 9 · Answer 8 · edited Sep 10 '21 at 18:04

9

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.

edited Sep 10 '21 at 18:04

Peter Mortensen

30,030
21
100
124

answered Oct 30 '20 at 03:29

Mooventhan

101
1
3

Removing React developer tools removed the warning for me. It was showing up on all non React sites. – Ronni DC Nov 01 '20 at 22:32
@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. – Guillermo Garcia Nov 07 '20 at 01:04

score 5 · Answer 9 · edited Sep 11 '21 at 13:54

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? — Jay J, Oct 25 '20 at 08:08

score 4 · Answer 10 · edited Sep 10 '21 at 18:03

4

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 '21 at 18:03

Peter Mortensen

30,030
21
100
124

answered Oct 27 '20 at 12:02

Jozadad1

69
2

4

Please read [How to write a good answer](https://stackoverflow.com/help/how-to-answer) – Constantin Oct 27 '20 at 12:55

score 2 · Answer 11 · answered Jan 17 '22 at 12:36

2

You have just missing files.

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

answered Jan 17 '22 at 12:36

Adam Boniecki

31
2

score 2 · Answer 12 · answered Jan 29 '22 at 21:30

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 on 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.

score 1 · Answer 13 · edited Sep 10 '21 at 18:12

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.

score -2 · Answer 14 · edited Sep 10 '21 at 18:07

-2

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

edited Sep 10 '21 at 18:07

Peter Mortensen

30,030
21
100
124

answered Dec 21 '20 at 00:17

lamrini

5
1

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

14 Answers14

Linked