错误消息“DevTools 无法加载 SourceMap：无法加载 chrome-extension://... 的内容”答案

【问题标题】：Error message "DevTools failed to load SourceMap: Could not load content for chrome-extension://..."错误消息“DevTools 无法加载 SourceMap：无法加载 chrome-extension://... 的内容”
【发布时间】：2020-08-03 23:44:05
【问题描述】：

我正在尝试显示从本地计算机中选择的图像，我需要该图像的位置以用于 JavaScript 函数，但无法获取图像的位置。

为了获取图像位置，我尝试使用 console.log，但没有任何返回。

console.log(document.getElementById("uploadPreview"));

这是 HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>

<body>
  <div align="center" style="padding-top: 50px">
    <img align="center" id="uploadPreview" style="width: 100px; height: 100px;" />
  </div>

  <div align="center" style="padding-left: 30px">
    <input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
  </div>

  <script type="text/javascript">
    function PreviewImage() {
      var oFReader = new FileReader();
      oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

      oFReader.onload = function (oFREvent) {
        document.getElementById("uploadPreview").src = oFREvent.target.result;
        console.log(document.getElementById("uploadPreview").src);

      };
    }
  </script>

</body>
</html>

控制台输出：

这是警告：

DevTools 无法加载 SourceMap：无法加载内容 chrome-extension://alplpnakfeabeiebipdmaenpmbgknjce/include.preload.js.map: HTTP 错误：状态码 404，net::ERR_UNKNOWN_URL_SCHEME

【问题讨论】：

如果您单击链接，您将在 url 中看到它与扩展程序相关。可能是 AdBlock。
@JuanCarlosPuerto 我的 Drupal 网站上有 10 个这样的警告。禁用 AdBlock 和 Brave Shields，现在我只有 2 个。谢谢！
可能相关：DevTools failed to load SourceMap: Could not load content（认为这是一个稍微不同的错误：“HTTP 错误：状态代码 404，net::ERR_HTTP_RESPONSE_CODE_FAILURE”）
在我的情况下，帮我停用 Loom for Chrome。我测试停用其他扩展，但唯一有问题的是 Loom。
类似（前一天发布）：When adding a JavaScript library, Chrome complains about a missing source map. Why?。可能是相同的根本原因（Chrome 中添加了对源映射的支持）。

标签： javascript html

【解决方案1】：

在Edge 浏览器的控制台中发现大量源映射错误后，我偶然发现了这个堆栈溢出问题。（我想我很久以前就禁用了 Chrome 浏览器中的警告。）

对我来说，这意味着首先要了解source map 是什么；请参考Macro Mazzon's answer 了解这一点。既然这是个好主意，那就只是找出如何打开它们的一个案例。

就像在你的 webpack.config.js 文件中添加这一行一样简单 -

module.exports = {
    devtool: "source-map",
}

现在 Edge 可以检测到源地图，错误消失了。

如果这个答案侮辱了任何人的智商，我们深表歉意，但也许读到这篇文章的人会像我一样对源地图一无所知。

【讨论】：

我的错误消失了。谢谢

【解决方案2】：

修复开发工具控制台中由 Chrome 扩展引起的“SourceMap”错误消息：

由 McAfee 扩展引起的示例：

DevTools 无法加载 SourceMap：无法加载 chrome-extension://klekeajafkkpokaofllcadenjdckhinm/sourceMap/content.map 的内容：HTTP 错误：状态代码 404，net::ERR_UNKNOWN_URL_SCHEME

DevTools 无法加载 SourceMap：无法加载 chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map 的内容：HTTP 错误：状态代码 404，net::ERR_UNKNOWN_URL_SCHEME

DevTools 无法加载 SourceMap：无法加载 chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map 的内容：HTTP 错误：状态代码 404，net::ERR_UNKNOWN_URL_SCHEME

如果您正在开发，那么您需要选中“启用 JavaScript 源映射”和“启用 CSS 源映射”才能在 Chrome 开发者工具中看到您的源代码。取消选中这些会剥夺您调试源代码的能力。这就像关掉火警而不是扑灭火灾。 你不想这样做。

