我正在嘗試顯示從本地計算機中選擇的圖像，并且我需要該圖像的位置以用于 JavaScript 函數(shù)。但我無法獲取位置。為了獲取圖像位置，我嘗試使用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 的內(nèi)容：HTTP 錯誤：狀態(tài)代碼 404，net::ERR_UNKNOWN_URL_SCHEME
9 回答
Qyouu
TA貢獻1786條經(jīng)驗 獲得超11個贊
這是因為 Chrome 添加了對源映射的支持。
轉(zhuǎn)到開發(fā)人員工具（在瀏覽器中按 F12），然后選擇右上角的三個點，然后轉(zhuǎn)到“設(shè)置”。
然后，查找Sources并禁用選項：
“啟用 JavaScript 源映射”
“啟用 CSS 源映射”
如果你這樣做，就會消除警告。它與你的代碼無關(guān)。檢查其他頁面的開發(fā)者工具，你會看到同樣的警告。
元芳怎么了
TA貢獻1798條經(jīng)驗 獲得超7個贊
轉(zhuǎn)到開發(fā)人員工具→設(shè)置→控制臺→勾選“僅選定的上下文”。警告將被隱藏。您可以通過取消選中同一個框來再次看到它們。
“僅選定上下文”意味著僅頂部、iframe、worker 和擴展上下文。大多數(shù)時候，這就是您所需要的。
Cats萌萌
TA貢獻1805條經(jīng)驗 獲得超9個贊
修復(fù)開發(fā)工具控制臺中由 Chrome 擴展引起的“SourceMap”錯誤消息：
由 McAfee 擴展引起的示例：
DevTools 無法加載 SourceMap：無法加載 chrome-extension://klekeajafkkpokaofllcadenjdckhinm/sourceMap/content.map 的內(nèi)容：HTTP 錯誤：狀態(tài)代碼 404，net::ERR_UNKNOWN_URL_SCHEME
DevTools 無法加載 SourceMap：無法加載 chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map 的內(nèi)容：HTTP 錯誤：狀態(tài)代碼 404，net::ERR_UNKNOWN_URL_SCHEME
DevTools 無法加載 SourceMap：無法加載 chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map 的內(nèi)容：HTTP 錯誤：狀態(tài)代碼 404，net::ERR_UNKNOWN_URL_SCHEME
如果您正在開發(fā)，則需要選中“啟用 JavaScript 源映射”和“啟用 CSS 源映射”才能在 Chrome 開發(fā)者工具中查看源代碼。取消選中這些會剝奪您調(diào)試源代碼的能力。這就像關(guān)掉火警警報器而不是去滅火一樣。你不想那樣做。
相反，您想要找到導(dǎo)致消息的擴展程序并將其關(guān)閉。 這樣做的方法如下：
轉(zhuǎn)到 Chrome 右上角的三個點。
轉(zhuǎn)到“更多工具”并單擊“擴展”。
一次對一個擴展執(zhí)行此操作，直到控制臺中不再出現(xiàn)“SourceMap”錯誤：
如果有的話，那么就是該擴展導(dǎo)致了這些消息。
否則，可以重新打開該擴展。
將開關(guān)滑至左側(cè)即可關(guān)閉擴展。
重新加載您正在使用開發(fā)工具的頁面。
檢查任何“SourceMap”錯誤消息是否消失。
確定哪些擴展導(dǎo)致了問題后：
如果您需要，請聯(lián)系制造商讓他們解決問題。
否則，請刪除擴展。
SMILET
TA貢獻1796條經(jīng)驗 獲得超4個贊
就像在webpack.config.js文件中添加這一行一樣簡單 -
module.exports?=?{
????devtool:?"source-map",
}現(xiàn)在 Edge 可以檢測到源映射，錯誤就消失了。
UYOU
TA貢獻1878條經(jīng)驗 獲得超4個贊
include.prepload.js文件將包含如下一行，可能是最后一行：
//# sourceMappingURL=include.prepload.js.map
刪除它，錯誤就會消失。
慕無忌1623718
TA貢獻1744條經(jīng)驗 獲得超4個贊
對我來說，問題不是由開發(fā)中的應(yīng)用程序本身引起的，而是由 Chrome 擴展React Developer Tool引起的。我通過右鍵單擊工具欄中的擴展程序圖標，單擊“管理擴展程序”，然后啟用“允許訪問文件 URL”部分解決了這個問題。但這項措施僅修復(fù)了部分警報。
我在 React 存儲庫中發(fā)現(xiàn)了一些問題，表明原因是其擴展中的錯誤，并且計劃很快得到糾正。
您可以通過在不啟用任何擴展的情況下在匿名選項卡中訪問您的應(yīng)用程序來確認與擴展相關(guān)。
開心每一天1111
TA貢獻1836條經(jīng)驗 獲得超13個贊
Chrome 在 2022 年更改了 UI，因此這是最高票數(shù)回復(fù)的新版本。
打開開發(fā)工具（點擊F12或Option++ ）CommandJ
選擇頂部的齒輪。該區(qū)域有兩個齒輪，因此請務(wù)必選擇頂部的齒輪。
找到來源部分
取消選擇“啟用 JavaScript 源映射”
檢查一下是否有效！
肥皂起泡泡
TA貢獻1829條經(jīng)驗 獲得超6個贊
正確：它與您的代碼無關(guān)。我找到了針對此警告的兩個有效解決方案（不僅僅是禁用它）。
.map 文件適用于已縮小的 JavaScript 和 CSS（現(xiàn)在也包括 TypeScript）文件。它們被稱為 SourceMap。當您縮小文件（例如 angular.js 文件）時，它需要數(shù)千行漂亮的代碼，然后將其變成只有幾行丑陋的代碼。希望當您將代碼交付到生產(chǎn)環(huán)境時，您使用的是縮小的代碼，而不是完整的、未縮小的版本。當您的應(yīng)用程序在生產(chǎn)中并出現(xiàn)錯誤時，源映射將幫助您獲取丑陋的文件，并允許您查看代碼的原始版本。如果您沒有源映射，那么任何錯誤充其量都顯得很神秘。
第一個解決方案：您應(yīng)該添加 .map 文件，并且有一些工具可以幫助您解決這個問題（例如Grunt、Gulp和Google 閉包，引用答案）。否則，您可以從Bootstrap、jQuery、font-awesome、preload等官方網(wǎng)站下載 .map 文件...（也許通過npm命令在隨機文件夾中安裝popper或swiper之類的東西，然后僅復(fù)制 .map 文件在您的 JavaScript/CSS 目標文件夾中）
第二種解決方案（我使用的）：使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）添加源文件。（以下是使用 CDN 的所有優(yōu)點）。使用內(nèi)容交付網(wǎng)絡(luò) (CDN)，您可以簡單地添加 CDN 鏈接，而不是文件夾的路徑。您可以在官方網(wǎng)站（Bootstrap、jquery、popper等）上找到 CND，也可以在Cloudflare、cdnjs等網(wǎng)站上輕松搜索。
MM們
TA貢獻1886條經(jīng)驗 獲得超2個贊
Chrome 上沒有足夠權(quán)限的擴展可能會導(dǎo)致這些警告，例如 React 開發(fā)人員工具。檢查以下過程是否可以解決您的問題：
右鍵單擊擴展程序圖標。
或者
轉(zhuǎn)到擴展。
單擊 React 開發(fā)者工具行中的三點。
然后選擇“這可以讀取和寫入站點數(shù)據(jù)”。
您應(yīng)該在列表中看到三個選項。根據(jù)您對擴展程序的信任程度選擇一個足夠嚴格且滿足擴展程序需求的選項。
- 9 回答
- 0 關(guān)注
- 588 瀏覽
添加回答
舉報
0/150
提交
取消