DevTools не удалось загрузить SourceMap: не удалось загрузить содержимое для расширения chrome

Question

DevTools не удалось загрузить SourceMap: не удалось загрузить содержимое для расширения chrome

Я пытаюсь отобразить изображение, выбранное на локальном компьютере, и мне нужно местоположение этого изображения для функции javascript. Я недавно начал изучать javascript.

Я столкнулся с этой ошибкой и не могу узнать местоположение изображения. Для получения местоположения изображения я попытался использовать console.log, но ничего не вернулось.

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

Вот HTML-код:

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

Консольный вывод:

Вот предупреждение:

DevTools не удалось загрузить SourceMap: не удалось загрузить содержимое для chrome-extension://alplpnakfeabeiebipdmaenpmbgknjce/include.preload.js.map: ошибка HTTP: код состояния 404, net::ERR_UNKNOWN_URL_SCHEME

365

javascript html

Источник

user11510013 21 апр '20 в 12:16

23 ответа

Другие вопросы по тегам javascript html

user13411665 26 апр '20 в 18:02 2020-04-26 18:02 · Answer 1 · 2020-04-26 18:02

Это потому, что Chrome добавил поддержку исходных карт.

Зайдите в инструменты разработчика (F12 в браузере), затем выберите три точки в правом верхнем углу и перейдите в Настройки.

Затем найдите " Источники" и отключите параметры: "Включить исходные карты javascript" "Включить исходные карты CSS"

Если вы сделаете это, это избавит от предупреждений. Это не имеет ничего общего с вашим кодом. Проверьте инструменты разработчика на других страницах, и вы увидите такое же предупреждение.

user3000749 02 мар '21 в 17:06 2021-03-02 17:06 · Answer 2 · 2021-03-02 17:06

Перейдите в инструменты разработчика -> настройки -> консоль -> отметьте только выбранный контекст. Предупреждения исчезнут.

158

Источник

user3000749 02 мар '21 в 17:06

user545064 10 мар '21 в 20:21 2021-03-10 20:21 · Answer 3 · 2021-03-10 20:21

Исправление сообщений об ошибках «SourceMap» в консоли средств разработки, вызванных расширениями Chrome:

Примеры, вызванные расширениями McAffe:

DevTools не удалось загрузить SourceMap: не удалось загрузить содержимое для chrome-extension://klekeajafkkpokaofllcadenjdckhinm/sourceMap/content.map: ошибка HTTP: код состояния 404, net::ERR_UNKNOWN_URL_SCHEME

DevTools не удалось загрузить SourceMap: не удалось загрузить содержимое для chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: ошибка HTTP: код состояния 404, net::ERR_UNKNOWN_URL_SCHEME

DevTools не удалось загрузить SourceMap: не удалось загрузить контент для chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: ошибка HTTP: код состояния 404, net::ERR_UNKNOWN_URL_SCHEME

Если вы разрабатываете, вам необходимо установить флажки «Включить исходные карты javascript» и «Включить исходные карты CSS», чтобы вы могли видеть исходный код в инструментах разработчика Chrome. Снятие флажка лишает вас возможности отлаживать исходный код. Это как выключить пожарную сигнализацию вместо того, чтобы потушить пожар. Вы не хотите этого делать.

Вместо этого вы хотите найти расширения, которые вызывают сообщения, и отключить их. Вот как это сделать:

Перейдите к трем точкам в правом верхнем углу Chrome.
Перейдите в «Дополнительные инструменты» и нажмите «Расширения».
Делайте это для одного расширения за раз, пока в консоли не исчезнут ошибки SourceMap:
1. Выключите расширение, сдвинув переключатель влево.
2. Перезагрузите страницу, на которой вы использовали средства разработки.
3. Проверьте, исчезло ли какое-либо сообщение об ошибке «SourceMap».
  1. Если что-то и произошло, то это расширение вызывало эти сообщения.
  2. В противном случае это расширение можно будет снова включить.

После определения того, какие расширения вызвали проблему:

Если вам это нужно, обратитесь к производителю, чтобы они исправили проблему.
В противном случае удалите расширение.

user1849962 16 май '21 в 19:21 2021-05-16 19:21 · Answer 4 · 2021-05-16 19:21

Я наткнулся на этот вопрос SO после обнаружения множества ошибок исходной карты в консоли для браузера Edge . (Кажется, я давно отключил предупреждения в браузере Chrome).

