How to fix the "DevTools failed to load SourceMap: Could not load content" error when adding a JavaScript library?
My code
<html>
<head>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<!-- Load Posenet -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></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 https://cdn.jsdelivr.net/npm/@tensorflow/tf.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
This worked for me:
Go to Inspect → Settings gear → Uncheck Enable JavaScript source maps and Enable CSS source map.
Refresh.
(Note: Deactivate Adblock if the above process did not work.)
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.
This is what worked for me:
Instead of
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
try
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"> </script>
After that change I am not seeing the error any more.