我正在嘗試顯示從本地計算機中選擇的圖像，并且我需要該圖像的位置以用于 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
9 回答
Qyouu
TA貢獻1786條經驗 獲得超11個贊
這是因為 Chrome 添加了對源映射的支持。
轉到開發人員工具（在瀏覽器中按 F12），然后選擇右上角的三個點，然后轉到“設置”。
然后，查找Sources并禁用選項：
“啟用 JavaScript 源映射”
“啟用 CSS 源映射”
如果你這樣做，就會消除警告。它與你的代碼無關。檢查其他頁面的開發者工具，你會看到同樣的警告。
元芳怎么了
TA貢獻1798條經驗 獲得超7個贊
轉到開發人員工具→設置→控制臺→勾選“僅選定的上下文”。警告將被隱藏。您可以通過取消選中同一個框來再次看到它們。
“僅選定上下文”意味著僅頂部、iframe、worker 和擴展上下文。大多數時候，這就是您所需要的。
Cats萌萌
TA貢獻1805條經驗 獲得超9個贊
修復開發工具控制臺中由 Chrome 擴展引起的“SourceMap”錯誤消息：
由 McAfee 擴展引起的示例：
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 開發者工具中查看源代碼。取消選中這些會剝奪您調試源代碼的能力。這就像關掉火警警報器而不是去滅火一樣。你不想那樣做。
相反，您想要找到導致消息的擴展程序并將其關閉。 這樣做的方法如下：
轉到 Chrome 右上角的三個點。
轉到“更多工具”并單擊“擴展”。
一次對一個擴展執行此操作，直到控制臺中不再出現“SourceMap”錯誤：
如果有的話，那么就是該擴展導致了這些消息。
否則，可以重新打開該擴展。
將開關滑至左側即可關閉擴展。
重新加載您正在使用開發工具的頁面。
檢查任何“SourceMap”錯誤消息是否消失。
確定哪些擴展導致了問題后：
如果您需要，請聯系制造商讓他們解決問題。
否則，請刪除擴展。
SMILET
TA貢獻1796條經驗 獲得超4個贊
就像在webpack.config.js文件中添加這一行一樣簡單 -
module.exports?=?{
????devtool:?"source-map",
}現在 Edge 可以檢測到源映射，錯誤就消失了。
UYOU
TA貢獻1878條經驗 獲得超4個贊
include.prepload.js文件將包含如下一行，可能是最后一行：
//# sourceMappingURL=include.prepload.js.map
刪除它，錯誤就會消失。
慕無忌1623718
TA貢獻1744條經驗 獲得超4個贊
對我來說，問題不是由開發中的應用程序本身引起的，而是由 Chrome 擴展React Developer Tool引起的。我通過右鍵單擊工具欄中的擴展程序圖標，單擊“管理擴展程序”，然后啟用“允許訪問文件 URL”部分解決了這個問題。但這項措施僅修復了部分警報。
我在 React 存儲庫中發現了一些問題，表明原因是其擴展中的錯誤，并且計劃很快得到糾正。
您可以通過在不啟用任何擴展的情況下在匿名選項卡中訪問您的應用程序來確認與擴展相關。
開心每一天1111
TA貢獻1836條經驗 獲得超13個贊
Chrome 在 2022 年更改了 UI，因此這是最高票數回復的新版本。
打開開發工具（點擊F12或Option++ ）CommandJ
選擇頂部的齒輪。該區域有兩個齒輪，因此請務必選擇頂部的齒輪。
找到來源部分
取消選擇“啟用 JavaScript 源映射”
檢查一下是否有效！
肥皂起泡泡
TA貢獻1829條經驗 獲得超6個贊
正確：它與您的代碼無關。我找到了針對此警告的兩個有效解決方案（不僅僅是禁用它）。
.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們
TA貢獻1886條經驗 獲得超2個贊
Chrome 上沒有足夠權限的擴展可能會導致這些警告，例如 React 開發人員工具。檢查以下過程是否可以解決您的問題：
右鍵單擊擴展程序圖標。
或者
轉到擴展。
單擊 React 開發者工具行中的三點。
然后選擇“這可以讀取和寫入站點數據”。
您應該在列表中看到三個選項。根據您對擴展程序的信任程度選擇一個足夠嚴格且滿足擴展程序需求的選項。
- 9 回答
- 0 關注
- 613 瀏覽
添加回答
舉報
0/150
提交
取消