Для меня это означало сначала понять, что такое исходная карта; пожалуйста, обратитесь к ответу Macro Mazzon, чтобы понять это. Так как это хорошая идея, это был просто случай узнать, как их включить.

Это так же просто, как добавить эту строку в ваш webpack.config.js -

      module.exports = {
    devtool: "source-map",
}

Теперь, когда Edge смог обнаружить исходную карту, ошибки исчезнут.

Приносим извинения, если этот ответ оскорбляет чей-то разум, но, возможно, кто-то из вас прочитает это, так же как и я.

user1545118 25 авг '20 в 15:32 2020-08-25 15:32 · Answer 5 · 2020-08-25 15:32

В файле include.prepload.js будет строка, подобная приведенной ниже. наверное как последняя строчка.

//# sourceMappingURL=include.prepload.js.map

Удалите его, и ошибка исчезнет.

54

Источник

user1545118 25 авг '20 в 15:32

user7024301 06 ноя '20 в 01:47 2020-11-06 01:47 · Answer 6 · 2020-11-06 01:47

Для меня проблема была вызвана не самим разработанным приложением, а расширением Chrome: React Developer Tool. Я частично решил эту проблему, щелкнув правой кнопкой мыши значок расширения на панели инструментов, выбрав "Управление расширением" (я свободно перевожу здесь текст меню, поскольку язык моего браузера - бразильский португальский), а затем включил "Разрешить доступ к URL-адресам файлов". Но эта мера устранила лишь некоторые предупреждения.

Я обнаружил проблемы в репозитории реакции, который предполагает, что причиной является ошибка в их расширении, и в ближайшее время планируется исправить - см. Проблемы 20091 и 20075.

Вы можете подтвердить, что это связано с расширением, открыв свое приложение на анонимной вкладке без включенных расширений.

user9836813 09 авг '22 в 21:53 2022-08-09 21:53 · Answer 7 · 2022-08-09 21:53

Chrome изменил пользовательский интерфейс в 2022 году, так что это новая версия ответа, получившего наибольшее количество голосов.

Откройте инструменты разработчика (нажмите F12или Option+ Command+ J)
Выберите шестеренку вверху. В этой области есть две шестерни, поэтому обязательно выберите ту, что вверху, вверху.
Найдите раздел «Источники» .
Снимите флажок «Включить исходные карты JavaScript»

Проверьте, получилось ли!

user6309925 13 янв '21 в 21:08 2021-01-13 21:08 · Answer 8 · 2021-01-13 21:08

Правильно: это не имеет ничего общего с вашим кодом. Я нашел два действительных решения для этого предупреждения (а не просто его отключение). Чтобы лучше понять, что такое SourceMap, я предлагаю вам проверить этот ответ , где он объясняет, как это помогает вам отлаживать:

Файлы .map предназначены для файлов js и css (а теперь и ts тоже), которые были уменьшены. Они называются SourceMaps. Когда вы уменьшаете файл, например файл angular.js, он берет тысячи строк красивого кода и превращает его всего в несколько строк уродливого кода. Надеюсь, когда вы отправляете свой код в рабочую среду, вы используете минимизированный код вместо полной неминифицированной версии. Когда ваше приложение находится в рабочей среде и имеет ошибку, карта источников поможет принять ваш уродливый файл и позволит вам увидеть исходную версию кода. Если бы у вас не было исходной карты, то любая ошибка в лучшем случае показалась бы загадочной.

Первое решение: очевидно, мистер Хилис был самым близким: вы должны добавить файл .map, и есть несколько инструментов, которые помогут вам с этой проблемой (например, Grunt , Gulp и закрытие Google , цитируя ответ). В противном случае вы можете скачать .map файл из официальных сайтов , таких как Bootstrap, JQuery, шрифт-устрашающий , преднагрузка и так далее .. (возможно устанавливать такие вещи , как или Swiper по НОЙ команде в случайной папке и скопировать только файл .map в ваша папка назначения js / css)
Второе решение (то, что я использовал): добавить исходные файлы с помощью CDN ( здесь все преимущества использования CDN). Используя сеть доставки контента (CDN), вы можете просто добавить ссылку cdn вместо пути к вашей папке. Вы можете найти cdn на официальных сайтах ( Bootstrap, jquery, Попперpopper и т. Д.), Или вы можете легко поиск на некоторых сайтах, таких как cloudflare, выполнитьcdnjs и т. Д.

