添加 JavaScript 库时如何修复 "DevTools failed to load SourceMap: Could not load content" 错误？

Question

我的代码

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

Answer 1

我在尝试使用 coco-ssd 时遇到了类似的问题。我认为这个问题是由版本引起的。我将 tfjs 的版本更改为 0.9.0，将 coco-ssd 的版本更改为 1.1.0，它对我有用。（您可以在 https://www.jsdelivr.com/package/npm/@tensorflow-models/posenet 上搜索 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>

Answer 2

这对我有用：

而不是

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>

尝试

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"> </script>

更改之后，我再也看不到错误了。

Answer 3

虽然有效，但仅适用于 tfjs。

如果您期待 body-pix 或任何其他 tensor-flow/models，您将面临同样的问题。这也是一个悬而未决的问题，团队正在努力解决！

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

但是，如果您从 the latest documentation 降级版本（如果有人想使用 body-pix）没有问题，下面两个链接都可以正常工作，因为我已经测试过相同的内容：

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

Answer 4

试试看它是否可以在隐身模式下使用。如果确实如此，那么它就是最近 Chrome 中的一个错误。在我的电脑上，以下修复有效：

退出Chrome
删除完整的 Chrome 缓存文件夹
重启Chrome

Answer 5

在我的情况下，我不得不停用 Adblock 并且效果很好。

Answer 6

这对我有用：

转到检查→设置（符号）齿轮→取消选中启用JavaScript源映射和启用CSS源映射.

刷新。

（注意：如果上述过程无效，请停用 Adblock。）

Answer 7

就我而言，在布局中发现了一些损坏的 URL。

Answer 8

JsDelivr 上的较新文件会自动将源映射添加到它们的末尾。这很好，只要您从 JsDelivr 加载文件，就不会在控制台中抛出任何 SourceMap-related 通知。

仅当您从自己的服务器复制并加载这些文件时才会出现此问题。为了解决本地加载文件的这个问题，只需删除从 JsDelivr 下载的 JavaScript 个文件中的最后一行。

它应该看起来像这样：

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

如你所见，它被注释掉了，但是Chrome仍然解析它。

Answer 9

如果我运行:

我会在 Angular 中收到此警告

ng serve --sourceMap=false

修复：

ng serve

Answer 10

在我的例子中，我不得不从 Chrome 中删除 React Dev Tools，以停止在使用带有 Create React App client (which uses Webpack 的本地 Express.js 服务器开发 React 应用程序期间看到奇怪的错误。

为了社区的利益，我进行了完整性检查并退出了所有内容 - server/client server/Chrome - 然后我打开了 Chrome 并重新安装了 React Dev Tools...我开始了事情恢复了，我又看到了这个奇怪的地址和错误：

Answer 11

此外，我在 Telerik 的 Kendo UI JavaScript 文件中也遇到过同样的问题。为此，您需要取消选中 Inspect 元素中的选项 'Enable JavaScript source maps' 和 'Enable CSS source map'，如图所示，然后刷新网页。

Answer 12

当像

这样的警告烦人时

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

遵循此路径并删除那个棘手的问题 /*# sourceMappingURL=bootstrap.min.css.map */ 文件中的行 bootstrap.min.css.

Answer 13

在我的例子中，node_modules 的源映射被明确排除在处理之外。在我的 webpack.config.js 中，我不得不注释掉模块配置中的排除选项（use: ["source-map-loader"] 所在的 rules 部分）。

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"],
        },
    ],
}

Answer 14

我使用了 CSS 文件的压缩版本，它对我有用。

使用： import 'react-toastify/dist/ReactToastify.min.css'

而不是：import 'react-toastify/dist/ReactToastify.css'

添加 JavaScript 库时如何修复 "DevTools failed to load SourceMap: Could not load content" 错误？

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

google-chrome-devtools

source-maps

我的代码

错误信息