添加 JavaScript 库时如何解决“DevTools 无法加载 SourceMap：无法加载内容”错误？答案

【问题标题】：How to fix the "DevTools failed to load SourceMap: Could not load content" error when adding a JavaScript library?添加 JavaScript 库时如何解决“DevTools 无法加载 SourceMap：无法加载内容”错误？
【发布时间】：2020-07-27 01:04:57
【问题描述】：

我的代码

<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

【问题讨论】：

网址不正确，找不到资源。
但这是由 Tensorflow 文档给出的
把那个URL放到地址栏然后回车，资源不存在。
不，它有效。刚试过。
那是什么来源？如果我单击该链接，页面会显示“无法解析请求的文件。”。

标签： google-chrome-devtools source-maps

【解决方案1】：

在我的例子中，node_modules 的源映射被明确排除在处理之外。在我的 webpack.config.js 中，我不得不注释掉模块配置中的 exclude 选项（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"],
        },
    ],
}

【讨论】：

【解决方案2】：

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

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

它应该看起来像这样：

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

如您所见，它已被注释掉，但 Chrome 仍会解析它。

【讨论】：

删除该行已修复显示该警告，但我不知道它的作用。
这应该是最佳答案+1
这行得通，但谁能解释它为什么在那里以及它的作用？
根据定义，源映射 url 是 cmets（参见 MDN Docs）。所以唯一的解决办法就是删除它。
如果在“//”和“#”之间加一个空格怎么办？有区别吗？（Google 的（内部）编码标准要求有空格。）

【解决方案3】：

当它被类似警告烦人时

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 中的行。

【讨论】：

这类似于Ivan's answer。
那行显然是inserted by a minification tool。

【解决方案4】：

对于 Telerik 的 Kendo UI JavaScript 文件，我也遇到了同样的问题。为此，您需要取消选中 Inspect 元素中的选项“启用 JavaScript 源映射”和“启用 CSS 源映射”，如图所示并刷新网页。

【讨论】：

这会删除消息，但不能解决问题。
它确实解决了问题，假设我对源地图不感兴趣
不，这是完全错误的。这仅适用于您的浏览器，您是否希望使用此网页的每个用户都更改其设置？
这与GAURAV MOKASHI's answer 基本相同（尽管屏幕截图很棒）。

【解决方案5】：

在我的情况下，我不得不从 Chrome 中删除 React 开发工具，以停止在使用本地 Express.js 服务器和 Create React App 客户端（使用 Webpack）开发 React 应用程序期间看到奇怪的错误。

为了社区的利益，我进行了健全性检查并退出了所有内容 - 服务器/客户端服务器/Chrome - 然后我打开了 Chrome 并重新安装了 React 开发工具...我重新启动并看到了这个时髦的地址和又报错了：

【讨论】：

我跟踪了这个问题，因为它与最新版本的 React DevTools Chrome 扩展程序有关。在我发表评论时，该修复程序尚未发布，但看起来他们正在努力：github.com/facebook/react/pull/20079

【解决方案6】：

在我的例子中，在布局中发现了一些损坏的 URL。

【讨论】：

你能提供更多细节吗？在目前的形式中，我认为它没有那么有用。

【解决方案7】：

虽然the fix as per Valeri 有效，但它仅适用于 tfjs。

如果您期望使用 body-pix 或任何其他张量流/模型，您将面临同样的问题。这也是一个悬而未决的问题，团队正在努力修复！

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

【讨论】：

【解决方案8】：

这对我有用：

转到检查→设置齿轮→取消选中启用JavaScript源映射和启用CSS源映射。

刷新。

（注意：如果上述过程不起作用，请停用Adblock。）

【讨论】：

它有效，但这不是消除问题而不是解决它吗？问题在浏览器终端上解决，不在网页代码中！
这个答案基本是“如果不行，卸载了，错误就没有了”
很好的答案 - 但是，如果我不想要（也不需要）源映射，那么 Chrome Devtools 为什么会打扰我呢？这两个复选框的未选中状态应该是默认状态...
取消选中这两个选项没有禁用 AdBlock 解决了问题。
这是如何获得 76 票的？这是错误的。您是否要在使用您网页的每个用户 PC 上禁用此功能？

【解决方案9】：

就我而言，我不得不停用Adblock，它工作正常。

【讨论】：

【解决方案10】：

我在尝试使用 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>

【讨论】：

【解决方案11】：

这对我有用：

代替

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

试试

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

在那次更改之后，我不再看到错误。

【讨论】：

【解决方案12】：

如果我运行，我会在 Angular 中收到此警告：

ng serve --sourceMap=false

修复：

ng serve

【讨论】：

它做什么（或应该做什么）？为什么会起作用？

【解决方案13】：

尝试看看它是否在隐身模式下工作。如果是这样，那么这是最近 Chrome 中的一个错误。在我的电脑上，以下修复有效：

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

【讨论】：