user12725381 30 окт '20 в 06:29 2020-10-30 06:29 · Answer 9 · 2020-10-30 06:29

Расширения без достаточного разрешения на Chrome могут вызывать эти предупреждения, например, для инструментов разработчика React, проверьте, решает ли следующая процедура вашу проблему:

Щелкните правой кнопкой мыши значок расширения.

Или же

Перейти к расширениям.
Щелкните три точки в строке инструмента разработчика React.

Затем выберите "это может читать и записывать данные сайта". В списке вы должны увидеть 3 варианта, выберите один, который достаточно строг, в зависимости от того, насколько вы доверяете расширению, а также удовлетворяет потребности расширений.

user3865138 19 авг '20 в 17:58 2020-08-19 17:58 · Answer 10 · 2020-08-19 17:58

Я ценю, что это часть ваших расширений, но в наши дни я вижу это сообщение в самых разных местах, и я его ненавижу: как я его исправил (РЕДАКТИРОВАТЬ: это исправление, похоже, также значительно ускоряет работу браузера) было добавлением мертвого файл

физически создайте файл, который он хочет \ там, где он хочет, как пустой файл (например: "popper.min.js.map")

поместите это в пустой файл

{
 "version": 1,
 "mappings": "",
 "sources": [],
 "names": [],
 "file": "popper.min.js"
}

убедись, что "file": "*******" в содержании пустого файла СООТВЕТСТВУЕТ названию вашего файла ******.map (без слова ".map")

(РЕДАКТИРОВАТЬ: я подозреваю, что вы могли бы физически добавить этот метод мертвого файла в аддон самостоятельно)

user13338943 27 окт '20 в 15:02 2020-10-27 15:02 · Answer 11 · 2020-10-27 15:02

Я не думаю, что полученные вами предупреждения имеют отношение к делу. У меня были такие же предупреждения, которые оказались расширением Chrome React Dev Tools. Убрал расширение и ошибки исчезли.

5

Источник

user13338943 27 окт '20 в 15:02

user17561543 04 дек '22 в 20:14 2022-12-04 20:14 · Answer 12 · 2022-12-04 20:14

У меня такая же проблема. Я попытался отключить расширения одно за другим, чтобы проверить это, и, наконец, понял, что я включил, что вызывало эту проблему. Чтобы удалить эту ошибку, я выполнил шаг ниже:

Three dots(в правом верхнем углу).
НажмитеMore tools-->extensions.
ОтключитьAdblock.
Reloadстраница.

И это должно работать сейчас.

user1066234 17 янв '23 в 18:31 2023-01-17 18:31 · Answer 13 · 2023-01-17 18:31

DevTools не удалось загрузить исходную карту: не удалось загрузить содержимое для chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/browser-polyfill.js.map: системная ошибка: net::ERR_FILE_NOT_FOUND

Отключите расширение Chrome «Adblock Plus — бесплатный блокировщик рекламы». https://chrome.google.com/webstore/detail/adblock-plus-free-ad-bloc/cfhdojbkjhnklbpkdaibdccddilifddb

В последнее время эта ошибка вызвана расширением.

user414068 29 янв '22 в 21:30 2022-01-29 21:30 · Answer 14 · 2022-01-29 21:30

Для меня предупреждения были вызваны расширением Selenium IDE для Chrome. Эти предупреждения появлялись в консоли при каждой загрузке страницы:

      DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/atoms.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/polyfills.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/escape.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/playback.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/record.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Поскольку Selenium IDE уже настроен на чтение данных сайта на всех сайтах, я удалил его. (Я прочитал здесь еще один комментарий, что вы можете попробовать включить больше разрешений для расширения вместо его удаления.) В моем случае удаление Selenium IDE (расширение Chrome) избавило от предупреждений.

user15203491 17 янв '22 в 12:36 2022-01-17 12:36 · Answer 15 · 2022-01-17 12:36

У вас просто отсутствуют файлы.

Зайдите на этот сайт https://www.cdnpkg.com/ скачайте то, что вам нужно и скопируйте в нужную папку.

3

Источник

user15203491 17 янв '22 в 12:36

user11544084 19 июл '21 в 22:15 2021-07-19 22:15 · Answer 16 · 2021-07-19 22:15