相反，您希望找到导致消息的扩展程序并将其关闭。您可以这样做：

转到 Chrome 右上角的三个点。
进入“更多工具”并点击“扩展”。
一次为一个扩展执行此操作，直到控制台中不再出现“SourceMap”错误：
1. 通过向左滑动开关来关闭扩展。
2. 重新加载您正在使用开发工具的页面。
3. 检查是否有任何“SourceMap”错误消息消失。
  1. 如果有，则说明是该扩展程序导致了这些消息。
  2. 否则，可以重新打开该扩展程序。

确定是哪些扩展程序导致了问题之后：

如果您需要，请联系制造商让他们解决问题。
否则，请删除扩展名。

【讨论】：

这成功了。我不需要“一次只为一个扩展执行此操作”，因为扩展列表中显示的扩展代码与错误字符串的一部分匹配。感谢您提供“修复”问题的解决方案，而不是关闭或禁用 Chrome 功能。
在我的例子中是“Selenium IDE”扩展
在我的情况下是 Keeper 扩展
这必须是最佳答案。谢谢，成功了！

【解决方案3】：

转到开发者工具 → 设置 → 控制台 → 勾选“仅选定上下文”。警告将被隐藏。您可以通过取消选中同一个框再次看到它们。

“仅选定上下文” 仅表示顶部、iframe、工作者和扩展上下文。绝大多数情况下，这就是您所需要的。

【讨论】：

为什么这是正确的答案？这些警告不是表示应该解决的问题吗？在这里选择上下文是什么意思？

【解决方案4】：

对：它与您的代码无关。我找到了两个有效的解决方案来解决这个警告（不仅仅是禁用它）。为了更好地理解source map 是什么，我建议您查看this answer，它解释了它是如何帮助您调试的：

.map 文件用于已缩小的 JavaScript 和 CSS（现在也包括 TypeScript）文件。它们被称为 SourceMaps。当你缩小一个文件时，比如 angular.js 文件，它需要数千行漂亮的代码，然后把它变成只有几行丑陋的代码。希望当您将代码交付生产时，您使用的是缩小后的代码，而不是完整的、未缩小的版本。当您的应用程序在生产中并出现错误时，源映射将帮助您获取丑陋的文件，并允许您查看代码的原始版本。如果您没有源映射，那么任何错误充其量都显得晦涩难懂。

第一个解决方案：显然，Mr Heelis 是最接近的一个：您应该添加 .map 文件，并且有 some tools 可以帮助您解决这个问题（Grunt、Gulp和Google closure 例如，引用答案）。否则，您可以从Bootstrap、jQuery、font-awesome、preload 等官方网站下载 .map 文件...（可能通过npm 安装popper 或swiper 之类的东西随机文件夹中的命令并仅复制 JavaScript/CSS 目标文件夹中的 .map 文件）
第二种解决方案（我使用的那个）：使用CDN（内容交付网络）添加源文件。（Here 是使用 CDN 的所有优点）。使用内容交付网络 (CDN)，您可以简单地添加 CDN 链接，而不是文件夹的路径。您可以在官方网站（Bootstrap、jquery、popper等）上找到CND，也可以在Cloudflare、cdnjs等一些网站上轻松搜索。

【讨论】：

【解决方案5】：

对我来说，问题不是由开发中的应用程序本身引起的，而是由 Chrome 扩展 React Developer Tool 引起的。我通过右键单击工具栏中的扩展图标，单击“管理扩展”，然后启用“允许访问文件 URL”，部分解决了这个问题。但此措施仅修复了部分警报。

我在 React 存储库中发现了一些问题，表明其原因是其扩展中的错误，并计划很快得到纠正 - 请参阅问题 20091 和 20075。

您可以通过在未启用任何扩展程序的匿名选项卡中访问您的应用程序来确认是否与扩展程序相关。

【讨论】：

【解决方案6】：

我很欣赏这是您的扩展程序的一部分，但是这些天我在各种地方都看到了这条消息，我讨厌它：我如何修复它（这个修复似乎也大大加快了浏览器的速度）是通过添加一个死文件

