Ошибка devtools failed to load sourcemap - ErrorsMaster.ru - большая энциклопедия ошибок и их решений

My code

<html>
  <head>
    <!-- Load TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <!-- Load Posenet -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
 </head>

  <body>
    <img id='cat' src='./pose/images/aa_085.jpg'/>
  </body>
  <!-- Place your code in the script tag below. You can also use an external .js file -->
  <script>
    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);
    })
  </script>
</html>

I rarely use HTML and JavaScript and almost forget the most fundamentals. What is the error?

Error information

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

asked Apr 14, 2020 at 10:19

This worked for me:

Go to Inspect → Settings (Symbol) gear → Uncheck Enable JavaScript source maps and Enable CSS source map.

Refresh.

(Note: Deactivate Adblock if the above process did not work.)

answered Aug 12, 2020 at 18:58

GAURAV MOKASHIGAURAV MOKASHI

1,7902 gold badges13 silver badges16 bronze badges

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 and then load these files from your own server. In order to fix this for locally loaded files, simply remove the last line in the JavaScript 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.

answered Oct 1, 2020 at 9:42

IvanIvan

1,20416 silver badges22 bronze badges

This is what worked for me:

Instead of

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>

try

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"> </script>

After that change I am not seeing the error any more.

answered May 5, 2020 at 10:47

Valeri VoevValeri Voev

1,9429 silver badges24 bronze badges

Also I’d faced the same kind of problem for Telerik’s Kendo UI JavaScript file. For that you need to uncheck options ‘Enable JavaScript source maps’ and ‘Enable CSS source map’ from the Inspect element as shown in image and refresh the web page.

answered Dec 4, 2020 at 11:20

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 */ line in file bootstrap.min.css.

answered Jan 6, 2021 at 19:40

CodeToLifeCodeToLife

3,6222 gold badges40 silver badges29 bronze badges

In my case, I had to deactivate Adblock and it worked fine.

answered Jul 9, 2020 at 13:34

I used the minified version of the CSS file and it worked for me.

Use:
import 'react-toastify/dist/ReactToastify.min.css'

Instead of: import 'react-toastify/dist/ReactToastify.css'

answered May 4, 2022 at 6:18

In my case I had to remove React Dev Tools from Chrome to stop seeing the strange errors during development of React application using a local Express.js 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… I started things back up and am seeing this funky address and error again:

answered Oct 29, 2020 at 13:16

I had a similar problem when I was trying to work with coco-ssd. I think this problem is caused by the version. I changed the 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.)

<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.9.0"></script>
<!-- Load the coco-ssd model. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@1.1.0"</script>

answered Apr 23, 2020 at 11:25

Sometimes it’s an error caused by adblocker extensions.

Make sure looking in another browser or disable extensions of this type.

answered Jul 15, 2022 at 5:17

ShoniisraShoniisra

5916 silver badges6 bronze badges

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

answered Jun 18, 2020 at 14:41

hyperknothyperknot

13.3k24 gold badges97 silver badges150 bronze badges

In my case, the sourcemaps for node_modules folder were explicitly excluded from processing. In my webpack.config.js I had to comment out the exclude option in module configuration (the rules part where use: ["source-map-loader"] is).

module: {
    rules:[
        {
            test: /.js$/,
            // exclude: /node_modules/, // This is the line that caused the problem. Remove or comment it out.
            enforce: "pre",
            use: ["source-map-loader"],
        },
    ],
}

answered Jan 15, 2022 at 8:57

J. WrongJ. Wrong

7929 silver badges10 bronze badges

I get this warning in Angular if I run:

ng serve --sourceMap=false

To fix:

ng serve

answered Oct 14, 2020 at 9:33

danday74danday74

51.4k48 gold badges228 silver badges279 bronze badges

In my case, some broken URL was found in a layout.

answered Aug 28, 2020 at 11:36

You can escape this by require your puppeteer from different environment.

your_project (folder)
- back_end modules (folder)
- - vendor.js (require puppeteer here)
- electron modules (folder)
- - vendor.js (require vendor.js from back_end folder)
main.js (electron main.js file) (require here vendor.js from electron modules folder)

answered Feb 3 at 5:03

K.IgorK.Igor

1331 gold badge2 silver badges10 bronze badges

A rather trivial fix that doesn’t require adjusting the browser settings at all is just to create file hammer.min.js.map in your Hammer folder and make its content an empty JSON object, that is, { }.

answered May 7 at 13:18

A little late to the party, but I ran into the same problem. The issue is due to the mapping. The url won’t work entirely so you can just go to https://www.jsdelivr.com search for chartjs and copy the html code to use.
As of May 28, 2023 it’s <script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js"></script>. Issue solved.