Также можно добавить отсутствующий файл вместе с другими библиотеками .js в ту же папку (нет необходимости ссылаться на .map в теге .html файла). У меня была такая же ошибка при попытке кодирования в Backbone.

Проблемным файлом был backbone-min.js, а строка, в которой возникла ошибка, была sourceMappingURL=backbone-min.map

После скачивания недостающего файла (ссылка отсюда ) ошибка исчезла.

user5555938 16 сен '22 в 21:29 2022-09-16 21:29 · Answer 17 · 2022-09-16 21:29

Проблемы с отладкой и исходными картами в веб-браузерах

Надеюсь, это проясняет технические аспекты проблемы... знание того, как все работает, помогает некоторым :)

Эта ошибка браузера означает, что у него есть скомпилированная версия вашего JavaScript в промежуточном файле исходной карты , созданном им или какой-либо третьей стороной, которая теперь необходима при отладке того же скрипта в «devtools» в вашем веб-браузере.

Это может произойти, если ваш скрипт дает сбой (или, в вашем случае, пытается получить источник изображения, скрытый в коде исходной карты, который создал скрипт), но чья ошибка скрипта связана с некоторым JavaScript, созданным из исходного файла исходной карты, который теперь не может быть найден для отладки той же ошибки. Так что это ошибка об ошибке, отсутствующий файл отладки создает новую ошибку. (сумасшедший, да?)

Эта ошибка, вероятно, исходит от расширения в веб-браузере и сообщает, что оно сгенерировало ошибку сценария, записанную в окне console.log devtools (нажмите F12 в браузере). Ошибка, вероятно, связана с расширением (а не с вашим кодом), в котором говорится, что у него есть некоторый код, который содержит адрес файла исходной карты, к которому он не может получить доступ, имеет неверный адрес URI/URL, заблокирован или отсутствует.

Этот файл исходной карты нужен браузеру только в том случае, если разработчику, использующему devtools, потребуется снова отладить исходный скрипт.

Между прочим, это файл, который переводит или транспилирует код с одного языка на другой. Часто это файл, который браузер использует для перевода этого исходного кода в дочерний скрипт, такой как JavaScript/ECMAScript, или когда ему нужно сделать обратное и воссоздать исходный файл из дочернего скрипта. В большинстве случаев этот файл вообще не нужен, так как сторонняя программа уже скомпилировала или транспилировала исходный код в дочерний скрипт для браузера. Например, разработчики, которым нравится TypeScript, используют его для создания JavaScript. Этот исходный код преобразуется в JavaScript, чтобы обработчик сценариев браузера мог его запустить. URI/URL этогоsourcemapфайл обычно находится в верхней части файла кода javaScript или приложения, скомпилированного в формате, подобном//#....

Когда этот промежуточный файл транспилируетотсутствует или заблокирован по соображениям безопасности в веб-браузере, приложению обычно все равно, если ему не нужен исходный файл для отладки дочернего сценария с использованием этого исходного файла. В этом случае он будет жаловаться, когда почувствует, что ему нужен этот файл, и не может его найти, поскольку он использует его для воссоздания исходного файла для кода, работающего в браузере, при отладке скрипта, чтобы позволить разработчику отлаживать исходный исходный код. . Когда он не может его найти, это означает, что любой разработчик, пытающийся его отладить, не сможет этого сделать и застрянет только на скомпилированном коде. Поэтому можно безопасно отключить эти ошибки различными способами, упомянутыми в этом посте. Это не должно влиять на ваши собственные скрипты, если оно подключено к расширению. Даже если это связано с вашими собственными скриптами, маловероятно, что оно вам понадобится, если только вы не планируете запускать отладку из devtools.

user13664939 31 окт '23 в 14:52 2023-10-31 14:52 · Answer 18 · 2023-10-31 14:52

TL;DR: Карты исходного кода призваны улучшить процесс веб-отладки. Хотя это особенно полезно при отладке фреймворков JavaScript, если вы хотите отключить его, вы можете сделать это следующим образом.

Chrome, Opera, Edge и т. д. Браузеры Chrome.

Инструменты разработчика > F1+Shift ( Настройки настроек разработчика )

Снимите флажок «Включить карты исходного кода JavaScript».
Снимите флажок «Включить исходные карты CSS».

