错误提示“DevTools failed to load SourceMap: Could not load content for chrome-extension://…”

我试图显示从本地机器选择的图像，我需要该图像的位置用于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>

控制台输出:

Enter image description here

以下是警告:

DevTools failed to load SourceMap: Could not load content for chrome扩展:/ / alplpnakfeabeiebipdmaenpmbgknjce / include.preload.js.map: HTTP错误:状态代码404,net::ERR_UNKNOWN_URL_SCHEME

743649 次浏览
小开
最佳答案

这是因为Chrome增加了对源地图的支持。

转到开发人员工具(浏览器中的F12)，然后选择右上角的三个点，然后转到设置。

然后，寻找来源，并禁用选项:

  • 启用JavaScript源地图;
  • “启用CSS源地图”;

如果你这么做，警告就会消失。这与你的代码无关。检查其他页面中的开发人员工具，您将看到相同的警告。

小开

我很欣赏这是你扩展的一部分，但我看到这条消息在各种各样的地方这些天，我讨厌它:我如何修复它(这个修复似乎大大加快了浏览器)是通过添加一个< >强死文件< / >强

  1. 物理上创建它想要的文件/在它想要的地方，作为一个空白文件(例如，"popper.min.js.map")

  2. 把这个放在空白文件中

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

  3. 确保空白文件内容中的"file": "*******" 匹配文件的名称******.map(减去单词".map")

(我怀疑你可以自己在插件中添加这个dead file方法。)

小开

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

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

删除它，错误就会消失。

小开

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

小开

在Chrome上没有足够权限的扩展可能会导致这些警告，例如React开发工具。看看下面的步骤是否能解决你的问题:

  1. 右键单击扩展图标。

或

  1. 做延伸。
  2. 单击React开发人员工具行中的三个点。

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

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

小开

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

我在React存储库中发现了问题，这表明原因是他们扩展中的一个错误，并计划很快得到纠正-见问题20091和20075。

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

小开

你需要在开发者模式下打开Chrome:选择更多的工具，然后选择扩展，然后选择开发人员模式

小开

正确:这与你的代码无关。对于这个警告，我找到了两个有效的解决方案(不仅仅是禁用它)。为了更好地理解源图是什么，我建议你查看这个答案，其中解释了它是如何帮助你调试的:

.map文件是用于JavaScript和CSS(现在还有TypeScript)文件的，这些文件已经被缩小了。它们被称为源cemap。当你缩小一个文件时，比如angular.js文件，它会把数千行漂亮的代码变成几行丑陋的代码。希望在将代码交付到生产环境时，您使用的是简化的代码，而不是完整的、未简化的版本。当你的应用处于生产环境中，出现错误时，sourcemap将帮助处理你的丑陋文件，并允许你查看代码的原始版本。如果您没有源地图，那么任何错误充其量都是模糊的。

  1. 第一个解决方案:显然，Heelis先生是最接近的:你应该添加.map文件，有一些工具帮助你解决这个问题(例如，咕哝着说， 狼吞虎咽地吃和谷歌关闭，引用答案)。否则，你可以从官方网站如引导， jQuery， font-awesome， 预加载等下载。map文件…(可能会在一个随机文件夹中通过Heelis先生2命令安装Heelis先生0或Heelis先生1之类的东西，并复制JavaScript/CSS目标文件夹中的.map文件)

  2. 第二个解决方案(我使用的那个):使用CDN(内容交付网络)添加源文件。(在这里是使用CDN的所有优点)。使用内容分发网络(CDN)，您可以简单地添加CDN链接，而不是路径到您的文件夹。你可以在官方网站(引导， jquery， 波普尔等)上找到cnd，或者你可以在一些网站上轻松搜索，如Cloudflare， cdnjs等。

小开

进入开发人员工具→设置→控制台→勾选“;仅限所选上下文”;。警告将被隐藏。你可以通过取消同一个方框的勾选来再次看到它们。

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

小开

解决“SourceMap"Chrome扩展导致的开发工具控制台中出现错误消息:

由McAfee扩展引起的例子:

DevTools failed to load SourceMap: Could not load content for chrome-extension:// klekeajafkkpokaufllcadenjdckhinm / SourceMap /content。map: HTTP错误:状态代码404,net::ERR_UNKNOWN_URL_SCHEME

DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/ SourceMap /chrome/content。map: HTTP错误:状态代码404,net::ERR_UNKNOWN_URL_SCHEME

DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/ SourceMap /chrome/iframe_handler。map: HTTP错误:状态代码404,net::ERR_UNKNOWN_URL_SCHEME

如果你在开发，那么你需要&;和“启用CSS源地图”;在Chrome开发者工具中查看你的源代码。取消选中这些选项会使您无法调试源代码。这就像关掉火警，而不是把火扑灭。你不会想这么做的。

下面是你如何做到这一点:

  1. 转到Chrome右上角的三个点。
  2. 转到“更多工具”;然后点击“扩展”。
  3. 每次执行一个扩展，直到没有更多的“sourcemap”;错误在控制台中:
    1. 向左滑动开关，关闭分机。
    2. 重新加载正在使用开发工具的页面。
    3. 检查是否有任何“source cemap "错误消息消失。
      1. 如果有的话，就是这个扩展引起了这些消息。
      2. 否则，该扩展可以重新打开。

