Devtools failed to load sourcemap could not load content for chrome ошибка

Обновлено: 28.09.2022

4 Answers 4

Hide them via console filter like -/(load|parse)\sSourceMap/

enter image description here

(using a /regexp/ with \s seems to be the only working method of specifying strings with spaces)

True but if it's in there, I cannot filter by any other queries. Or rather I need to append another "minus" filter.

In DevTools (F12) -> Settings (F1) :

Disable both "enable JS source maps" and "enable CSS source maps" in "Preferences -> Sources"

This disables source maps altogether. While I guess its technically a solution, it removes important functionality at the same time. Its not about having NO source maps, its about just getting rid of the annoying warnings.

If you open DevTools (F12) then look for the cog "Preferences" top/right you can disable "Enable JavaScript source maps" under the Sources section by un-checking that option.

Find the cog (preferences)
Find the option

This solution is only if you don't want to use that particular extension (which is causing the issue) on your site or to remove the addon from your browser.

Click on the link that is printedn in the console log. the link starts with "chrome-extension", it will take you to the extension's page, you can find the name in the address bar

Screenshot of chrome extension

Go to the extensions( Chrome menu > More tools > Extensions ). You can either remove it from the browser or restrict the access by changing the site access to On click choosing from the options of the extension as below.

Hello Guys, How are you all? Hope You all Are Fine. Today I Face the following error in my console log in Chrome DevTools failed to load SourceMap: Could not load content for chrome-extension in Javascript. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

joaomelo commented Nov 5, 2020

I don't know if is of any help for fixing the bug, but anyhow sharing my experience, some of the messages did not appear anymore in Chrome after I right-clicked the React Dev Tool extension icon in the toolbar, clicked "manage extension" (I'm freely translating menu text here since my browser language is in Brazilian Portuguese), and then enabled "Allow access to files URLs."

What is actually happening?

In DevTool Console panel :

The text was updated successfully, but these errors were encountered:

jSadoski commented Apr 13, 2021

I wanted to follow up with more information about this issue. This breaks the whole extension for me with this error:

kevikanon commented Oct 13, 2021 •

Was googling for similar issues and found this. As the OP mentioned this is an issue caused by Chromium Bug 1052872. So I did a little workaround in my chrome browser and it worked for me.

Here's what I did:

  1. Go to chrome://flags (chrome experimental features) page on your chrome browser.
  2. Search for Extensions on chrome:// URLs flag and enable it.
  3. Restart the browser.

I think this will work on other chromium based browsers too. You need to replace the name of the browser on flag url for other chromium browsers. e.g. edge://flags or brave://flags.

Warning: I do not know whether this poses any risk or security vulnerability, so you are to proceed at your own risk if you want to!

bvaughn commented Nov 11, 2020 •

As I said above, the fix for this has not been released yet. Releasing DevTools takes a decent amount of time and I haven't had the time to publish an update yet.

bvaughn commented Nov 4, 2020 •

The fix has not been released. You're running the latest DevTools. Once this fix gets releasd, Chrome will update you.

Solution 3: find the extensions that are causing the messages and turn them off

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:
  4. Turn off the extension by sliding the switch to the left.
  5. Reload the page that you were using the Development Tools on.
  6. Check if any of the “SourceMap” error messages disappeared.
  7. If any did, then that extension was causing those messages.
  8. Otherwise, that extension can be turned back on.

unnsteinngardars commented May 25, 2021

Found a fix for this. In developer tools in chrome browser, go to settings(click the gear icon on the same bar as the console tab). Find and uncheck box that says Enable Javascript Sourcemap. exit settings and reload(I did a hard reload/empty cache. The error should be gone.

Kudos! Did the trick for me.

givihuda commented Jun 1, 2021

Can somebody explain what this error means? I can't tell if it's causing the weird issue I'm having while modifying some code I'm not very familiar with that uses Laravel 8 and Vue (v?).

I'm not familiar with vue-resize.esm.js.map. is that a file in the /js folder that Google likes Chrome to look for to help DevTools understand your code?

What is expected?

Willi-Smith commented Nov 11, 2020

I don't know if is of any help for fixing the bug, but anyhow sharing my experience, some of the messages did not appear anymore in Chrome after I right-clicked the React Dev Tool extension icon in the toolbar, clicked "manage extension" (I'm freely translating menu text here since my browser language is in Brazilian Portuguese), and then enabled "Allow access to files URLs."