answered May 29 at 2:40

Kaelan O’reilyKaelan O’reily

1131 gold badge1 silver badge8 bronze badges

Источник

Platform Notice: Cloud, Server, and Data Center — This article applies equally to all platforms.

A SourceMap is a mapping between the generated/transpiled/minified JS file and one or more original source files. The main purpose of SourceMap is to help with debugging.

If the browser is requesting a SourceMap for Jira, and Jira assumes that it’s not needed, Jira won’t provide the sourcemap requested which will generate a warning in the browser console reporting that «DevTools failed to load SourceMap».

Jira 7 and later

For security reasons, we don’t expose SourceMaps when avoidable.

If the browser is requesting a SourceMap for Jira, and Jira assumes that it’s not needed, Jira won’t provide the sourcemap requested. It may come with a 404 or 503 HTTP status code:

DevTools failed to load source map: Could not load content for <<LOCATION/FILE.js.map>>: HTTP error: status code 503, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for <<LOCATION/FILE.js.map>>: HTTP error: status code 404, net::ERR+UNKNOWN_URL_SCHEME

This behavior happens to many other websites. For example, you can open www.google.com, and if your browser requests a sourcemap, you probably will face the same warning there.

Therefore, it’s only a warning coming from your browser saying that Jira opted to don’t expose this information.

For security reasons, we don’t expose SourceMaps when avoidable.

If these JS errors are no impacting you and it’s only your browsers warning you that Jira is not sharing/exposing the sourcemaps (for security reasons), we will suggest filtering out the console noise using the browsers built-in filters (using the `-` exclusion, for example), probably «-statlas» would work.

If you are using Google Chrome:

Go to the developer tools (F12 in the browser);
Select the Cogwheel in the upper right corner;
In the Preferences tab (left) look for Sources;
Disable the options: «Enable javascript source maps» «Enable CSS source maps»

Источник

I don’t know if is of any help for fixing the bug, but anyhow sharing my experience, some of the messages did not appear anymore in Chrome after I right-clicked the React Dev Tool extension icon in the toolbar, clicked «manage extension» (I’m freely translating menu text here since my browser language is in Brazilian Portuguese), and then enabled «Allow access to files URLs.»

This unfortunately doesn’t work for me.

Chrome: 88.0.4315.5 (Official Build) dev (64-bit)
fresh install of React Developer Tools
no other extensions

Console still polluted by:

DevTools failed to load SourceMap: Could not load content for chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/injectGlobalHook.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/contentScript.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Источник

The ‘Dev Tools Failed to Load Source Map’ error is a common issue faced by web developers when working on web projects. This error occurs when the browser’s development tools are unable to load the source map file associated with your project. This guide will walk you through the process of identifying the cause of this error and provide step-by-step instructions on how to resolve it.

Understanding the ‘Dev Tools Failed to Load Source Map’ Error
Common Causes of the Error
Step-by-Step Solutions to Fix the Error
Frequently Asked Questions (FAQ)

A source map is a file that maps the minified or transpiled code in your project back to the original source code. This allows you to debug and inspect the original source code directly in your browser’s development tools, even if the code running on your web page has been modified for performance or compatibility reasons.

When the browser’s development tools are unable to locate or load the source map file for your project, you may encounter the ‘Dev Tools Failed to Load Source Map’ error.

Common Causes of the Error

There are several reasons why you may be experiencing the ‘Dev Tools Failed to Load Source Map’ error in your web project:

The source map file is missing or has an incorrect file path.
The source map file is not publicly accessible due to server restrictions.
The Content Security Policy (CSP) is preventing the loading of the source map file.
The source map file is not included in your build process.

Step-by-Step Solutions to Fix the Error

Solution 1: Verify the Source Map File Path

Open the browser’s development tools (F12 or Ctrl + Shift + I in most browsers).
Navigate to the ‘Console’ tab.
Locate the ‘Dev Tools Failed to Load Source Map’ error message. The error message should include the URL of the missing source map file.
Verify that the URL is correct and that the source map file is located in the specified path. If the source map file is missing or located in a different path, update the path accordingly.

Solution 2: Ensure the Source Map File is Publicly Accessible

Verify that the source map file is accessible by entering its URL directly in the browser’s address bar. If the file is not accessible, check your server’s settings and ensure that the source map file is publicly accessible.

Solution 3: Update the Content Security Policy (CSP)

Check your project’s Content Security Policy (CSP) settings.
If the CSP is preventing the loading of the source map file, update the CSP settings to allow the loading of source map files. This can typically be done by adding the unsafe-inline directive to the script-src section of the CSP.

