错误消息“DevTools 无法加载 SourceMap：无法加载 chrome-extension://...”

javascript html

2022-08-30 00:55:54

我正在尝试显示从本地计算机中选择的图像，并且我需要该图像的位置才能使用JavaScript函数。但我无法获得位置。

为了获取图像位置，我尝试使用控制台.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

答案 1

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

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

然后，查找“源”，并禁用以下选项：

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

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

答案 2

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

“仅选定上下文”仅表示顶部、iframe、工作线程和扩展上下文。这是你所需要的，绝大多数时候。