How to fix Console error DevTools failed to load SourceMap
DevTools is a set of tools for web developers which is a part of Chrome browser.
I was recently working on an interesting WordPress website and I have noticed a strange error in Console. I only saw this error in Chrome; no errors in Firefox for example.
This error was something like this: DevTools failed to load SourceMap: Could not load content for path/bootstrap-toggle.min.js.map: HTTP error: status code 404, net::ERRHTTP_RESPONSE_CODEFAILURE.
The solution for DevTools failed to load SourceMap error
It was frustrating to see this error because I had no reference to the file which was indicated in the error message: bootstrap-toggle.min.js.map. In other words the WordPress theme was not having any code to use such a file.
But since it was a comment it should have been just fine to leave it there.
The funny thing was that, once I have completely deleted that comment, the error was gone.
Please let me know if this is helpful for you and contact me if you need more info.
Comments closed
Please contact me, if you have any questions or suggestions.
Zen Invader is a website where you can find articles related to web design and development. If you find the content useful, please consider supporting this website.
Comments
zhb124404 commented Mar 17, 2021
Version
Browser and OS info
89.0.4389.90 64bit (cohort: 89_Win_72)
Steps to reproduce
just open a vue page served by webpack-dev-server
and then show:
DevTools failed to load SourceMap: Could not load content for chrome-extension://ljjemllljcmogpfapbkkighbhhppjdbg/build/env.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
What is expected?
What is actually happening?
In DevTool Console panel :
DevTools failed to load SourceMap: Could not load content for chrome-extension://ljjemllljcmogpfapbkkighbhhppjdbg/build/env.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
The text was updated successfully, but these errors were encountered:
PHenryy commented Apr 1, 2021
cordeiguerin commented Apr 5, 2021
same issue (but I run Linux Mint, rather than Windows)
jSadoski commented Apr 12, 2021 •
Same issue, but on macOS in Chrome and Brave.
Edit: macOS not iOS
jSadoski commented Apr 13, 2021
I wanted to follow up with more information about this issue. This breaks the whole extension for me with this error:
greaterDeltaCS commented May 21, 2021
Found a fix for this. In developer tools in chrome browser, go to settings(click the gear icon on the same bar as the console tab). Find and uncheck box that says Enable Javascript Sourcemap. exit settings and reload(I did a hard reload/empty cache. The error should be gone.
unnsteinngardars commented May 25, 2021
Found a fix for this. In developer tools in chrome browser, go to settings(click the gear icon on the same bar as the console tab). Find and uncheck box that says Enable Javascript Sourcemap. exit settings and reload(I did a hard reload/empty cache. The error should be gone.
Kudos! Did the trick for me.
givihuda commented Jun 1, 2021
Can somebody explain what this error means? I can’t tell if it’s causing the weird issue I’m having while modifying some code I’m not very familiar with that uses Laravel 8 and Vue (v?).
DevTools failed to load SourceMap: Could not load content for http://localhost:8002/js/vue-resize.esm.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
I’m not familiar with vue-resize.esm.js.map. is that a file in the /js folder that Google likes Chrome to look for to help DevTools understand your code?
jSadoski commented Jun 2, 2021
is that a file in the /js folder that Google likes Chrome to look for to help DevTools understand your code?
Yes, source maps helps DevTools unpack your minified code. It’s just for when you’re running in dev. See: MDN: Use a Source Map.
As to why this is breaking Vue DevTools I’m not totally sure.
redfox05 commented Jul 13, 2021 •
Found a fix for this. In developer tools in chrome browser, go to settings(click the gear icon on the same bar as the console tab). Find and uncheck box that says Enable Javascript Sourcemap. exit settings and reload(I did a hard reload/empty cache. The error should be gone.
This is a workaround, not a fix, because if you are using VueJS DevTools, its quite likely you are a developer wanting to use source maps for your own JS code, so wouldn’t want to untick this option as its a global flag for all sourcemaps.
The actual fix for this is one of two options:
P.s. I got this error for the utils.js script instead:
DevTools failed to load source map: Could not load content for chrome-extension://ljjemllljcmogpfapbkkighbhhppjdbg/build/util.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
givihuda commented Jul 13, 2021
Since I’m not very familiar with the Vue implementation on the project I referenced, I’m not sure the previous developers even implemented the sourcemap or Vue or whatever properly to begin with. I will be able to determine this better with more review of the code, which I can do when I use the project again, and if I find anything useful there that would be helpful for this thread, I’ll post here again. Thanks for the info.
uonick commented Jul 28, 2021
I got this error for the utils.js script instead:
Same issue on macOS (Big Sur 11.5) Chrome (Version 92.0.4515.107 (Official Build) (x86_64)) and Vue.js devtools 6.0.0 beta 15 + ViteJS (2.4.3)
9mm commented Aug 3, 2021
Just started getting this as well
geminigeek commented Sep 8, 2021
I got this error for the utils.js script instead:
Same issue on macOS (Big Sur 11.5) Chrome (Version 92.0.4515.107 (Official Build) (x86_64)) and Vue.js devtools 6.0.0 beta 15 + ViteJS (2.4.3)
Same issue here on win10
Akryum commented Sep 19, 2021
Source maps are not generated for the production build of the devtools extension:
Source Maps: быстро и понятно
Механизм Source Maps используется для отображения исходных текстов программы на сгенерированные на их основе скрипты. Несмотря на то, что тема не нова и по ней уже написан ряд статей (например эта, эта и эта) некоторые аспекты все же нуждаются в прояснении. Представляемая статья представляет собой попытку упорядочить и систематизировать все, что известно по данной теме в краткой и доступной форме.
В статье Source Maps рассматриваются применительно к клиентской разработке в среде популярных браузеров (на примере, DevTools Google Chrome), хотя область их применения не привязана к какому-либо конкретному языку или среде. Главным источникам по Source Maps является, конечно, стандарт, хотя он до сих пор не принят (статус — proposal), но, тем не менее, широко поддерживается браузерами.
Работа над Source Maps была начата в конце нулевых, первая версия была создана для плагина Firebug Closure Inspector. Вторая версия вышла в 2010 и содержала изменения в части сокращения размера map-файла. Третья версия разработана в рамках сотрудничества Google и Mozilla и предложена в 2011 (последняя редакция в 2013).
В настоящее время в среде клиентской разработки сложилась ситуация, когда исходный код почти никогда не интегрируется на веб-страницу непосредственно, но проходит перед этим различные стадии обработки: минификацию, оптимизацию, конкатенацию, более того, сам исходный код может быть написан на языках требующих транспиляции. В таком случае, для целей отладки необходим механизм позволяющий наблюдать в дебаггере именно исходный, человекочитаемый код.
Для работы Source Maps необходимы следующие файлы:
Map-файл
Вся работа Source Maps основана на map-файле, который может выглядеть, например, так:
Обычно, имя map-файла складывается из имени скрипта, к которому он относится, с добавлением расширения «.map», bundle.js — bundle.js.map. Это обычный json-файл со следующими полями:
Загрузка Source Maps
Для того, чтобы браузер загрузил map-файл может быть использован один из следующих способов:
Таким образом, загрузив map-файл браузер подтянет и исходники из поля «sources» и с помощью данных в поле «mappings» отобразит их на сгенерированный скрипт. Во вкладке Sources DevTools можно будет найти оба варианта.
Для указания пути может использоваться пседопротокол file://. Также, в может быть включено все содержимое map-файла в кодировке Base64. В терминологии Webpack подобные Source Maps названы inline source maps.
Self-contained map-файлы
Код файлов-исходников можно включить непосредственно в map-файл в поле «sourcesContent», при наличии этого поля необходимость в их отдельной загрузке отпадает. В этом случае названия файлов в «sources» не отражают их реального адреса и могут быть совершенно произвольными. Именно поэтому, вы можете видеть во вкладке Sources DevTools такие странные «протоколы»: webpack://, ng:// и т.д
Mappings
Сущность механизма отображения состоит в том, что координаты (строка/столбец) имен переменных и функций в сгенерированном файле отображаются на координаты в соотвествующем файле исходного кода. Для работы механизма отображения необходима следующая информация:
(#1) номер строки в сгенерированном файле;
(#2) номер столбца в сгенерированном файле;
(#3) индекс исходника в «sources»;
(#4) номер строки исходника;
(#5) номер столбца исходника;
Все эти данные находятся в поле «mappings», значение которого — длинная строка с особой структурой и значениями закодированными в Base64 VLQ.
Строка разделена точками с запятой (;) на разделы, соответствующие строкам в сгенерированном файле (#1).
Каждый раздел разделен запятыми (,) на сегменты, каждый из которых может содержать 1,4 или 5 значений:
Каждое значение представляет собой число в формате Base64 VLQ. VLQ (Variable-length quantity) представляет собой принцип кодирования сколь угодно большого числа с помощью произвольного числа двоичных блоков фиксированной длины.
В Source Maps используются шестибитные блоки, которые следуют в порядке от младшей части числа к старшей. Старший 6-й бит каждого блока (continuation bit) зарезервирован, если он установлен, то за текущим следует следующий блок относящийся к этому же числу, если сброшен — последовательность завершена.
Поскольку в Source Maps значение должно иметь знак, для него также зарезервирован младший 1-бит (sign bit), но только в первом блоке последовательности. Как и ожидается, установленный sign бит означает отрицательное число.
Таким образом, если число можно закодировать единственным блоком, оно не может быть по модулю больше 15 (11112), так как в первом шестибитном блоке последовательности два бита зарезервированы: continuation бит всегда будет сброшен, sign бит будет установлен в зависимости от знака числа.
Шестибитные блоки VLQ отображаются на кодировку Base64, где каждой шестибитной последовательности соответствует определенный символ ASCII.
Декодируем число mE. Инверсируем порядок, младшая часть последняя — Em. Декодируем числа из Base64: E — 000100, m — 100110. В первом отбрасываем старший continuation бит и два лидирующих нуля — 100. Во втором отбрасываем старший continuation и младший sign биты (sign бит сброшен — число положительное) — 0011. В итоге получаем 100 00112, что соответствует десятичному 67.
Можно и в обратную сторону, закодируем 41. Его двоичный код 1010012, разбиваем на два блока: старшая часть — 10, младшая часть (всегда 4-битная) — 1001. К старшей части добавляем старший continuation бит (сброшен) и три лидирующих нуля — 000010. К младшей части добавляем старший continuation бит (установлен) и младший sign бит (сброшен — число положительное) — 110010. Кодируем числа в Base64: 000010 — C, 110010 — y. Инверсируем порядок и, в итоге, получаем yC.
Для работы с VLQ весьма полезна одноименная библиотека.
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 and am unable to get the location of the image.
To get the image location, I tried using console.log, but nothing returns.
Here’s the HTML code:
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
12 Answers 12
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:
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.
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.
The include.prepload.js file will have a line like below, probably as the last line:
Delete it and the error will go away.
For me, the problem was caused not by the application in development itself, but by the Chrome extension React Developer Tool. I solved it partially by right-clicking the extension icon in the toolbar, clicking «Manage extension» and then enabling «Allow access to files URLs.» But this measure fixed just some of the alerts.
You can confirm is extension-related by accessing your application in an anonymous tab without any extension enabled.
Fixing «SourceMap» error messages in the Development Tools Console caused by Chrome extensions:
Examples caused by McAfee extensions:
DevTools failed to load SourceMap: Could not load content for chrome-extension://klekeajafkkpokaofllcadenjdckhinm/sourceMap/content.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
If you are developing, then you need «Enable JavaScript source maps» and «Enable CSS source maps» checked to be able see your source code in Chrome Developer Tools. Unchecking those takes away your ability to debug your source code. It is like turning off the fire alarm instead of putting out the fire. You do not want to do that.
Instead you want to find the extensions that are causing the messages and turn them off. Here is how you do that:
After determining which extensions caused the issue either:
How to suppress Chrome DevTools warning: ‘DevTools failed to load SourceMap: Could not load content for. ‘
Context
For many of my js files I have no source map. When using the devtools console it pollutes the warnings about that. I would not like to turn of all warnings, but those are not really useful for me
Question
How to suppress Chrome DevTools warning: ‘DevTools failed to load SourceMap: Could not load content for. ‘?
4 Answers 4
(using a /regexp/ with \s seems to be the only working method of specifying strings with spaces)
If you open DevTools (F12) then look for the cog «Preferences» top/right you can disable «Enable JavaScript source maps» under the Sources section by un-checking that option.
This solution is only if you don’t want to use that particular extension (which is causing the issue) on your site or to remove the addon from your browser.
Click on the link that is printedn in the console log. the link starts with «chrome-extension», it will take you to the extension’s page, you can find the name in the address bar
Go to the extensions( Chrome menu > More tools > Extensions ). You can either remove it from the browser or restrict the access by changing the site access to On click choosing from the options of the extension as below.
