Для чего нужны файлы .map в Bootstrap 3.x?

443

Есть два файла, включенные в CSS папке с расширениями .map. Они есть:

bootstrap-theme.css.map
bootstrap.css.map

Они выглядят как минифицированные файлы, но я не знаю, для чего они.

twitter-bootstrap-3 source-maps wetjosh
источник

Ответы:

448

Из работы с препроцессорами CSS в Chrome DevTools :

Многие разработчики генерируют таблицы стилей CSS с использованием препроцессора CSS, такого как Sass, Less или Stylus. Поскольку файлы CSS генерируются, редактирование файлов CSS напрямую не так полезно.

Для препроцессоров, которые поддерживают исходные карты CSS, DevTools позволяет редактировать исходные файлы препроцессора в режиме реального времени на панели «Источники» и просматривать результаты, не покидая DevTools или не обновляя страницу. При проверке элемента, стили которого предоставляются сгенерированным файлом CSS, на панели «Элементы» отображается ссылка на исходный исходный файл, а не на сгенерированный файл .css.

Стив Янсен
источник
11
Этот ответ объясняет, что они используются вместе с препроцессорами CSS - то, что я еще не исследовал много. Спасибо
wetjosh
21
Звучит так, будто они являются аналогичными для отладки символов в языке программирования, не так ли?
Крис Симмонс,
1
я получаю ошибку js, поэтому я сделал поддельный файл в этом каталоге, чтобы ошибка не отображалась.
3
@IssaFarax Вы можете отключить загрузку исходных карт через настройки инструментов ChromeDev. Откройте DevTools> Нажмите на механизм настройки> Снимите флажок Включить (JavaScript | CSS) исходные карты
Джайлс Уэллс
Вы также можете ref: stackoverflow.com/questions/21766880/…
Vivek Panday
173

Если вы просто хотите избавиться от ошибки, вы также можете удалить эту строку в bootstrap.css:

/*# sourceMappingURL=bootstrap.css.map */
LeonardChallis
источник
52
Или просто хеш, #и он превратится в простой комментарий, если вы захотите вернуться позже.
Givanse
1
Если мы удалим это из bootstrap.css, это вызовет какие-либо ошибки или что-то в этом роде?
Гарри Сурен
4
Нет, это не так. Это только затрудняет отладку.
Gfra54
1
Вы не хотите этого для производственной среды, поэтому скомпилируйте его соответствующим образом ( gulp --productionесли вы используете gulp, это не будет включать эту строку sourceMapping) и исключите файлы * .map из ваших загрузок на рабочий сервер.
Курвиан Винс
2
Какая ошибка? Вопрос не затрагивает ошибку.
bluenote10
70

Это исходные карты. Предоставьте их вместе со сжатыми исходными файлами; Инструменты разработчика, такие как Firefox и Chrome, будут использовать их для разрешения отладки, как если бы код не был сжат.

davidism
источник
9

Начальная загрузка css может быть сгенерирована Less. Основное назначение файла карты - связать исходный код CSS с меньшим количеством исходного кода в инструменте chrome dev. Как мы привыкли делать. Если мы проверяем элемент в инструменте Chrome Dev. Вы можете увидеть исходный код CSS. Но если включить файл карты на странице с файлом начальной загрузки css. Вы можете увидеть меньше кода, который применяется к стилю элемента, который вы хотите проверить.

Joe.wang
источник
8

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

Эта статья объясняет исходные карты, используя практический подход.

Марсио Маццукато
источник
5

Что такое файл карты CSS?

Это файл формата JSON, который связывает CSS-файл с его исходными файлами, обычно это файлы, записанные в препроцессорах (т. Е. Less, Sass, Stylus и т. Д.), Это делается для прямой отладки исходных файлов из Интернета. браузер.

Что такое CSS препроцессор? Примеры: Sass, Less, Stylus

Это инструмент генератора CSS, который использует возможности программирования для надежной и быстрой генерации CSS.

Шади Намроути
источник
1
Должны ли они рассматриваться как текстовые файлы или потоки байтов? Должны ли они закончиться \n?
Аарон Франке
@AaronFranke Это текстовые файлы. Я предлагаю вам скопировать содержимое файла .map и вставить его на jsonblob.com, чтобы увидеть пары ключ / значение JSON
Шади Намрути
-1

Если вам интересно, почему вам не хватает файлов карты с Bootstrap 3.x; убедитесь, что у вас установлена ​​правильная версия. Мне пришлось загрузить 3.3.7, чтобы получить желаемый эффект, который я искал.

TheJoe
источник