物理地创建它想要的文件/它想要的位置，作为一个空白文件（例如，“popper.min.js.map”）

把这个放在空白文件里

{
 "version": 1,
 "mappings": "",
 "sources": [],
 "names": [],
 "file": "popper.min.js"
}

确保空白文件内容中的"file": "*******"匹配您的文件名******.map（减去“.map”一词）

（我怀疑您可以自己将这个 dead file 方法物理添加到插件中。）

【讨论】：

我的浏览器列出了所需的文件是 chrome 扩展名，例如：chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/injectGlobalHook.js.map。该位置在文件系统中的什么位置？

【解决方案7】：

那是因为 Chrome 添加了对源映射的支持。

进入开发者工具（浏览器中的F12），然后选择右上角的三个点，然后进入设置。

然后，查找 Sources，并禁用这些选项：

“启用 JavaScript 源映射”
“启用 CSS 源映射”

如果你这样做，那将消除警告。它与您的代码无关。检查其他页面中的开发者工具，您将看到相同的警告。

【讨论】：

我也遇到过同样的问题。您的答案消除了警告，但是您知道正确的解决方案而不仅仅是禁用它吗？我的意思是为什么要触发警告？我是这些源地图的新手。
大家，请注意这个答案会在开发工具中禁用源映射。确保这是你想要的。
这很好用，但有副作用。它更改控制台日志来自的文件名和行。如果将日志放在 js 文件中，则表示编译后的 es5 文件（main.chunk.js：行号）而不是实际文件（f.i index.js：行）
我的问题是由 webpack-config 引起的。我将配置更改为将devtool: 'inline-source-map', 包含为aiibe mentioned on github。只是在这里提到它，以防有人遇到同样的问题并首先找到它;）
@MMachinegun，我的应用程序生态系统中有很多 webpack-config 实例。你怎么知道要改变哪个？我收到 injectGlobalHook.js.map、react_devtools_backend.js.map 和 contentScript.js.map 的此错误

【解决方案8】：

也可以添加缺少的文件，除了同一个文件夹中的其他.js库（无需引用.html文件中的.map，

我在 Backbone.js 中尝试编码时遇到了同样的错误。

有问题的文件是backbone-min.js，导致错误的行是sourceMappingURL=backbone-min.map。

下载丢失的文件后（链接来自here），错误消失了。

【讨论】：

【解决方案9】：

您需要在开发者模式下打开 Chrome：选择更多工具，然后选择扩展并选择开发者模式

【讨论】：

【解决方案10】：

在 Chrome 上没有足够权限的扩展可能会导致这些警告，例如对于 React 开发人员工具。检查以下步骤是否能解决您的问题：

右键单击扩展图标。

或者

转到扩展。
点击 React 开发者工具行中的三点。

然后选择“这可以读写站点数据”。

您应该在列表中看到三个选项。根据您对扩展程序的信任程度并满足扩展程序的需求，选择一个足够严格的。

【讨论】：

删除 React 开发人员工具为我删除了警告。它出现在所有非 React 网站上。
@RonniDC 如果您按照这些回答步骤并选择第一个选项点击扩展时就足够了。不需要卸载扩展。

【解决方案11】：

我认为您收到的警告不相关。我有同样的警告，原来是 Chrome 扩展 React Dev Tools。我删除了扩展程序，错误消失了。

【讨论】：

请阅读How to write a good answer

【解决方案12】：

include.prepload.js 文件将有如下一行，可能是最后一行：

//# sourceMappingURL=include.prepload.js.map

删除它，错误就会消失。

【讨论】：

这个解决方案也适用于我。但是这条线在 js.cookie.min.js 里面
是的，我刚刚以同样的方式解决了我的问题（使用 React Developer Tools 扩展）。我必须找到被投诉的三个 React DevTools 文件，从中删除 sourcemapping cmets，然后重新启动 Chrome。然后一切都很好。黑客万岁！
这是正确的解决方案，而不是通过禁用地图或忽略警告来解决问题。
那行显然是inserted by a minification tool。
简单而且有效。谢谢！