This unfortunately doesn't work for me.

  • Chrome: 88.0.4315.5 (Official Build) dev (64-bit)
  • fresh install of React Developer Tools
  • no other extensions

Console still polluted by:

glen-84 commented Sep 19, 2021

I'm still seeing these warnings .

givihuda commented Sep 20, 2021

If source maps are not generated for the production build of the devtools extension, then why does the production version check for source maps? It seems like it guarantees an error.

How To Solve DevTools failed to load SourceMap: Could not load content for chrome-extension Error ?

  1. How To Solve DevTools failed to load SourceMap: Could not load content for chrome-extension Error?

To Solve DevTools failed to load SourceMap: Could not load content for chrome-extension. This Problem happens 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 on other pages and you will see the same warning.

jgaehring commented Jan 26, 2022

Just documenting a super-weird variation of this issue in case anyone else encounters something similar.

That main.map bit really perplexed me and was super hard to pin down (good luck searching main.* !), but eventually with some help from this SO answer I was able to find it in my Chrome extensions by searching that hash, which turned up this completely unrelated extension, highlight-to-google-calendar by @blackwood (no shade intended, just pinging you in case this is of interest, love the extension btw!), which I just so happened to install yesterday. Switching this extension's "Site access" settings from "On all sites" to "On click" resolved the issue for me.

Still I can't understand why another extension would get picked up by Vue DevTools. 🤔

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.

Here's the HTML code:

Enter image description here

Here's the warning:

@JuanCarlosPuerto I had 10 of these warnings on my Drupal website. Disabled AdBlock and Brave Shields, now I only have 2. Thanks!

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")

In my case help me deactivate Loom for Chrome. I test deactivating other extensions but the only one with the problem was Loom.

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

danielpickett commented Nov 4, 2020

Oh, I see. Thank you!

9mm commented Aug 3, 2021

Just started getting this as well

Solution 2: selected context only

  1. Go to developer tools -> settings -> console -> tick “Selected context only”.
  2. The warnings will be hidden. You can see them again by unticking the same box.
  3. The “selected context only” means only the top, iframe, worker and extension contexts.
  4. Which is all that you’ll need, the vast majority of the time.

Akryum commented Sep 19, 2021

Source maps are not generated for the production build of the devtools extension:

image

sytranvn commented Oct 22, 2020

irfanfadilah commented Oct 21, 2021

@kevikanon after I enabled that setting in chrome://flags , I got this warning:

image

I think it's not a really good idea to enable it.

bvaughn commented Oct 22, 2020

givihuda commented Jul 13, 2021

Since I'm not very familiar with the Vue implementation on the project I referenced, I'm not sure the previous developers even implemented the sourcemap or Vue or whatever properly to begin with. I will be able to determine this better with more review of the code, which I can do when I use the project again, and if I find anything useful there that would be helpful for this thread, I'll post here again. Thanks for the info.

14 Answers 14

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.

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.

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

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 ;)

@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

Go to Developer toolsSettingsConsole → 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.

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

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

Delete it and the error will go away.

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!

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 -

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.

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.

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

