堆棧內存溢出
  簡體   English   中英

錯誤消息“DevTools 無法加載 SourceMap：無法加載 chrome-extension://... 的內容”

[英]Error message "DevTools failed to load SourceMap: Could not load content for chrome-extension://..."

 原文  2020-04-21 09:16:35  4   20    javascript/ html

問題描述

我正在嘗試顯示從本地計算機選擇的圖像，我需要 JavaScript function 的圖像位置。但我無法獲取位置。

為了獲取圖像位置，我嘗試使用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>

控制台 Output：

在此處輸入圖像描述

這是警告：

DevTools 無法加載 SourceMap：無法加載 chrome-extension://alplpnakfeabeiebipdmaenpmbgknjce/include.preload.js.map 的內容：HTTP 錯誤：狀態代碼 404,.net::ERR_UNKNOWN_URL_SCHEME

20 個解決方案

解決方案1
 171  2020-04-26 15:02:54

那是因為 Chrome 添加了對源映射的支持。

Go 到開發者工具（瀏覽器F12），然后select 右上角三個點，go 到設置。

然后，查找Sources並禁用選項：“啟用 javascript 源映射”“啟用 CSS 源映射”

如果你這樣做，那將擺脫警告。 它與您的代碼無關。 檢查其他頁面中的開發人員工具，您將看到相同的警告。

解決方案2
 54  2021-03-02 14:06:25

Go 到開發者工具 -> 設置 -> 控制台 -> 勾選“僅選定上下文”。 警告將被隱藏。 您可以通過取消選中同一個框再次看到它們。

“僅選定的上下文”表示僅頂部、iframe、工作者和擴展上下文。 在絕大多數情況下，這就是您所需要的。

解決方案3
 24  2020-11-05 22:47:12

對我來說，問題不是由開發中的應用程序本身引起的，而是由 Chrome 擴展：React Developer Tool 引起的。 我通過右鍵單擊工具欄中的擴展圖標，單擊“管理擴展”（我在這里自由翻譯菜單文本，因為我的瀏覽器語言是巴西葡萄牙語），然后啟用“允許訪問文件 URL”，部分解決了這個問題。 但這項措施只修復了部分警報。

我在 react repo 中發現了一些問題，表明原因是它們的擴展存在錯誤，並且計划很快得到糾正 - 請參閱問題20091和20075 。

您可以通過在未啟用任何擴展程序的匿名選項卡中訪問您的應用程序來確認與擴展程序相關。

解決方案4
 21  2020-08-25 12:32:41

include.prepload.js 文件將有如下一行。 可能是最后一行。

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

刪除它，錯誤將 go 消失。

解決方案5
 16  2021-03-10 17:21:21

修復由 Chrome 擴展引起的開發工具控制台中的“SourceMap”錯誤消息：

由 McAffe 擴展引起的示例：

DevTools 無法加載 SourceMap：無法加載 chrome-extension://klekeajafkkpokaofllcadenjdckhinm/sourceMap/content.map 的內容：HTTP 錯誤：狀態代碼 404，net::ERR_UNKNOWN_URL_S

DevTools 無法加載 SourceMap：無法加載 chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map 的內容：HTTP 錯誤：狀態碼 404，net::MERR_CHUNKNOW

DevTools 無法加載 SourceMap：無法加載 chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map 的內容：HTTP 錯誤：狀態碼 404_SMEER：

如果您正在開發，那么您需要選中“啟用 javascript 源映射”和“啟用 CSS 源映射”才能在 Chrome 開發人員工具中查看您的源代碼。 取消選中這些會剝奪您調試源代碼的能力。 這就像關掉火警而不是撲滅火災。 你不想那樣做。

相反，您想找到導致消息的擴展並將其關閉。 這是你如何做到的：

  1. Go 到 Chrome 右上角的三個點。
  2. Go 到“更多工具”並單擊“擴展”。
  3. 一次為一個擴展執行此操作，直到控制台中不再出現“SourceMap”錯誤：
    1. 通過向左滑動開關來關閉擴展。
    2. 重新加載您正在使用開發工具的頁面。
    3. 檢查是否有任何“SourceMap”錯誤消息消失。
      1. 如果有的話，那么該擴展導致了這些消息。
      2. 否則，可以重新打開該擴展程序。

在確定哪些擴展導致問題之后：

  1. 如果您需要它，請聯系制造商讓他們解決問題。
  2. 否則，刪除擴展名。

解決方案6
 8  2020-10-30 03:29:41

在 chrome 上沒有足夠權限的擴展可能會導致這些警告，例如對於 React 開發人員工具，請檢查以下過程是否解決了您的問題：

  1. 右鍵單擊擴展圖標。

或者

  1. Go 到擴展。
  2. 單擊 React 開發者工具行中的三點。