Solution 4: Include the Source Map File in Your Build Process

Verify that your build process is generating and including the source map file in your project. If it is not, update your build process to generate and include the source map file.

Frequently Asked Questions (FAQ)

1. What are source maps and why are they useful?

Source maps are files that map the minified or transpiled code in your project back to the original source code. They allow you to debug and inspect the original source code directly in your browser’s development tools, making it easier to identify and fix issues in your code.

2. Can I disable source maps in my project?

Yes, you can disable source maps in your project by updating your build process or configuration settings. However, this may make it more difficult to debug and inspect your code, as you will not have access to the original source code in the browser’s development tools.

3. How do I generate a source map file for my project?

The process for generating a source map file depends on your project’s build process and tools. Many build tools, such as webpack, have built-in support for generating source map files. Consult the documentation for your specific build tool to learn how to generate a source map file.

4. What should I do if I still cannot resolve the ‘Dev Tools Failed to Load Source Map’ error?

If you have tried the solutions provided in this guide and are still experiencing the error, consider seeking assistance from the community or consulting the documentation for your specific build tools and frameworks.

5. Can I ignore the ‘Dev Tools Failed to Load Source Map’ error?

While you can choose to ignore the error, doing so may make it more difficult to debug and inspect your code, as you will not have access to the original source code in the browser’s development tools. It is recommended to resolve the error to ensure a smooth development experience.

Source Map Revision 3 Proposal
Introduction to JavaScript Source Maps (HTML5 Rocks)
Using Source Maps with Webpack

Источник

To solve DevTools failed to load SourceMap: Could not load content for chrome-extension error just disable your chrome Extension which causes block your JS. This error causes when something is blocking your javascript and it should be a chrome extension.

Contents

Solution 1: Enable javascript source maps
Solution 2: selected context only
Solution 3: find the extensions that are causing the messages and turn them off
Solution 4: Deactivate AdBlocker
Frequently Asked Questions
Summary

Solution 1: Enable javascript source maps

This Problem happens 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.

Solution 2: selected context only

Go to developer tools -> settings -> console -> tick “Selected context only”.
The warnings will be hidden. You can see them again by unticking the same box.
The “selected context only” means only the top, iframe, worker and extension contexts.
Which is all that you’ll need, the vast majority of the time.

Solution 3: find the extensions that are causing the messages and turn them off

find the extensions that are causing the messages and turn them off. Here is how you do that:

Go to the three dots in the upper right-hand corner of Chrome.
Go to “More Tools” and click on “Extensions”.
Do this for one extension at a time until no more “SourceMap” errors are in the console:
Turn off the extension by sliding the switch to the left.
Reload the page that you were using the Development Tools on.
Check if any of the “SourceMap” error messages disappeared.
If any did, then that extension was causing those messages.
Otherwise, that extension can be turned back on.

Solution 4: Deactivate AdBlocker

In My case, it was Adblocker causing this error. I just turn it off and My problem was solved successfully.

Frequently Asked Questions

How To Solve DevTools failed to load SourceMap: Could not load content for chrome-extension Error?
To Solve DevTools failed to load SourceMap: Could not load content for chrome-extension. This Problem happens 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 on other pages and you will see the same warning.
DevTools failed to load SourceMap: Could not load content for chrome-extension Error
To Solve DevTools failed to load SourceMap: Could not load content for chrome-extension. This Problem happens 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 on other pages and you will see the same warning.

Summary

You just need to disable the chrome extension that is blocking javascript and your error will be fixed is the best solution. Comment below with Your thoughts and your queries. Also, Comment below on which solution worked for you.

Also, Read

ChromeDriverManager().install() Is Giving KeyError: ‘google-chrome’
Message: session not created: This version of ChromeDriver only supports Chrome version 102 Current browser version is 100

Источник

My code

Error information

Table of Contents

Common Causes of the Error

Step-by-Step Solutions to Fix the Error

Solution 1: Verify the Source Map File Path

Solution 2: Ensure the Source Map File is Publicly Accessible

Solution 3: Update the Content Security Policy (CSP)

Solution 4: Include the Source Map File in Your Build Process

Frequently Asked Questions (FAQ)

1. What are source maps and why are they useful?

2. Can I disable source maps in my project?

3. How do I generate a source map file for my project?

4. What should I do if I still cannot resolve the ‘Dev Tools Failed to Load Source Map’ error?

5. Can I ignore the ‘Dev Tools Failed to Load Source Map’ error?

Solution 1: Enable javascript source maps

Solution 2: selected context only

Solution 3: find the extensions that are causing the messages and turn them off

Solution 4: Deactivate AdBlocker

Frequently Asked Questions

Summary