Согласно Что такое исходные карты?

Необходимость исходных карт

В старые добрые времена мы создавали веб-приложения на чистом HTML,CSS и JavaScript и размещали те же файлы в Интернете.

Однако, поскольку в настоящее время мы создаем более сложные веб-приложения, ваш рабочий процесс разработки может включать использование различных инструментов. Этим инструментам требуется процесс сборки для преобразования вашего кода в стандартные HTML,JavaScript и CSS, понятные браузерам. Кроме того, для оптимизации производительности общепринятой практикой является сжатие (например, минимизация и искажение JavaScript) и объединение этих файлов, уменьшая их размер и делая их более эффективными для Интернета.

Однако такая оптимизация может усложнить отладку. Сжатый код, в котором все содержится в одной строке, и более короткие имена переменных могут затруднить определение источника проблемы. Вот тут-то и приходят на помощь исходные карты — они отображают ваш скомпилированный код обратно в исходный код.

Генерация исходных карт

Исходные карты — это файлы, имена которых заканчиваются на.map(например, >example.min.js.mapиstyles.css.map). Их можно создать с помощью большинства инструментов сборки, например Vite , webpack , Rollup , Parcel , esbuild и других.

Некоторые инструменты включают исходные карты по умолчанию, тогда как другим может потребоваться дополнительная настройка для их создания.
       /* Example configuration: vite.config.js */
/* https://vitejs.dev/config/ */

export default defineConfig({
  build: {
    sourcemap: true, // enable production source maps
  },
  css: {
    devSourcemap: true // enable CSS source maps during development
  }
})
Понимание исходной карты

Эти файлы исходных карт содержат важную информацию о том, как скомпилированный код сопоставляется с исходным кодом, что позволяет разработчикам с легкостью выполнять отладку. Вот пример исходной карты.
       {
"mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
"sources": ["src/script.ts"],
"sourcesContent": ["document.querySelector('button')..."],
"names": ["document","querySelector", ...],
"version": 3,
"file": "example.min.js.map"
}

https://web.dev/articles/source-maps

user13668203 08 мар '23 в 16:39 2023-03-08 16:39 · Answer 19 · 2023-03-08 16:39

Отключите расширение AdBlock (тот, что с белой рукой на красном фоне), и Chrome должен достаточно хорошо загружать все исходные карты.

Но НЕ отключайте:

Параметры карт источников JS.
Параметры карт источников CSS.

1

Источник

user13668203 08 мар '23 в 16:39

21 дек '20 в 03:17 2020-12-21 03:17 · Answer 20 · 2020-12-21 03:17

Вам нужно открыть Chrome в режиме разработчика: выберите больше инструментов, затем расширений и выберите режим разработчика.

1

Источник

21 дек '20 в 03:17

user11598354 06 дек '22 в 13:55 2022-12-06 13:55 · Answer 21 · 2022-12-06 13:55

В моем случае я сделал глупую ошибку, добавив bootstrap.min.js вместо bootstrap.bundel.js :)

0

Источник

user11598354 06 дек '22 в 13:55

user5458425 20 окт '20 в 22:58 2020-10-20 22:58 · Answer 22 · 2020-10-20 22:58

Я решил это, очистив данные приложения.

Документация Cypress допускает, что данные приложения могут быть повреждены:

Cypress поддерживает некоторые локальные данные приложений, чтобы сохранить пользовательские настройки и ускорить запуск. Иногда эти данные могут быть повреждены. Вы можете решить возникшую проблему, очистив данные этого приложения.

Открыть Cypress через cypress open
Идти к File -> View App Data
Это приведет вас в каталог в вашей файловой системе, где хранятся данные вашего приложения. Если вы не можете открыть Cypress, найдите в своей файловой системе каталог с именем cy чье содержимое должно выглядеть примерно так:

производство
            all.log
            браузерах
            Связки
            кэш
            проектов
            прокси
            state.json

Удалить все в cy папка
Закройте Cypress и откройте его снова

Источник: https://docs.cypress.io/guides/references/troubleshooting.html#To-clear-App-Data

user4718253 05 дек '22 в 11:45 2022-12-05 11:45 · Answer 23 · 2022-12-05 11:45

В моем случае это былоJSON Viewerрасширение, которое блокировало загрузку файлов исходной карты

0

Источник

user4718253 05 дек '22 в 11:45