Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I'm trying to display an image selected from the local machine and I need the location of that image for a JavaScript function. But I'm unable to get the location.

To get the image location, I tried using console.log, but nothing returns.

console.log(document.getElementById("uploadPreview"));

Here's the HTML code:

<!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>

Console Output:

Enter image description here

Here's the warning:

DevTools failed to load SourceMap: Could not load content for chrome-extension://alplpnakfeabeiebipdmaenpmbgknjce/include.preload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

like image 563
snehit vaddi Avatar asked Oct 05 '22 23:10

snehit vaddi


People also ask

How do I enable Sourcemap in Chrome?

To enable source maps in Google Chrome, go to Developer Tools, click the little cog icon, and then make sure that “Enable Javascript source maps” is checked. That's it. Now each compressed asset file contains a link pointing to its source map, and we've just told Chrome not to ignore them.

What is Sourcemap?

A source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger. To enable the debugger to work with a source map, you must: generate the source map.

How do you fix a source map error?

The only workaround is to manually change the map URL to a public one (http://localhost:1234/file.map.js) and start a local webserver at this port.


1 Answers

That's because Chrome added support for source maps.

Go to the developer tools (F12 in the browser), then select the three dots in the upper right corner, and go to Settings.

Then, look for Sources, and disable the options:

  • "Enable JavaScript source maps"
  • "Enable CSS source maps"

If you do that, that would get rid of the warnings. It has nothing to do with your code. Check the developer tools in other pages and you will see the same warning.

like image 311
Diego Oña Avatar answered Oct 11 '22 18:10

Diego Oña