然后選擇“這個可以讀寫站點數據”。 您應該在列表中看到 3 個選項，根據您對擴展程序的信任程度以及滿足擴展程序的需求，選擇一個足夠嚴格的選項。

解決方案7
 5  2021-01-13 18:08:18

對：它與您的代碼無關。 我找到了兩個有效的解決方案來解決這個警告（不僅僅是禁用它）。 為了更好地理解 SourceMap 是什么，我建議您查看這個答案，它解釋了它是如何幫助您調試的：

.map 文件適用於已縮小的 js 和 css（現在也是 ts）文件。 它們被稱為 SourceMaps。 當你縮小一個文件時，比如 angular.js 文件，它需要數千行漂亮的代碼，然后將它變成只有幾行丑陋的代碼。 希望當您將代碼交付到生產環境時，您使用的是縮小后的代碼，而不是完整的、未縮小的版本。 當您的應用程序在生產中並出現錯誤時，源映射將幫助您獲取丑陋的文件，並允許您查看代碼的原始版本。 如果您沒有源映射，那么任何錯誤充其量都看起來很神秘。

  1. 第一個解決方案：顯然，Heelis先生是最接近的一個：您應該添加 .map 文件，並且有一些工具可以幫助您解決這個問題（例如Grunt 、 Gulp和Google 關閉，引用答案）。 Otherwise you can download the.map file from official sites like Bootstrap , jquery , font-awesome , preload and so on.. (maybe installing things like popper or swiper by the npm command in a random folder and copying just the.map file in你的 js/css 目標文件夾）

  2. 第二種解決方案（我使用的那個）：使用 CDN 添加源文件（這里有使用 CDN 的所有優點）。 使用內容交付網絡 (CDN)，您可以簡單地添加 CDN 鏈接，而不是文件夾的路徑。 您可以在官網（Bootstrap 、 jquery 、 popper等）上找到cdn，也可以在cloudflare 、 cdnjs等一些網站上輕松搜索。

解決方案8
 3  2020-10-27 12:02:48

我不認為你收到的警告是相關的。 我有同樣的警告，原來是 chrome 擴展 React Dev Tools。 刪除了擴展程序，錯誤消失了。

解決方案9
 3  2021-05-16 16:21:44

在Edge瀏覽器的控制台中發現大量源 map 錯誤后，我偶然發現了這個 SO 問題。 （我想我很久以前就禁用了 Chrome 瀏覽器中的警告）。

對我來說，這意味着首先要了解源 map 是什么； 請參閱 Macro Mazzon 的回答以了解這一點。 因為這是一個好主意，所以它只是找出如何打開它們的一個例子。

就像在 webpack.config.js 中添加這一行一樣簡單 -

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

現在 Edge 可以檢測到源 map，錯誤消失了。

如果這個答案侮辱了任何人的智商，我們深表歉意，但可能有些人閱讀這將像我一樣對源地圖一無所知。

解決方案10
 2  2020-08-19 14:58:48

我很欣賞這是您的擴展的一部分，但是這些天我在各種地方都看到了這條消息，我討厭它：我如何修復它（編輯：這個修復似乎也大大加快了瀏覽器的速度）是通過添加一個死文件

  1. 物理創建它想要的文件\它想要的地方，作為一個空白文件（例如：“ popper.min.js.map ”）

  2. 把它放在空白文件中

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

  3. 確保空白文件內容中的"file": "*******"與您的文件名******.map （減去“.map”一詞）

（編輯：我懷疑你可以自己將這個死文件方法添加到插件中）

解決方案11
 1  2020-10-20 19:58:13

我正在嘗試顯示從本地計算機中選擇的圖像，並且我需要該圖像的位置以用於 javascript function。 最近開始學習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>

控制台 Output： 在此處輸入圖像描述

這是警告：

DevTools 未能加載 SourceMap：無法加載 chrome-extension://alplpnakfeabeiebipdmaenpmbgknjce/include.preload.js.map 的內容：HTTP 錯誤：狀態碼 404，net::ERR_CHEN_URL_SUN_

解決方案12
 1  2021-07-19 19:15:16

除了在同一個文件夾中的其他.js庫之外，還可以添加丟失的文件（無需在.html文件中引用.map，標記）。 嘗試在 Backbone 中編碼時，我遇到了同樣的錯誤。

有問題的文件是backbone-min.js，產生錯誤的行是sourceMappingURL=backbone-min.map

下載丟失的文件（鏈接來自這里）后，錯誤消失了。

解決方案13
 1  2022-12-04 20:14:47

我有同樣的問題。 我試着一個一個地禁用擴展來檢查它，最后意識到我啟用了Adblock ，這導致了這個問題。 為了消除該錯誤，我按照以下步驟操作，

  1. Three dots （右上角）。
  2. 單擊More tools --> extensions 。
  3. 禁用Adblock 。
  4. Reload頁面。

它現在應該可以工作了。

解決方案14
 0  2020-12-21 00:17:33

您需要在開發人員模式下打開 chrome：select more tools then extensions 和 select developer mode

解決方案15
 0  2022-01-17 12:36:33

您只是缺少文件。

Go 到這個網站https://www.cdnpkg.com/下載您需要的內容並將其復制到正確的文件夾中。

解決方案16
 0  2022-01-29 21:30:45

對我來說，這些警告是由 Selenium 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 已經設置為能夠讀取所有站點的站點數據，因此我將其卸載。 （我在這里閱讀了另一條評論，您可能會嘗試為擴展啟用更多權限而不是刪除它。）在我的情況下，刪除 Selenium IDE（Chrome 擴展）擺脫了警告。

解決方案17
 0  2022-08-09 21:53:09

2022年更新； Chrome 已更改 UI，因此這是最受好評的回復的新版本。

1）打開開發工具（按 f12 或 option+command+j） 2）Select 頂部的齒輪。 該區域有 2 個齒輪，因此請確保 select 頂部的那個。 3) 找到 Sources 部分 4) 取消選擇“啟用 JavaScript source maps” 5) 檢查它是否有效！