在确定哪些扩展导致了问题之后:

  1. 如果你需要它，然后联系制造商让他们解决这个问题。
  2. 否则，删除扩展名。
小开

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

对我来说，这意味着第一次意识到源图是什么;请参考Macro Mazzon给出了答案来理解这一点。既然这是个好主意，那么问题就在于如何打开它们。

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

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

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

如果这个回答侮辱了任何人的智力，我很抱歉，但也许读到这篇文章的人会像我一样对源地图一无所知。

小开

除了在同一文件夹中添加其他.js库外，还可以添加丢失的文件(不需要在.html文件中引用.map， <script>标签)。

我有同样的错误，当试图在Backbone.js编码。

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

下载丢失的文件后(链接来自在这里)，错误消失。

小开

你只是丢失了文件。

进入网站https://www.cdnpkg.com/。 下载你需要的文件并复制到正确的文件夹中

小开

对我来说，这些警告是由硒 IDE Chrome扩展引起的。这些警告出现在控制台中每次页面加载:

DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/atoms.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/polyfills.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/escape.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/playback.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/record.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

由于Selenium IDE已经设置为能够读取所有站点上的站点数据，所以我卸载了它。(我在这里读到另一个评论，你可以尝试为一个扩展启用更多权限，而不是删除它。)在我的情况下，删除硒IDE (Chrome扩展)摆脱了警告。

小开

Chrome在2022年改变了用户界面，所以这是被点赞最多的新版本回复。

  1. 打开开发工具(点击F12或选项 + 命令 + J)
  2. 选择顶部的齿轮。那个区域有两个齿轮，所以一定要选择最上面的那个。
  3. 找到来源部分
  4. 取消选择“启用JavaScript源地图”;

检查它是否工作!

小开

Web浏览器中的调试和源地图问题

希望这澄清了问题背后的技术…了解事物的运作方式会有所帮助:)

这个< >强浏览器错误< / >强意味着它在sourcemap中间文件中有你的JavaScript的某个编译版本，或者是由第三方创建的，当< >强调试< / >强同样的脚本在"devtools"在你的浏览器中。

如果您的脚本失败(或者在您的情况下，试图获取隐藏在创建脚本的源地图代码中的图像源)，但其脚本错误与一些从原始源地图文件创建的JavaScript绑定，现在无法找到用于调试相同错误的JavaScript。这是一个关于错误的错误，一个缺失的调试文件创建了一个新的错误。(疯狂的吧?)

此错误可能来自web浏览器中的扩展，并报告它生成了一个脚本错误，它已记录在devtools的console.log窗口中(在浏览器中按F12)。错误很可能来自扩展(不是你的代码)，说它有一些代码包含它不能访问的源地图文件的地址，有一个坏的URI/URL地址，被阻塞，或丢失。

如果使用devtools的开发人员需要再次调试原始脚本，浏览器只需要这个sourcemap文件。

顺便说一下，sourcemap是一个将transpiles代码从一种语言翻译到另一种语言的文件。通常这是浏览器用来将源代码转换为子脚本(如JavaScript/ECMAScript)的文件，或者当它需要做相反的事情并从子脚本重新创建源文件时使用。在大多数情况下，这个文件根本不需要，因为第三方软件程序已经将源代码编译或转译为浏览器的子脚本。例如，喜欢TypeScript的开发人员使用它来创建JavaScript。此源代码被转译为JavaScript，以便浏览器脚本引擎可以运行它。这个sourcemap文件的URI/URL通常位于javaScript或应用程序编译代码文件的顶部，格式类似//#...。

当web浏览器中由于安全原因缺少或阻塞中介transpile文件时，应用程序通常不会在意，除非它需要源文件来调试使用此源文件的子脚本。在这种情况下，当它觉得需要这个文件但找不到它时，它会报错，因为它在调试脚本时使用它为浏览器中运行的代码重新创建源文件，以允许开发人员调试原始源代码。当它找不到它时，这意味着任何试图调试它的开发人员都不能这样做，并且只能使用已编译的代码。因此，用本文中提到的各种方法关闭这些错误是安全的。如果它连接到扩展，它不应该影响您自己的脚本。即使它与您自己的脚本相关，您也不太可能需要它，除非您计划从devtools中运行调试。

小开

我也有同样的问题。我尝试禁用扩展一个一个地检查它，最后意识到我启用了Adblock，这导致了这个问题。为了消除这个错误，我执行下面的步骤，

  1. Three dots(右上角)。
  2. 点击More tools——>extensions。
  3. 禁用Adblock。
  4. Reload页面。

现在应该可以了。

小开

在我的情况下，它是JSON Viewer扩展阻止源映射文件被加载

小开

在我的情况下，我犯了一个愚蠢的错误，添加bootstrap.min.js而不是bootstrap. bundle .js:)


提交答案