When adding a Javascript library Chrome complains about a missing source map why

Question

My code   lt html gt     lt head gt       lt  -- Load TensorFlow js -- gt       lt script src  https   cdn jsdelivr net npm  tensorflow tfjs  gt  lt  script gt        lt  -- Load Posenet -- gt       lt script src  https   cdn jsdelivr net npm  tensorflow-models posenet  gt  lt  script gt     lt  head gt      lt body gt       lt img id  cat  src    pose images aa 085 jpg   gt     lt  body gt     lt  -- Place your code in the script tag below  You can also use an external  js file -- gt     lt script gt      var flipHorizontal   false       var imageElement   document getElementById  cat         posenet load   then function net          const pose   net estimateSinglePose imageElement            flipHorizontal  true                 return pose         then function pose         console log pose             lt  script gt    lt  html gt    Rarely use HTML and JS  almost forget the most fundamentals  can any one kindly point out my fool  Error info attached   DevTools failed to load SourceMap  Could not load content for https   cdn jsdelivr net npm  tensorflow tf min js map  HTTP error  status code 404  net  ERR HTTP RESPONSE CODE FAILURE

User · Answer

Also i d face same kind of problem for kendo Telerk Ui javaScript file  For that you need to do   Unchecked the  Enable JavaScript source maps  and  Enable CSS source map  from inspect element as shown in image and Refresh the WebPage

User · Answer

This worked for me Deactivate AdBlock  Go to inspect - gt  settings gear - gt  Uncheck   enable javascript source maps  and  enable css source map   Refresh

User · Answer

Try to see if it works in Incognito Mode  If it does  then it s a bug in recent Chrome  On my computer the following fix worked    Quit Chrome Delete your full Chrome cache folder Restart Chrome

User · Answer

While  the fix as per Valeri works  but its only for tfjs   If you re expecting for body-pix or any other tensor-flow models  you would be facing the same  It is an open issue too and the team is working on the fix   https   github com dequelabs axe-core issues 1977  But  if you don t have problem in degrading the version  if anyone wants to use body-pix  from latest docs  below both links works fine as I ve tested the same    lt script src  https   cdn jsdelivr net npm  tensorflow tfjs 1 0 0 dist tf min js  gt  lt  script gt   lt script src  https   cdn jsdelivr net npm  tensorflow-models body-pix 1 0 0  gt  lt  script gt

User · Answer

In my case I had to remove React Dev Tools from Chrome to stop seeing the strange errors during development of React app using a local Express server with a create-react-app client  which uses Webpack   In the interest of community I did a sanity check and quit everything - server client server Chrome - and then I opened Chrome and reinstalled React Dev Tools    Started things back up and am seeing this funky address and error again

User · Answer

I get this warning in Angular if I run  ng serve --sourceMap false  To fix  ng serve

User · Answer

I had similar problem when i was trying to work with coco-ssd  I think this problem is caused because of the version  I changed version of tfjs to 0 9 0 and coco-ssd version to 1 1 0 and it worked for me   you can search for posenet versions on   https   www jsdelivr com package npm  tensorflow-models posenet     lt  -- Load TensorFlow js-- gt   lt script src  https   cdn jsdelivr net npm  tensorflow tfjs 0 9 0  gt  lt  script gt   lt  -- Load the coco-ssd model  -- gt   lt script src  https   cdn jsdelivr net npm  tensorflow-models coco-ssd 1 1 0  lt  script gt

User · Answer

Newer files on JsDelivr get the sourcemap added automatically to the end of them  This is fine and doesn t throw any SourceMap-related notice in the console as long as you load the files from JsDelivr  The problem occurs only when you copy then load these files from your own server  In order to fix this for locally loaded files simply remove the last line in the JS file s  downloaded from JsDelivr  It should look something like this      sourceMappingURL  sm 64bec5fd901c75766b1ade899155ce5e1c28413a4707f0120043b96f4a3d8f80 map  As you can see it s commented out but Chrome still parses it

User · Answer

When it s annoying with warnings like  DevTools failed to load SourceMap  Could not load content for http            bootstrap 4 5 0 css bootstrap min css map  HTTP error  status code 404  net  ERR HTTP RESPONSE CODE FAILURE Follow this path and remove that tricky     sourceMappingURL bootstrap min css map    in bootstrap min css

User · Answer

In my case  some broken url found in layout

User · Answer

In my case  I had to deactivate AdBlock and it worked fine

User · Answer

This is what worked for me  instead of   lt script src  https   cdn jsdelivr net npm  tensorflow tfjs  gt  lt  script gt   try   lt script src  https   cdn jsdelivr net npm  tensorflow tfjs dist tf min js  gt   lt  script gt   After that change I am not seeing the error anymore

[google-chrome-devtools] When adding a Javascript library, Chrome complains about a missing source map, why?

Examples related to google-chrome-devtools