logo标签列表

当我添加一个JavaScript库时，如何修复“DevTools无法加载SourceMap：无法加载内容”错误？

google-chrome-devtoolstensorflow.jssource-maps
126

我的代码

<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

2
URL不正确，找不到资源。 - Teemu
1
但这是由Tensorflow文档提供的。 - Edee
只需将该URL复制到地址栏中并按ENTER键，资源即不存在。 - Teemu
4
可以，它有效。我刚试过了。 - Edee
你能告诉我如何修复它吗？ - Edee
显示剩余3条评论
19个回答
137

以下方法适用于我：

进入检查 → 设置（符号）齿轮 → 取消选中启用JavaScript源映射和启用CSS源映射。

刷新页面。

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

42
它确实起作用了，但这不是在解决问题而是在移除问题吧？问题已经在浏览器终端中解决了，而不是在网页代码中！ - Saghachi
32
如果某个东西不起作用，只需卸载它，错误就会消失。 - kraxor
3
在不禁用AdBlock的情况下取消选中这两个选项解决了问题。 - philippos
17
这篇文章为什么有76个赞？这是错误的。你们会禁用每个使用你们网页的用户的电脑上的此功能吗？ - Gerhard
18
另一种解决方法是闭上你的眼睛。现在我一直闭着眼睛，从来不看这个警告。问题得到了解决！ - Joakim
显示剩余5条评论
85

JsDelivr自动将源映射添加到其上的新文件的末尾。只要从JsDelivr加载文件，这是可以的，并且不会在控制台中引发任何与SourceMap相关的消息。

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

它应该看起来像这样：

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

你可以看到，它被注释了，但是Chrome仍然解析它。

4
删除那一行代码后，警告不再显示了，但我不知道它的作用是什么。 - 27px
2
这应该是最佳答案+1。 - Bobby Axe
3
这有效，但请问有人可以解释一下它为什么存在以及它的作用是什么吗？ - K. Shaikh
2
源映射URL是注释（请参见MDN文档）。因此，唯一的解决方案是将其删除。 - nikhilweee
1
不行，这并没有解决问题。我的Json格式正确。只有Chrome开发者控制台显示这个错误，但脚本仍然可以正常工作。应该忽略吗？ - AndiAna
显示剩余3条评论
23

这是对我有效的方法：

不要使用

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

尝试

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

在那个更改之后，我再也没有看到错误了。

这个链接让它完全停止工作。原始链接（上面列出的“代替”）仍然有效，但在问题中引发了相同的错误（截至2022年12月）。 - jpgerb
16

我曾经遇到过同样的问题，是关于 Telerik 的 Kendo UI JavaScript 文件。你需要在检查元素中取消选中“启用 JavaScript 源映射”和“启用 CSS 源映射”选项，如下图所示，并刷新网页。

在检查元素设置中

取消选中“启用 JavaScript 源映射”和“启用 CSS 源映射”选项

3
这会删除信息，但无法解决问题。 - jowey
1
它确实解决了问题，假设我对源映射不感兴趣。 - leo
9
不，这是完全错误的。这只适用于您的浏览器，您期望每个使用此网页的用户更改其设置吗？ - Gerhard
4
这基本上与GAURAV MOKASHI的回答完全相同（但增加了一张很棒的截图）。 - Peter Mortensen
14

当出现以下警告时会非常烦人：

DevTools 加载 SourceMap 失败：无法加载 http://********/bootstrap/4.5.0/css/bootstrap.min.css.map 的内容：HTTP 错误：状态码 404，net::ERR_HTTP_RESPONSE_CODE_FAILURE

按照以下路径并在文件 bootstrap.min.css 中删除那个棘手的/*# sourceMappingURL=bootstrap.min.css.map */行。

2
这类似于Ivan的答案。 - Peter Mortensen
1
那行代码显然是由一个压缩工具插入的。 - Peter Mortensen
@CodeToLife 这个有效。你知道它是如何工作的吗？ 或者 /*# sourceMappingURL=bootstrap.min.css.map */ 这一行存在的原因是什么？ - sashiksu
@sashiksu，哦，太久了。只是“即插即用”。目前忙于其他事情。 - CodeToLife
1
你是一个国王！ - Benny
8
在我的情况下，我不得不停用Adblock才能正常工作。
1
但这并不会应用于所有计算机。 - Egidius
谢谢。这种方法对我很有效。坦白地说，这个错误真的很烦人。 - Roy
7

我使用了CSS文件的压缩版本，这对我起作用了。

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

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

3
在我的情况下，我不得不从Chrome中删除React Dev Tools，以停止在使用本地Express.js服务器和Create React App客户端（使用Webpack）开发React应用程序期间看到奇怪错误。为了社区的利益，我进行了一次健全性检查并退出了所有内容 - 服务器/客户端服务器/Chrome - 然后我打开Chrome并重新安装React Dev Tools... 我重新启动了所有内容，又再次看到了这个奇怪的地址和错误：

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

5
我发现这个问题与React DevTools Chrome扩展程序的最新版本有关。截至我发表评论时，修复程序仍未发布，但看起来他们正在努力解决：https://github.com/facebook/react/pull/20079 - Craig McKeachie
2

在使用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>
2
有时候这是由于 广告拦截器 扩展程序引起的错误。
请确保在另一个浏览器中查看或禁用此类扩展程序。
我曾经遇到过同样的问题。无论我做什么都无法解决，然后我尝试在“访客”模式下在另一个Chrome窗口中打开我的Web应用程序，它就可以正常工作了。我认为这个问题是由于我主要的Chrome帐户上的某个扩展引起的。 - Andrew Colin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接