DevTools failed to load SourceMap Could not load content for chrome-extension

Question

I m trying to display an image selected from the local machine and I need the location of that image for a javascript function  I have recently started learning javascript  I am facing this error and unable to get the location of the image  For getting image location  I tried using console log  but nothing returns  console log document getElementById  quot uploadPreview quot      Here s the HTML code   lt  DOCTYPE html gt   lt html gt   lt head gt     lt title gt  lt  title gt   lt  head gt    lt body gt     lt div align  quot center quot  style  quot padding-top  50px quot  gt       lt img align  quot center quot  id  quot uploadPreview quot  style  quot width  100px  height  100px  quot    gt     lt  div gt      lt div align  quot center quot  style  quot padding-left  30px quot  gt       lt input id  quot uploadImage quot  type  quot file quot  name  quot myPhoto quot  onchange  quot PreviewImage    quot    gt     lt  div gt      lt script type  quot text javascript quot  gt      function PreviewImage           var oFReader   new FileReader          oFReader readAsDataURL document getElementById  quot uploadImage quot   files 0           oFReader onload   function  oFREvent            document getElementById  quot uploadPreview quot   src   oFREvent target result          console log document getElementById  quot uploadPreview quot   src                      lt  script gt    lt  body gt   lt  html gt   Console Output   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

User · Answer

For me  the problem was caused not by the app in development itself but by the Chrome extension  React Developer Tool  I solved partially that by right-clicking the extension icon in the toolbar  clicking  quot manage extension quot   I m freely translating menu text here since my browser language is in Brazilian Portuguese   then enabling  quot Allow access to files URLs  quot  But this measure fixed just some of the alerts  I found issues in the react repo that suggests the cause is a bug in their extension and is planned to be corrected soon - see issues 20091 and 20075  You can confirm is extension-related by accessing your app in an anonymous tab without any extension enabled

User · Answer

include prepload js file will have a line something like below  probably as the last line      sourceMappingURL include prepload js map Delete it and the error will go away

User · Answer

Right  it has nothing to do with your code  I ve found two valid solutions to this warning  not just disabling it   To better understand what a SourceMap is  I suggest you check out this answer  where it explains how it s something that helps you debug   The  map files are for js and css  and now ts too  files that have been minified  They are called SourceMaps  When you minify a file  like the angular js file  it takes thousands of lines of pretty code and turns it into only a few lines of ugly code  Hopefully  when you are shipping your code to production  you are using the minified code instead of the full  unminified version  When your app is in production  and has an error  the sourcemap will help take your ugly file  and will allow you to see the original version of the code  If you didn t have the sourcemap  then any error would seem cryptic at best    First solution  apparently  Mr Heelis was the closest one  you should add the  map file and there are some tools that help you with this problem  Grunt  Gulp and Google closure for example  quoting the answer   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 your js css destination folder   Second solution  the one I used   add the source files using a CDN  here all the advantages of using a CDN   Using the Content delivery network  CDN  you can simply add the cdn link  instead of the path to your folder  You can find cdn on official websites  Bootstrap  jquery  popper  etc    or you can easily search on some websites like cloudflare  cdnjs  etc

User · Answer

You need to open chrome in developper mode   select more tools then extensions and select developper mode

User · Answer

I appreciate this is part of your extensions  but I see this message in all sorts of places these days  and I hate it  how I fixed it  EDIT  this fix seems to massively speed up the browser too  was by adding a dead file  physically create the file it wants  where it wants  as a blank file  EG   quot popper min js map quot    put this in the blank file     quot version quot   1    quot mappings quot    quot  quot     quot sources quot         quot names quot         quot file quot    quot popper min js quot      make sure that  quot file quot    quot         quot  in the content of the blank file MATCHES the name of your file        map  minus the word  quot  map quot      EDIT  I suspect you could physically add this dead file method to the addon yourself

User · Answer

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

User · Answer

I do not think the warnings you have received are related  I had the same warnings which turned out to be the chrome extension React Dev Tools   Removed the extension and the errors have gone

User · Answer

Extensions without enough permission on chrome can cause these warnings  for example for React developer tools  check if the following procedure solves your problem   Right click on the extension icon   Or  Go to extensions  Click the three-dot in the row of React developer tool   Then choose  quot this can read and write site data quot   You should see 3 options in the list  pick one that is strict enough based on how much you trust the extension and also satisfies the extensions s needs

User · Answer

I resolved this by clearing App Data  Cypress documentation admits that App Data can get corrupted   Cypress maintains some local application data in order to save user preferences and more quickly start up  Sometimes this data can become corrupted  You may fix an issue you have by clearing this app data    Open Cypress via cypress open Go to File - gt  View App Data This will take you to the directory in your file system where your App Data is stored  If you cannot open Cypress  search your file system for a directory named cy whose content should look something like this                 production                         all log                         browsers                         bundles                         cache                         projects                         proxy                         state json  Delete everything in the cy folder Close Cypress and open it up again  Source  https   docs cypress io guides references troubleshooting html To-clear-App-Data

[javascript] DevTools failed to load SourceMap: Could not load content for chrome-extension

Examples related to javascript

Examples related to html