Hype Blast

Home / general

How to fix the "DevTools failed to load SourceMap: Could not load content" error when adding a JavaScript library?

James Craig |

My code

<html> <head> <!-- Load TensorFlow.js --> <script src=""></script> <!-- Load Posenet --> <script src=""></script> </head> <body> <img id='cat' src='./pose/images/aa_085.jpg'/> </body> <!-- Place your code in the script tag below. You can also use an external .js file --> <script> var flipHorizontal = false; var imageElement = document.getElementById('cat'); posenet.load().then(function(net) { const pose = net.estimateSinglePose(imageElement, { flipHorizontal: true }); return pose; }).then(function(pose){ console.log(pose); }) </script>
</html>

I rarely use HTML and JavaScript and almost forget the most fundamentals. What is the error?

Error information

DevTools failed to load SourceMap: Could not load content for : HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

8

14 Answers

This worked for me:

Go to Inspect → Settings (Symbol) gear → Uncheck Enable JavaScript source maps and Enable CSS source map.

Refresh.

(Note: Deactivate Adblock if the above process did not work.)

9

Newer files on JsDelivr get the sourcemap added automatically to the end of them. This is fine and doesn't throw any SourceMap-related notice in the console as long as you load the files from JsDelivr.

The problem occurs only when you copy and then load these files from your own server. In order to fix this for locally loaded files, simply remove the last line in the JavaScript file(s) downloaded from JsDelivr.

It should look something like this:

//# sourceMappingURL=/sm/64bec5fd901c75766b1ade899155ce5e1c28413a4707f0120043b96f4a3d8f80.map

As you can see, it's commented out, but Chrome still parses it.

7

This is what worked for me:

Instead of

<script src=""></script>

try

<script src=""> </script>

After that change I am not seeing the error any more.

0

Also I'd faced the same kind of problem for Telerik's Kendo UI JavaScript file. For that you need to uncheck options 'Enable JavaScript source maps' and 'Enable CSS source map' from the Inspect element as shown in image and refresh the web page.

In setting of the Inspect element

Uncheck the options 'Enable JavaScript source maps' and 'Enable CSS source map'

4

When it’s annoying with warnings like

DevTools failed to load SourceMap: Could not load content for HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

follow this path and remove that tricky/*# sourceMappingURL=bootstrap.min.css.map */ line in file bootstrap.min.css.

2

In my case, I had to deactivate Adblock and it worked fine.

1

I had a similar problem when I was trying to work with coco-ssd. I think this problem is caused by the version. I changed the version of tfjs to 0.9.0 and coco-ssd version to 1.1.0 and it worked for me. (You can search for posenet versions on .)

<!-- Load TensorFlow.js -->
<script src=""></script>
<!-- Load the coco-ssd model. -->
<script src=""</script>

In my case I had to remove React Dev Tools from Chrome to stop seeing the strange errors during development of React application using a local Express.js server with a Create React App client (which uses Webpack).

In the interest of community, I did a sanity check and quit everything - server/client server/Chrome - and then I opened Chrome and reinstalled React Dev Tools... I started things back up and am seeing this funky address and error again:

Error seems to be from React Dev Tools extension in my case

1

Try to see if it works in Incognito Mode. If it does, then it's a bug in recent Chrome. On my computer the following fix worked:

  1. Quit Chrome
  2. Delete your full Chrome cache folder
  3. Restart Chrome

While the fix as per Valeri works, it’s only for tfjs.

If you're expecting for body-pix or any other tensor-flow/models, you would be facing the same. It is an open issue too and the team is working on the fix!

[extension] DevTools failed to load SourceMap: Could not load content for browser-polyfill.js.map #1977

But, if you don't have problem in degrading the version (if anyone wants to use body-pix) from the latest documentation, both the below links works fine as I've tested the same:

<script src=""></script>
<script src=""></script>

In my case, some broken URL was found in a layout.

1

I get this warning in Angular if I run:

ng serve --sourceMap=false

To fix:

ng serve
1

In my case the sourcemaps for node_modules were explicitly excluded from processing. In my webpack.config.js I had to comment out the exclude option in module configuration (the rules part where use: ["source-map-loader"] is).

module: { rules:[ { test: /\.js$/, // exclude: /node_modules/, //this is the line that caused the problem. Remove or comment it out. enforce: "pre", use: ["source-map-loader"], }, ],
}

I used the minified version of the CSS file and it worked for me.

use:import 'react-toastify/dist/ReactToastify.min.css'

instead of: import 'react-toastify/dist/ReactToastify.css'

You Might Also Like