Examples caused by McAfee extensions:

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.

      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.

      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.

      How to suppress Chrome DevTools warning: 'DevTools failed to load SourceMap: Could not load content for. '?

      Many thx. Could you please post as an answer, an also the filter expression in text form too I am going to accept it.

      A better way is to use DevTools to persist the suppression, I have put some screenshots in an answer to this question.

      danielpickett commented Nov 4, 2020

      Still having this issue. It looks like my React DevTools extension is still on version 4.9.0.

      image

      How do I get the version with the fix that was merged above? Removing and re-adding the extension didn't work. Sorry for the rookie question, but I'm sure others will be landing here with the same question.

      redfox05 commented Jul 13, 2021 •

      Found a fix for this. In developer tools in chrome browser, go to settings(click the gear icon on the same bar as the console tab). Find and uncheck box that says Enable Javascript Sourcemap. exit settings and reload(I did a hard reload/empty cache. The error should be gone.

      This is a workaround, not a fix, because if you are using VueJS DevTools, its quite likely you are a developer wanting to use source maps for your own JS code, so wouldn't want to untick this option as its a global flag for all sourcemaps.

      The actual fix for this is one of two options:

      1. Exclude the sourcemap line from the end of the JS file if sourcemaps are not going to be included in the built code.
      2. Include the sourcemaps in the extension, and the problem also goes away.

      P.s. I got this error for the utils.js script instead:

      bvaughn commented Oct 22, 2020

      Sorry about the hassle here. I'm not sure why Chrome is showing this warning, as the source map URLs are correct. If anyone would like to dig into this, I'd welcome the help.

      bvaughn commented Oct 22, 2020 •

      @hqwuzhaoyi Your comment does not seem related to this thread. If you're seeing a problem with a component's props loading, please file a separate issue with repro instructions.

      Summery

      It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

      Screen Shot 2020-10-22 at 12 12 23 AM

      The text was updated successfully, but these errors were encountered:

      bvaughn added Component: Developer Tools good first issue Type: Bug and removed Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug labels Oct 22, 2020

      geminigeek commented Sep 8, 2021

      I got this error for the utils.js script instead:

      Same issue on macOS (Big Sur 11.5) Chrome (Version 92.0.4515.107 (Official Build) (x86_64)) and Vue.js devtools 6.0.0 beta 15 + ViteJS (2.4.3)

      image

      Same issue here on win10

      bvaughn commented Oct 22, 2020

      greaterDeltaCS commented May 21, 2021

      Found a fix for this. In developer tools in chrome browser, go to settings(click the gear icon on the same bar as the console tab). Find and uncheck box that says Enable Javascript Sourcemap. exit settings and reload(I did a hard reload/empty cache. The error should be gone.

      Friss commented Oct 22, 2020

      Thanks for the quick work @bvaughn @sytranvn

      We've run into similar issues with our own chrome extension so no big deal :D

      Solution 1: Enable javascript source maps

      This Problem happens because Chrome added support for source maps.

      1. Go to the developer tools (F12 in the browser)
      2. then select the three dots in the upper right corner, and go to Settings.
      3. Then, look for Sources, and disable the options: “Enable javascript source maps” “Enable CSS source maps”
      4. If you do that, that would get rid of the warnings.
      5. It has nothing to do with your code. Check the developer tools in other pages and you will see the same warning.

      What is expected?

      uonick commented Jul 28, 2021

      I got this error for the utils.js script instead:

      Same issue on macOS (Big Sur 11.5) Chrome (Version 92.0.4515.107 (Official Build) (x86_64)) and Vue.js devtools 6.0.0 beta 15 + ViteJS (2.4.3)

      image

      How DevTools failed to load SourceMap: Could not load content for chrome-extension Error Occurs ?

      Today I Face the following error in my console log in Chrome.

      cordeiguerin commented Apr 5, 2021

      same issue (but I run Linux Mint, rather than Windows)

      jSadoski commented Apr 12, 2021 •

      Same issue, but on macOS in Chrome and Brave.

      Edit: macOS not iOS

      jSadoski commented Jun 2, 2021

      is that a file in the /js folder that Google likes Chrome to look for to help DevTools understand your code?

      Yes, source maps helps DevTools unpack your minified code. It's just for when you're running in dev. See: MDN: Use a Source Map.

      As to why this is breaking Vue DevTools I'm not totally sure.

      Читайте также: