在添加 JavaScript 库时，如何修复“ DevTools 未能加载 SourceMap: 无法加载内容”错误？

我的原则

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

我很少使用 HTML 和 JavaScript，几乎忘记了最基本的东西？

错误信息

DevTools 加载 SourceMap 失败: 无法加载 https://cdn.jsdelivr.net/npm/@tensorflow/tf.min.js.map: HTTP 错误: 状态码404，net: : ERR _ HTTP _ RESPONSE _ CODE _ FAILURE 的内容

462655 次浏览
小开

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 https://www.jsdelivr.com/package/npm/@tensorflow-models/posenet.)

<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.9.0"></script>
<!-- Load the coco-ssd model. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@1.1.0"</script>
小开

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.

小开

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

If you're expecting for body-pix or any other TensorFlow or 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 a 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="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@1.0.0"></script>
小开

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
小开

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

小开

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

小开

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

小开
最佳答案

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.

小开

I get this warning in Angular if I run:

ng serve --sourceMap=false

To fix:

ng serve
小开

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

小开

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'

小开

When it’s annoying with warnings like

DevTools failed to load SourceMap: Could not load content for http://********/bootstrap/4.5.0/css/bootstrap.min.css.map: 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.

小开

In my case, the sourcemaps for node_modules folder 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'

小开

Sometimes it’s an error caused by adblocker extensions.

Make sure looking in another browser or disable extensions of this type.


提交答案