错误消息“DevTools 无法加载 SourceMap
我正在尝试显示从本地计算机中选择的图像，并且我需要该图像的位置以用于 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
梦里花落09219回答
-
Qyouu
这是因为 Chrome 添加了对源映射的支持。转到开发人员工具（在浏览器中按 F12），然后选择右上角的三个点，然后转到“设置”。然后，查找Sources并禁用选项：“启用 JavaScript 源映射”“启用 CSS 源映射”如果你这样做，就会消除警告。它与你的代码无关。检查其他页面的开发者工具，你会看到同样的警告。 -
元芳怎么了
转到开发人员工具→设置→控制台→勾选“仅选定的上下文”。警告将被隐藏。您可以通过取消选中同一个框来再次看到它们。“仅选定上下文”意味着仅顶部、iframe、worker 和扩展上下文。大多数时候，这就是您所需要的。 -
Cats萌萌
修复开发工具控制台中由 Chrome 扩展引起的“SourceMap”错误消息：由 McAfee 扩展引起的示例：DevTools 无法加载 SourceMap：无法加载 chrome-extension://klekeajafkkpokaofllcadenjdckhinm/sourceMap/content.map 的内容：HTTP 错误：状态代码 404，net::ERR_UNKNOWN_URL_SCHEMEDevTools 无法加载 SourceMap：无法加载 chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map 的内容：HTTP 错误：状态代码 404，net::ERR_UNKNOWN_URL_SCHEMEDevTools 无法加载 SourceMap：无法加载 chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map 的内容：HTTP 错误：状态代码 404，net::ERR_UNKNOWN_URL_SCHEME如果您正在开发，则需要选中“启用 JavaScript 源映射”和“启用 CSS 源映射”才能在 Chrome 开发者工具中查看源代码。取消选中这些会剥夺您调试源代码的能力。这就像关掉火警警报器而不是去灭火一样。你不想那样做。相反，您想要找到导致消息的扩展程序并将其关闭。 这样做的方法如下：转到 Chrome 右上角的三个点。转到“更多工具”并单击“扩展”。一次对一个扩展执行此操作，直到控制台中不再出现“SourceMap”错误：如果有的话，那么就是该扩展导致了这些消息。否则，可以重新打开该扩展。将开关滑至左侧即可关闭扩展。重新加载您正在使用开发工具的页面。检查任何“SourceMap”错误消息是否消失。确定哪些扩展导致了问题后：如果您需要，请联系制造商让他们解决问题。否则，请删除扩展。 -
SMILET
就像在webpack.config.js文件中添加这一行一样简单 -module.exports = { devtool: "source-map", }现在 Edge 可以检测到源映射，错误就消失了。 -
UYOU
include.prepload.js文件将包含如下一行，可能是最后一行：//# sourceMappingURL=include.prepload.js.map删除它，错误就会消失。 -
慕无忌1623718
对我来说，问题不是由开发中的应用程序本身引起的，而是由 Chrome 扩展React Developer Tool引起的。我通过右键单击工具栏中的扩展程序图标，单击“管理扩展程序”，然后启用“允许访问文件 URL”部分解决了这个问题。但这项措施仅修复了部分警报。我在 React 存储库中发现了一些问题，表明原因是其扩展中的错误，并且计划很快得到纠正。您可以通过在不启用任何扩展的情况下在匿名选项卡中访问您的应用程序来确认与扩展相关。 -
开心每一天1111
Chrome 在 2022 年更改了 UI，因此这是最高票数回复的新版本。打开开发工具（点击F12或Option++ ）CommandJ选择顶部的齿轮。该区域有两个齿轮，因此请务必选择顶部的齿轮。找到来源部分取消选择“启用 JavaScript 源映射”检查一下是否有效！ -
肥皂起泡泡
正确：它与您的代码无关。我找到了针对此警告的两个有效解决方案（不仅仅是禁用它）。.map 文件适用于已缩小的 JavaScript 和 CSS（现在也包括 TypeScript）文件。它们被称为 SourceMap。当您缩小文件（例如 angular.js 文件）时，它需要数千行漂亮的代码，然后将其变成只有几行丑陋的代码。希望当您将代码交付到生产环境时，您使用的是缩小的代码，而不是完整的、未缩小的版本。当您的应用程序在生产中并出现错误时，源映射将帮助您获取丑陋的文件，并允许您查看代码的原始版本。如果您没有源映射，那么任何错误充其量都显得很神秘。第一个解决方案：您应该添加 .map 文件，并且有一些工具可以帮助您解决这个问题（例如Grunt、Gulp和Google 闭包，引用答案）。否则，您可以从Bootstrap、jQuery、font-awesome、preload等官方网站下载 .map 文件...（也许通过npm命令在随机文件夹中安装popper或swiper之类的东西，然后仅复制 .map 文件在您的 JavaScript/CSS 目标文件夹中）第二种解决方案（我使用的）：使用CDN（内容分发网络）添加源文件。（以下是使用 CDN 的所有优点）。使用内容交付网络 (CDN)，您可以简单地添加 CDN 链接，而不是文件夹的路径。您可以在官方网站（Bootstrap、jquery、popper等）上找到 CND，也可以在Cloudflare、cdnjs等网站上轻松搜索。 -
MM们
Chrome 上没有足够权限的扩展可能会导致这些警告，例如 React 开发人员工具。检查以下过程是否可以解决您的问题：右键单击扩展程序图标。或者转到扩展。单击 React 开发者工具行中的三点。然后选择“这可以读取和写入站点数据”。您应该在列表中看到三个选项。根据您对扩展程序的信任程度选择一个足够严格且满足扩展程序需求的选项。
随时随地看视频慕课网APP
相关分类
Html5