DevTools не удалось проанализировать SourceMap

Я пытаюсь заставить проект Webpack иметь файл исходной карты.

Я, наконец, получил настройки правильно, чтобы он это сделал, но теперь я получаю эту ошибку:

DevTools не удалось проанализировать SourceMap: http://MyServer/MyApp/bundle.js.map

Я перехожу к указанному URL-адресу, и я нахожу json файл с этими свойствами:

версия - Установите значение 3
sources - очень длинный массив строк, которые, как представляется, являются способами webpack для моих файлов.
names - очень длинный массив строк, которые кажутся случайными переменными и функциями.
отображения - очень длинная строка, казалось бы, случайных капитолийских букв и запятых.
file - установить на bundle.js
sourcesContent - Очень длинный массив строк (более 10 миллионов символов). Весь исходный код.
sourceRoot - установить пустую строку

Все кажется действительным json. К сожалению, Chrome не дает никакой причины, почему он не смог проанализировать исходную карту.

Есть ли способ заставить Chrome сказать, почему ему не удалось выполнить синтаксический анализ исходной карты?

Или, если это не так, кто-нибудь знает, почему моя исходная карта потерпит неудачу? (Мой код слишком большой для публикации, но вот мой webpack.config.js и мои файлы package.json.)

ПРИМЕЧАНИЯ:

Я пробовал это с помощью webpack 2.2.1, webpack 2.3.2 и webpack 2.6.1.
Исходные карты отлично работают в IE 11 и Firefox.
Если я устанавливаю исходные карты, то они отлично работают в Chrome DevTools, но тогда мой пакет bundle.js идет с 3 МБ (уже слишком большой) до 16 МБ (слишком большой).
Я установил "Включить исходные карты JavaScript" в настройках (и в CSS тоже).
Я пробовал использовать Chrome Canary, но у него была такая же проблема.
Я хостинг в IIS.

Ответ 1

Недавно Chrome добавила поддержку исходных карт в инструменты разработчика. Если вы перейдете к настройкам на панели инструментов Chrome, вы можете увидеть следующие две опции.

и в источниках

Отключено Enable javaScript source map и Enable CSS Source maps..

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

Ответ 2

По своему опыту я бы не ожидал, что клиент скажет вам, почему он не может проанализировать SourceMap (хотя это было бы неплохо). У меня возникли проблемы с некоторыми инструментами, которые не в состоянии анализировать большие исходные карты (возможно, из-за ограничений памяти), и, учитывая ваш большой размер активов, я бы сначала посмотрел на это.

Webpack поддерживает несколько различных значений для devtool конфигурации devtool, и некоторые из них менее devtool, чем значения по умолчанию. Вы пробовали, например, 'cheap-module-source-map'? Получение только номеров строк (без столбцов) является хорошим компромиссом для полезной исходной карты IMO.

Но это, вероятно, поможет вам уменьшить размер активов. Варианты разделения кода в Webpack и управления "чанками" упрощают разделение кода на несколько файлов, которые загружаются асинхронно во время выполнения. В этом случае у вас будет два или более файлов JS, и у каждого будет своя собственная карта источника, поэтому браузер больше не будет задыхаться, пытаясь обработать один большой файл.

Ответ 3

Вы пытались скачать расширение Vue.js devtools?

Или установить через npm install vue-devtools.

Затем убедитесь, что вы отключили флажок "Включить исходные карты JavaScript" в браузере Chromium. Оба эти действия удалили ошибку SourceMap из консоли для меня.

Это должно выглядеть так: