☰

エラーメッセージ「DevTools は SourceMap の読み込みに失敗しました: chrome-extension://... のコンテンツを読み込めませんでした」質問する

tag-icon • tag-icon javascript html debugging google-chrome-extension
エラーメッセージ「DevTools は SourceMap の読み込みに失敗しました: chrome-extension://... のコンテンツを読み込めませんでした」質問する

ローカル マシンから選択した画像を表示しようとしていますが、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

ベストアンサー1

これは、Chrome がソースマップのサポートを追加したためです。

開発者ツール（ブラウザでは F12）に移動し、右上隅にある3 つのドットを選択して、 [設定]に移動します。

次に、 Sourcesを探して、オプションを無効にします。

  • 「JavaScript ソースマップを有効にする」
  • 「CSS ソースマップを有効にする」

そうすれば、警告は消えます。これはコードとは関係ありません。他のページの開発者ツールを確認すると、同じ警告が表示されます。

おすすめ記事