DevTools 无法加载 SourceMap：无法加载 chrome-extension 的内容

Question

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

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

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

---

这是 HTML 代码：

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

控制台输出：

这是警告：

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

Answer 1

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

转到开发人员工具（浏览器中的 F12），然后选择右上角的三个点，然后转到Settings。

然后，查找Sources，并禁用选项：“启用 javascript 源映射”“启用 CSS 源映射”

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

Answer 2

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

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

Answer 3

在Edge控制台中发现大量源映射错误后，我偶然发现了这个 Stack\xc2\xa0Overflow 问题 browser. (I think I had disabled the warnings in the Chrome browser long ago.)

\n

对我来说，这意味着首先要了解源映射是什么；请参考Macro Mazzon的回答 to understand this. Since it\'s a good idea, it was just a case of finding out how to turn them on.

\n

就像在webpack.config.js中添加这一行一样简单 file -

\n

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

\n

现在 Edge 可以检测到源映射，错误就消失了。

\n

Answer 4

对我来说，问题不是由开发中的应用程序本身引起的，而是由 Chrome 扩展程序引起的：React Developer Tool。我通过右键单击工具栏中的扩展程序图标，单击“管理扩展程序”（我在这里自由翻译菜单文本，因为我的浏览器语言是巴西葡萄牙语），然后启用“允许访问文件 URL”，部分解决了这个问题。但这项措施只修复了一些警报。

我在 react repo 中发现了一些问题，表明原因是其扩展中的错误，并计划尽快纠正 - 请参阅问题20091和20075。

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

Answer 5

include.prepload.js 文件会有如下一行。可能作为最后一行。

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

删除它，错误就会消失。

Answer 6

Chrome 在 2022 年更改了 UI，因此这是最高票数回复的新版本。

1. 打开开发工具（点击F12或Option++ ）CommandJ
2. 选择顶部的齿轮。该区域有两个齿轮，因此请务必选择顶部的齿轮。
3. 找到来源部分
4. 取消选择“启用 JavaScript 源映射”

检查一下是否有效！

Answer 7

修复由 Chrome 扩展程序导致的开发工具控制台中的“SourceMap”错误消息：

由 McAffe 扩展引起的示例：

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 开发人员工具中查看您的源代码。取消选中这些会剥夺您调试源代码的能力。这就像关闭火警警报而不是扑灭火灾。你不想这样做。

相反，您想找到导致消息的扩展并将其关闭。 这是你如何做到的：

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

在确定导致问题的扩展程序之后：

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

Answer 8

对 chrome 没有足够权限的扩展可能会导致这些警告，例如对于 React 开发人员工具，请检查以下过程是否解决了您的问题：

1. 右键单击扩展图标。

或者

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

然后选择“这个可以读写站点数据”。您应该在列表中看到 3 个选项，根据您对扩展程序的信任程度以及满足扩展程序的需求，选择一个足够严格的选项。

Answer 9

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

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

2. 将其放入空白文件中

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

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

（我怀疑您可以亲自将这个死文件方法添加到插件中。）

Answer 10

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

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

1. 第一个解决方案：显然，Heelis 先生是最接近的一个：您应该添加 .map 文件，并且有一些工具可以帮助您解决这个问题（例如Grunt、Gulp和Google 关闭，引用答案）。否则，你可以从官方网站，如.map文件引导，jQuery的，字体真棒，预紧力等..（也许在安装之类的东西波普尔或刷卡由故宫在随机文件夹命令和复制只是在.MAP文件您的 js/css 目标文件夹）

2. 第二种解决方案（我使用的）：使用 CDN 添加源文件（这里是使用 CDN 的所有优点）。使用内容交付网络 (CDN)，您只需添加 CDN 链接，而不是文件夹的路径。您可以在官方网站（Bootstrap、jquery、popper等）上找到 cdn，也可以在一些网站（如cloudflare、cdnjs等）上轻松搜索。

Answer 11

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