快樂編碼

解決方案18
 0  2022-09-16 21:29:38

希望這能澄清問題......

此錯誤來自 web 瀏覽器中的擴展程序，該擴展程序報告它已生成腳本錯誤。 它已經在瀏覽器開發工具控制台window中記錄了這一點。 該錯誤可能來自擴展名（不是您的代碼），說它有一些代碼包含指向它無法訪問、被阻止或丟失的源映射文件的地址。 如果需要使用 devtools 的開發人員為在瀏覽器中運行的代碼重新創建源文件以進行調試，則它只需要此源映射文件。

順便說一句， sourcemap是將代碼從一種語言翻譯或轉譯為另一種語言的文件，當 web 瀏覽器需要創建代碼時，它有時需要它才能從另一個源文件運行。 通常，這是瀏覽器用來將此源代碼轉換為 JavaScript/ECMAScript 的文件。 但在大多數情況下，第三方軟件程序已經為瀏覽器完成了這項工作。 例如，TypeScript 被轉換為瀏覽器腳本引擎必須具有的 JavaScript。 當這個中間文件在 web 瀏覽器中由於安全原因丟失或被阻止時，應用程序通常不會關心，除非它需要源文件來使用這個源文件調試子腳本。 在這種情況下，當它覺得它需要這個文件並且找不到它時，它會抱怨，因為它在調試腳本時使用它來為在瀏覽器中運行的代碼重新創建源文件。 此源映射文件的 URI/URL 通常位於sourcemap或應用程序編譯的代碼文件的頂部，格式為//#... 。

當這個轉譯文件被阻止或丟失時，它通常是可以的。 僅當瀏覽器或腳本引擎嘗試重新創建創建在瀏覽器的 memory 或緩存中運行的腳本文件的父代碼文件並且它需要重新創建源文件以允許開發人員調試原始源代碼。 當它找不到它時，這意味着任何試圖調試它的開發人員都無法這樣做，並且只能使用已編譯的代碼。 因此，以本文中提到的各種方式關閉這些錯誤是安全的。 如果它連接到擴展，它不應該影響您自己的腳本。

解決方案19
 0  2022-12-05 11:45:14

在我的例子中，是JSON Viewer擴展阻止加載源 map 文件

解決方案20
 0  2022-12-06 13:55:25

在我的例子中，我犯了一個愚蠢的錯誤，添加了 bootstrap.min.js 而不是 bootstrap.bundel.js :)

解決方案21
 0  2023-01-17 18:31:36

DevTools 無法加載源代碼 map：無法加載 chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/browser-polyfill.js.map 的內容：系統錯誤：.net::ERR_FILE_NOT_FOUND

禁用 Chrome 擴展程序“Adblock Plus - 免費廣告攔截器”。 https://chrome.google.com/webstore/detail/adblock-plus-free-ad-bloc/cfhdojbkjhnklbpkdaibdccddilifddb

最近這個錯誤是由擴展引起的。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 DevTools 解析 SourceMap 失敗：chrome-extension 突然無法調試 Typescript：DevTools 無法加載 SourceMap：無法為...加載內容。未知錯誤 DevTools 無法加載 SourceMap：無法解析文件內容 我們面臨錯誤 DevTools failed to load SourceMap DevTools 無法加載 javascript 中的 SourceMap 錯誤 DevTools 無法加載 SourceMap：無法加載 http://localhost:8080/ASGB/assets/js/bootstrap.min.js.map 的內容： DevTools 無法加載源 map：無法加載 GitHub 的內容。 HTTP 錯誤：狀態碼 404 Jquery function 收到“錯誤：DevTools 無法加載 SourceMap”導致無限刷新 Chrome擴展程序：僅應要求加載Background_JS 使用chrome-extension從文件系統加載html文件
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM