Map файлы для чего нужны
Обновлено: 06.07.2024
Есть два файла, включенные в CSS папке с расширениями .map. Они есть:
Они выглядят как минифицированные файлы, но я не знаю, для чего они.
Этот ответ объясняет, что они используются вместе с препроцессорами CSS - то, что я еще не исследовал много. Спасибо Звучит так, будто они являются аналогичными для отладки символов в языке программирования, не так ли? я получаю ошибку js, поэтому я сделал поддельный файл в этом каталоге, чтобы ошибка не отображалась. @IssaFarax Вы можете отключить загрузку исходных карт через настройки инструментов ChromeDev. Откройте DevTools> Нажмите на механизм настройки> Снимите флажок Включить (JavaScript | CSS) исходные картыМногие разработчики генерируют таблицы стилей CSS с использованием препроцессора CSS, такого как Sass, Less или Stylus. Поскольку файлы CSS генерируются, редактирование файлов CSS напрямую не так полезно.
Для препроцессоров, которые поддерживают исходные карты CSS, DevTools позволяет редактировать исходные файлы препроцессора в режиме реального времени на панели «Источники» и просматривать результаты, не покидая DevTools или не обновляя страницу. При проверке элемента, стили которого предоставляются сгенерированным файлом CSS, на панели «Элементы» отображается ссылка на исходный исходный файл, а не на сгенерированный файл .css.
Если вы просто хотите избавиться от ошибки, вы также можете удалить эту строку в bootstrap.css :
Если мы удалим это из bootstrap.css , это вызовет какие-либо ошибки или что-то в этом роде? Вы не хотите этого для производственной среды, поэтому скомпилируйте его соответствующим образом ( gulp --production если вы используете gulp, это не будет включать эту строку sourceMapping) и исключите файлы * .map из ваших загрузок на рабочий сервер.Это исходные карты. Предоставьте их вместе со сжатыми исходными файлами; Инструменты разработчика, такие как Firefox и Chrome, будут использовать их для разрешения отладки, как если бы код не был сжат.
Начальная загрузка css может быть сгенерирована Less. Основное назначение файла карты - связать исходный код CSS с меньшим количеством исходного кода в инструменте chrome dev. Как мы привыкли делать. Если мы проверяем элемент в инструменте Chrome Dev. Вы можете увидеть исходный код CSS. Но если включить файл карты на странице с файлом начальной загрузки css. Вы можете увидеть меньше кода, который применяется к стилю элемента, который вы хотите проверить.
Вы когда-нибудь хотели, чтобы ваш клиентский код мог быть читаемым и, что более важно, отлаживаемым даже после того, как вы скомбинировали и минимизировали его, не влияя на производительность? Ну, теперь вы можете с помощью магии исходных карт.
Читайте также: