Файл css map что это
Если вы используете Sass в своих интерфейсных проектах, скорее всего, ваши партиалы разделены в четкой и логичной манере на основе надежной архитектуры Sass .
В таких случаях отладка скомпилированного CSS может быть как хлопотной, так и длительной. Sass предоставляет флаг для включения номеров строк ( --line-numbers ), который включает комментарии (как --line-numbers ниже) в вашем CSS.
Хотя это полезно, вам все равно придется отследить ошибку в вашем CSS обратно в исходный файл вручную. И редактирование CSS в браузере с использованием инструментов разработчика не может быть сохранено, поскольку оно будет перезаписано следующей компиляцией Sass.
Итак, как мы можем сделать этот процесс проще?
Я собираюсь показать вам, как использовать исходные карты в сочетании с рабочими пространствами Chrome, чтобы вы могли отлаживать и редактировать Sass из браузера.
Создание и использование Source Maps для css и js в GULP 4
Хотелось бы в двух словах рассказать, как настроить Source Maps для GULP 4, но не получится вырвать из контекста просто пару строк кода, поэтому разобью статью на 2 части. Первая будет с базовым кодом для Source Maps, а во второй части будет куча кода из рабочего проекта.
Source Maps нужны для проектов, где происходит сборка нескольких файлов в один, например, компиляция файлов scss в один файл main.min.css или конкатенация js-файлов в один scripts.min.js . Карты источников нужны для того, чтобы быстро вносить правки, и не искать в каком файле задано определенное правило или функция, особенно когда для сборки используются десятки файлов или различных библиотек.
Так будет выглядеть в инспекторе код без Source Maps:
Так будет выглядеть код с использованием Source Maps:
И по итогу, если нам нужно увеличить отступ снизу у элемента .icon , то нам не нужно искать по всем файлам scss где задано это правило, а с помощью карты источников видим, что данное правило указано в файле _general.scss на 44 строке.
Если вам это не нужно, то дальше можно не читать.
Включение исходных карт с помощью Compass
Если вы используете Compass, вы можете запустить следующую команду:
Или вы можете добавить sass_options = true> в файл config.rb и запустить config.rb compass watch как обычно.
для чего используются файлы .map в Bootstrap 3.x?
В папку CSS включены два файла с расширениями .map. Они являются:
Они кажутся уменьшенными файлами, но я не знаю, для чего они нужны.
Я, кажется, не могу найти никакого объяснения того, для чего используются линзы в практических примерах. Этот короткий абзац со страницы хакинга-самый близкий, который я нашел: Эти модули обеспечивают удобный способ доступа и обновления элементов структуры. Он очень похож на Data.Accessors, но.
Многие разработчики создают таблицы стилей CSS с помощью препроцессора CSS, такого как Sass, Less или Stylus. Поскольку файлы CSS генерируются, прямое редактирование файлов CSS не так полезно.
Для препроцессоров, поддерживающих CSS исходные карты, DevTools позволяет редактировать исходные файлы препроцессора в режиме реального времени на панели "Источники" и просматривать результаты без необходимости покидать DevTools или обновлять страницу. При проверке элемента, стили которого заданы сгенерированным файлом CSS, на панели Элементы отображается ссылка на исходный исходный файл, а не на сгенерированный файл .css.
Если вы просто хотите избавиться от ошибки, вы также можете удалить эту строку в bootstrap.css :
Это исходные карты. Предоставьте их вместе со сжатыми исходными файлами; инструменты разработчика, такие как инструменты в Firefox и Chrome, будут использовать их для отладки, как если бы код не был сжат.
Bootstrap css может быть сгенерирован меньше. Основная цель файла карты-связать исходный код css с меньшим исходным кодом в инструменте chrome dev. Как мы обычно делали .If, мы проверяем элемент в инструменте chrome dev. вы можете увидеть исходный код css. Но если включить файл карты на страницу с файлом bootstrap css. вы можете увидеть меньше кода, который применяется к стилю элемента, который вы хотите проверить.
Для тех, кто пришел сюда в поисках этих файлов (как и я), вы обычно можете найти их, добавив .map в конец URL:
Обязательно замените версию на любую версию Bootstrap, которую вы используете.
Вы когда-нибудь замечали, что вам хочется, чтобы ваш клиентский код был читаемым и, что более важно, отлаживаемым даже после того, как вы объединили и уменьшили его, не влияя на производительность? Ну, теперь вы можете с помощью магии исходных карт.
В этой статье объясняются исходные карты с использованием практического подхода.
Что такое файл карты CSS?
Это файл формата JSON, который связывает файл CSS с его исходными файлами, обычно это файлы, написанные в препроцессорах (например, Less, Sass, Stylus и т. Д.), Это для того, чтобы выполнить живую отладку исходных файлов из веб-браузера.
Что такое препроцессор CSS? Примеры: Sass, Меньше, Стилус
Это инструмент генератора CSS, который использует силу программирования для создания CSS надежно и быстро.
Я новичок в Windows среде развития. Я вижу много файлов .rc2, используемых там, где выполняется сопоставление некоторых констант типа MACRO со строками. Q1. почему используются эти файлы .rc2? Может кто-нибудь дать мне начало в этом деле?
Теперь я знаю, что Bootstrap 3.x вышел, и мне следует перейти к 3.x. Но это запрос на изменение, который появился на существующем сайте, использующем Bootstrap 2.3.1. Вот чего я хочу добиться: Я использую 3 расположение колонок в 12-колонной сетке Bootstrap как:
Файлы карт (исходные карты) предназначены для удаления ссылок на минифицированный код (css и javascript).
И они в основном используются, чтобы помочь разработчикам отлаживать производственную среду, потому что разработчики обычно используют уменьшенные файлы для производства, что делает невозможной отладку. Файлы карт помогают им снять ссылки с кода, чтобы увидеть, как выглядел исходный файл.
Похожие вопросы:
Я знаю, что бинормаль ортогональна как нормали поверхности, так и касательной в любой точке плоскости, но для чего именно они используются?
Я изучаю C++ и наткнулся на те файлы*. lib, которые, очевидно, используются компоновщиком. Мне пришлось установить некоторые дополнительные зависимости для OpenGL. Для чего именно используются.
В настоящее время я работаю над проектом iOS с использованием Unity framework. Когда я экспортирую проект Xcode из Unity, то экспортируется целая куча файлов. Помимо некоторых исходных файлов, есть.
Я, кажется, не могу найти никакого объяснения того, для чего используются линзы в практических примерах. Этот короткий абзац со страницы хакинга-самый близкий, который я нашел: Эти модули.
Я новичок в Windows среде развития. Я вижу много файлов .rc2, используемых там, где выполняется сопоставление некоторых констант типа MACRO со строками. Q1. почему используются эти файлы .rc2? Может.
Теперь я знаю, что Bootstrap 3.x вышел, и мне следует перейти к 3.x. Но это запрос на изменение, который появился на существующем сайте, использующем Bootstrap 2.3.1. Вот чего я хочу добиться: Я.
Они могут быть размещены только на именах методов. Как они используются и для чего?
Я новичок в Джипстере. Я хотел бы знать, может ли кто-нибудь объяснить мне, для чего используются роли Jhipster? Дают ли они определенным пользователям дополнительные разрешения?
Я перенаправил переменную окружения %temp% на свой RAMDISK, чтобы добиться лучшей реакции системы. Однако я обнаружил, что Visual Studio 2017 всегда создает несколько файлов edg***.tmp в папке, и.
Вывод
Исходные карты позволяют избежать хлопот переключения между редактором и инструментами разработчика. Он позволяет вам редактировать исходный SCSS напрямую и мгновенно видеть, как эти изменения выглядят в браузере.
Хотя эта статья посвящена тому, чтобы исходные карты работали в Chrome, вы можете сделать то же самое в Firefox и Safari . Internet Explorer 11 также поддерживает исходные карты, но, похоже, нет никакой информации об использовании исходных карт в этом браузере с Sass, поэтому вам придется попробовать его самостоятельно.
Я надеюсь, что это станет ценным, экономящим время дополнением к вашему рабочему процессу.
Вы когда-нибудь думали, как было бы здорово, если бы слитый в один файл и минифицированный яваскрипт код в production-окружении можено было удобно читать и даже отлаживать без ущерба производительности? Теперь это возможно, если использовать штуку под названием source maps.
Если коротко, то это способ связать минифицированный/объединённый файл с файлами, из которых он получился. Во время сборки для боевого окружения помимо минификации и объединения файлов также генерируется файл-маппер, который содержит информацию об исходных файлах. Когда производится обращение к конкретному месту в минифицированном файле, то производится поиск в маппере, по которому вычисляется строка и символ в исходном файле. Developer Tools (WebKit nightly builds или Google Chrome Canary) умеет парсить этот файл автоматически и прозрачно подменять файлы, как будто ведётся работа с исходными файлами. На момент написания (оригинальной статьи — прим. перев.) Firefox заблокировал развитие поддержки Source Map. Подробнее — на MozillaWiki Source Map.
Пример — правильное определение места в исходном коде
В этом примере можно ткнуть в любом месте textarea правой кнопкой и выбрать пункт «Get original location». При этом будет произведено обращение к файлу-мапперу с передачей строки и номера символа в минифицированном коде, и будет показан соответствующий кусок кода из исходного файла. В консоль будут выведены номер строки и номер символа в исходном файле и другая интересная информация.
Реальное использование
Прежде чем смотреть следующий пример, нужно активировать просмотр source maps в Chrome Canary или WebKit nightly, для этого в свойствах активировать пункт «Enable source maps» (см. скриншот)
Зачем вообще нужны Source Maps?
- CoffeeScript
- ECMAScript 6 и выше
- SASS/LESS и т.п.
- Практически любой язык, который компилируется в JavaScript
Google Web Toolkit (GWT) недавно добавил поддержку Source Maps и Ray Cromwell из GWT сделал отличный скринкаст, показывающий работу Source Map в действии.
Другой пример использует библиотеку Google Traceur, которая позволяет писать на ES6 (ECMAScript 6) и компилировать в ES3-совместимый код. Компилятор Traceur также генерирует source map. Посмотрите на пример использования особенностей ES6 (классов и traits), как если бы они поддерживались браузером нативно. Textarea в примере также позволяет писать ES6-код, который будет компилироваться на лету в ES3 и также будет создаваться файл-маппер.
Пример — можно написать код на ES6 и сразу посмотреть в отладчике
Как это работает?
Единственный пока компилятор/минификатор с поддержкой Source Map — Closure compiler (как при компиляции сгенерировать маппер — написано ниже). При минификации JavaScript будет создан и файл-маппер. Пока Closure compiler не добавляет в конец файла специальный комментарий для Google Chrome Canary dev tools о том, что доступен файл-маппер:
Такой комментарий позволяет браузеру искать нужное место в исходном файле, используя файл-маппер. Если идея использовать странные комментарии вам не нравится, то можно добавить к скомпилированному файлу специальный заголовок:
Как и комментарий, это скажет клиенту, где искать маппер для этого файла. Использование заголовка также позволяет работать с языками, которые не поддерживают однострочные комментарии.
Файл-маппер будет скачан только если включено свойство и открыта консоль. Ну и конечно нужно будет залить исходные файлы, чтобы они были доступны по указанным в маппере путям.
Как сгенерировать файл-маппер?
Как уже говорилось выше, нужен будет Closure compiler для минификаци, склейки и генерации файла-маппера для нужных JavaScript-файлов. Для этого нужно выполнить команду:
Нужные флаги — это --create_source_map и --source_map_format . Последний нужен, т.к. по умолчанию маппер создаётся в формате V2, а нам нужен V3.
Внутреннее устройство Source Map
Чтобы лучше понять Source Map, возьмём для примера небольшой файл-маппер и подробно разберём, как устроена «адресация». Ниже приведён немного модифицированный пример из V3 spec:
- Версию маппера
- Название минифицированного/объединённого файла для production
- sourceRoot позволяет дописывать префикс в путь к исходным файлам
- sources содержит названия исходных файлов
- names содержит все настоящие названия переменных/функций из полученного файла
- а mappings — это соответствующие минифицированные названия
BASE64 VLQ или как сделать Source Map маленьким
- Номер символа в сгенерированном файле
- Исходный файл
- Номер строки в исходном файле
- Номер символа в исходном файле
- Исходное название (если есть)
Потенциальные проблемы с XSSI
В спецификации говорится о возможных проблемах с внедрением XSS при использовании Source Map. Избавиться от неё можно, написав в начале своего map-файла " )]> ", чтобы сделать это js-файл невалидным и вызвать ошибку. WebKit dev tools уже умеет её забарывать:
Как видно, первые три символа обрезаются и производится проверка их на соответствие указанному в спецификации невалидному коду и в этом случае вырезается всё до следующего символа перевода строки.
@sourceURL и displayName в действии: eval и анонимные функции
Эти два соглашения хотя пока и не входят в спецификацию Source Map, но позволяют серьёзно упростить работу с eval и анонимными функциями.
Первый хелпер очень похож на свойство //@ sourceMappingURL и вообще-то в спецификации (V3) упоминается. Включив этот специальный комментарий в код, который потом будет выполнен через eval , можно назвать eval -ы, что даст им более логичные имена при работе в консоли. Ниже приведён простой пример с использованием компилятора CoffeeScript:
Пример — пропущенный через eval код со сгенерированным именем
Другой хелпер позволяет давать имена анонимным функциям при помощи свойства displayName , указанного в контексте этой функции. Попрофилируйте этот пример, чтобы увидеть displayName в действии.
Пример — названия для анонимных функций через displayName (только WebKit NIghtly)
При профилировании будут показываться красивые названия вместо (anonymous function) . Но скорее всего displayName не будет включён в финальную сборку Google Chrome. Хотя надежды ещё остаются, предлагают также переименовать свойство в debugName.
К моменту написания статьи присваивание названий коду, выполненному через eval , поддерживают только Firefox и Google Chrome. Свойство displayName доступно только в ночных сборках Google Chrome.
Вливайтесь
Есть очень длинное обсуждение по поддержке Source Map в CoffeeScript.
У UglifyJS также есть тикет про поддержку Source Map.
Вы можете помочь, если примете участие в обсуждении и выскажете мнение по поводу нужности поддержки Source Map. Чем больше будет инструментов, поддерживающих эту технологию, тем будет проще работать, так что требуйте её поддержки в вашем любимом OpenSource-проекте.
Source Map не идеален
Есть одна неприятность с использованием Source Map для нормальной отладки. Проблема заключается в том, что при попытке проверить значение аргумента или переменной, определённой в контексте исходного файла, контекст ничего не вернёт, т.к. он на самом деле не существует. Нужен какой-то обратный маппинг, чтобы проверить значение соответствующей переменной/аргумента в минифицированном коде и сопоставить его исходному коду.
Проблема решаемая, а при должном внимании к Source Map могут появиться ещё более интересные его применения.
Инструменты и ресурсы
- Nick Fitzgerald сделал форк UglifyJS с поддержкой Source Map
- Paul Irish сделал простое демо Source Map
- Conrad Irwin написал удобный Source Map gem для Ruby-разработчиков
- Что ещё почитать про именование eval и свойство displayName
- Можно посмотреть исходный код Closure Compiler создания Source Map
- Несколько скриншотов и разговор о поддержке GWT source maps
Source Map — мощный инструмент для разработчика. Он позволяет держать production-код максимально сжатым, но при этом позволяет его отлаживать. Так же полезен для начинающих разработчиков, чтобы посмотреть код, написанный опытными разработчиками, чтобы поучиться правильному структурированию и написанию своего кода без необходимости продираться сквозь минифицированный код. Так чего же вы ждёте? Сгенерируйте Source Map для своего проекта!
Есть два файла, включенные в CSS папке с расширениями .map. Они есть:
Они выглядят как минифицированные файлы, но я не знаю, для чего они.
Многие разработчики генерируют таблицы стилей CSS с использованием препроцессора CSS, такого как Sass, Less или Stylus. Поскольку файлы CSS генерируются, редактирование файлов CSS напрямую не так полезно.
Для препроцессоров, которые поддерживают исходные карты CSS, DevTools позволяет редактировать исходные файлы препроцессора в режиме реального времени на панели «Источники» и просматривать результаты, не покидая DevTools или не обновляя страницу. При проверке элемента, стили которого предоставляются сгенерированным файлом CSS, на панели «Элементы» отображается ссылка на исходный исходный файл, а не на сгенерированный файл .css.
Если вы просто хотите избавиться от ошибки, вы также можете удалить эту строку в bootstrap.css :
Это исходные карты. Предоставьте их вместе со сжатыми исходными файлами; Инструменты разработчика, такие как Firefox и Chrome, будут использовать их для разрешения отладки, как если бы код не был сжат.
Начальная загрузка css может быть сгенерирована Less. Основное назначение файла карты — связать исходный код CSS с меньшим количеством исходного кода в инструменте chrome dev. Как мы привыкли делать. Если мы проверяем элемент в инструменте Chrome Dev. Вы можете увидеть исходный код CSS. Но если включить файл карты на странице с файлом начальной загрузки css. Вы можете увидеть меньше кода, который применяется к стилю элемента, который вы хотите проверить.
Вы когда-нибудь хотели, чтобы ваш клиентский код мог быть читаемым и, что более важно, отлаживаемым даже после того, как вы скомбинировали и минимизировали его, не влияя на производительность? Ну, теперь вы можете с помощью магии исходных карт.
1. Базовый пример вывода Source Maps для js-файла
Дальше будет много кода из рабочего примера, будет использоваться scss, сборка, минификация, конкатенация и т.д.
Живое редактирование SCSS в браузере
Включение Chrome Workspaces позволит вам сохранить (при желании) изменения, которые вы вносите в свои настоящие файлы в веб-инспекторе Chrome. Таким образом, вам не нужно пробовать свои изменения в браузере, смотреть, что работает, а затем возвращаться к своему редактору, чтобы сохранить эти изменения.
Чтобы включить рабочие области в Chrome, выполните следующие действия.
- Откройте инструменты разработчика Chrome.
- Нажмите на значок шестеренки, чтобы открыть панель настроек.
- Выберите опцию «Рабочая область» в левой части панели «Настройки».
- Выберите корневую папку вашего проекта в разделе «Папки».
- Дайте Chrome разрешение на доступ к вашей локальной файловой системе.
Это добавит все ваши файлы проекта на панель «Источники» в инструментах разработчика.
Что такое исходная карта?
Исходная карта – это файл .map в формате JSON, который создается при компиляции файлов Sass в CSS. Он содержит информацию, которая связывает каждую строку вашего CSS-файла (выходные данные) с соответствующей строкой в его исходном файле SCSS (входные данные).
Это означает, что когда ваш CSS компилируется, вы увидите комментарий, подобный следующему, в конце вашего скомпилированного файла CSS:
Ниже приведено содержимое усеченного файла .map .
Отображение с локального хоста на файл на диске
Последний шаг для редактирования SCSS в браузере требует сопоставления файлов с локального хоста с исходными файлами. Выполнение следующих действий активирует это отображение:
- При просмотре страницы на вашем локальном сервере, проверьте любой элемент на вашей странице.
- В инструментах разработчика выберите вкладку Sources.
- В дереве файлов слева щелкните правой кнопкой мыши таблицу стилей и выберите «Сопоставить с ресурсом файловой системы…».
- Это вызовет диалог поиска файлов. Выберите соответствующий файл (вашу таблицу стилей).
- Перезапустите инструменты разработчика.
Это соединит файл с локального хоста с файлами на реальном диске. Теперь вы можете редактировать свой SCSS в браузере, и при сохранении Chrome запишет эти изменения в фактический файл.
Если вы следите за изменениями в Sass, SCSS будет скомпилирован, и CSS автоматически обновится на вашей странице, включая ваши изменения.
2. Кастомизированный пример подключения Source Maps в js-файлах и в css-файлах
Задача для компиляции файла main.min.css с Source Maps
Задача для конкатенации файла scripts.min.js с Source Maps
Все классно, но есть одна проблема.
Проблема с лишним содержимым в виде карты путей решаема.
По итогу, на продакшене будут чистые минифицированные файлы без лишнего кода и комментариев.
Недавно играю с bootsrap3. Я скомпилировал его из исходников и включил в свой проект distr js и css. Дело в том, что я вижу в инструментах GH dev, что он пытается получить файл .map.css. Почему он так хочет? Как это отключить? Мне нужно отключить его? Чтобы не было отметки об ошибке в инструментах разработчика, я добавил этот файл карты, после чего все стили отображаются так, как они определены, в меньшем количестве файлов, что мне не очень помогает.
Это работает, но если на bootstrap ссылаются непосредственно из node_modules, при повторной установке bootstrap он будет перезаписан обратно
Вот Это Да! Совершенно безумно . это работает, только если вы "удалите" строку (как вы сказали) . комментирование по-прежнему приводит к ошибке 404! Рад, что наткнулся на ваш пост!
Файлы .map позволяют браузеру загружать полную версию миниатюрного JS. Это действительно для целей отладки.
По сути, отсутствие файла .map не является проблемой. Вы только знаете, что он отсутствует, поскольку в браузере были открыты инструменты разработчика, обнаружен миниатюрный файл и просто информируется о том, что отладка JS не будет такой хорошей, как могла бы быть.
Вот почему библиотеки, такие как jQuery, также имеют полный, минимизированный и файл карты.
Их скачивает? Отсюда? Я предположил, что эти файлы .less каким-то образом упакованы внутри файла карты. И при загрузке страницы bootrap воссоздает эти файлы из пакета.
Из того же каталога он получает .js из. Помните, что это только тогда, когда инструменты разработчика открыты, а не как обычный запрос.
Спасибо за ответ, но .less в моем проекте нет файлов. Я только добавил .css и .js файлы и этот map файл.
@Raymond: Инструменты разработчика не понимают имена файлов, такие как .min.css - в конце концов - можем ли мы гарантировать, что он уменьшен? Нет . он загрузит .map только для того, чтобы убедиться, что у него есть обе копии. Опять же, это включается с помощью инструментов разработчика. Если вы закроете окно инструментов, оно не будет запрашиваться.
Повторяю, файл .map запрашивается и используется только тогда, когда открыты инструменты разработчика, поэтому, если он отсутствует, вы не получите никаких дополнительных неудачных запросов, когда обычные пользователи переходят на вашу страницу.
Если ошибка повторится, очистите кеш браузера (CTRL + F5).
- CSS / bootstrap.min.css
- CSS / bootstrap.css
Чтобы получить путь к файлу в Linux, используйте команду find / -name "\*bootstrap\*"
Это происходит только тогда, когда вы используете инструменты разработчика, и не произойдет для обычных пользователей, обращающихся к производственному серверу.
В любом случае, я счел полезным просто отключить это поведение в dev-tools : откройте настройки и снимите флажок «Включить исходные карты».
Попытки получить доступ к файлам карт больше не будут.
Я думаю, это могут быть наиболее подходящие ответы. Другие актуальны только в том случае, если упомянутые файлы упакованы вместе с вашим приложением - что бывает не всегда.
Если у вас нет правильного файла .map и вы не хотите редактировать строки в bootstrap.css, вы можете создать фиктивный файл .map.
В моем случае я увидел ошибку:
Поэтому я создал пустой файл bootstrap.css.map в каталоге / public, и ошибка прекратилась.
Хотелось бы в двух словах рассказать, как настроить Source Maps для GULP 4, но не получится вырвать из контекста просто пару строк кода, поэтому разобью статью на 2 части. Первая будет с базовым кодом для Source Maps, а во второй части будет куча кода из рабочего проекта.
Source Maps нужны для проектов, где происходит сборка нескольких файлов в один, например, компиляция файлов scss в один файл main.min.css или конкатенация js-файлов в один scripts.min.js . Карты источников нужны для того, чтобы быстро вносить правки, и не искать в каком файле задано определенное правило или функция, особенно когда для сборки используются десятки файлов или различных библиотек.
Так будет выглядеть в инспекторе код без Source Maps:
Так будет выглядеть код с использованием Source Maps:
И по итогу, если нам нужно увеличить отступ снизу у элемента .icon , то нам не нужно искать по всем файлам scss где задано это правило, а с помощью карты источников видим, что данное правило указано в файле _general.scss на 44 строке.
Если вам это не нужно, то дальше можно не читать.
Требования к браузеру и Sass
Функция исходных карт привлекла большое внимание, когда она была впервые представлена, и с тех пор многое изменилось. Теперь он доступен в последних стабильных версиях Chrome, Firefox и Safari.
Вам не требуется Chrome Canary, и вам не нужно редактировать chrome://flags чтобы использовать это. Вам нужно только применить правильные настройки, чтобы включить его.
Для исходных карт требуется Sass 3.3 или выше ( Sass 3.4 был выпущен недавно).
Включение исходных карт с использованием драгоценного камня Sass Ruby
Если вы используете гем Sass Ruby для компиляции, вы можете включить исходные карты с помощью следующей команды терминала:
Как помогают Source Maps?
При отладке веб-страницы с помощью инструментов разработчика Chrome с использованием исходных карт на панели стилей будет отображаться, с какой частью Sass пришел ваш CSS, вместо того, чтобы указывать на файл CSS. style.css вместо того, чтобы показывать источник как style.css , он будет отображаться как _buttons.scss .
В примере на скриншоте ниже стили для элемента body происходят из части с именем _body.scss .
При проверке я хотел бы знать, где я определил color: black участок в этом.
Чтобы получить эту информацию, я мог бы выполнить одно из следующих действий для дальнейшей проверки:
- Нажмите CTRL и нажмите на цвет слова. Он откроет соответствующий фрагмент на вкладке источников и поместит курсор в точную линию, где определен стиль. В этом случае цвет определяется в переменной с именем $black .
- Нажмите CTRL и нажмите на слово черный . Он откроет _colors.scss на вкладке источников, где определено значение переменной $black . В случае, если черный цвет исходил от миксина, а не от переменной, CTRL + нажатие на него откроет файл, в котором определен миксин. Нажмите на изображение ниже, чтобы увидеть анимированный GIF- файл, демонстрирующий, как это может выглядеть.
Использование исходных карт в Workspaces позволяет редактировать и сохранять изменения из инструментов разработчика Chrome. Если sass --watch запущен, он обнаружит изменение и перекомпилирует CSS. Браузер автоматически перезагрузит этот новый CSS.
Включение исходных карт в плагинах node-sass
Все плагины node-sass имеют API для включения опции карты источника Sass.
grunt-contrib-sass – Включите исходные карты в разделе options вашего Gruntfile.js, чтобы установить sourcemap: true .
sourceComments: 'map' – sourceComments: 'map' в gulp-sass активирует исходные карты в Gulp. Это указывает на исходные карты, то есть они добавляются в конец вашего CSS-файла. В этом случае не будет отдельного файла .map .
broccoli- sourceMap: true активирует исходные карты.
Включение исходных карт в Chrome
Включение исходных карт скомпилирует карту со ссылками. Результатом этой компиляции будут два файла: файл .css файл .css.map . Файл .map будет содержать соответствующие данные, чтобы вы могли отладить точное местоположение, где начинается стиль.
Чтобы это работало в Chrome, выполните следующие действия:
- Открытые инструменты разработчика.
- Нажмите на значок шестеренки (вверху справа), чтобы открыть Настройки.
- В разделе «Общие» найдите раздел «Источники». В этом разделе выберите «Включить исходные карты CSS».
- Убедитесь, что сопровождающий «Автоматическая перезагрузка сгенерированного CSS» также включен.
Последний шаг помогает перезагрузить CSS при его изменении. Думайте об этом как о функции перезагрузки в реальном времени только для CSS.
Примечание. Вам все равно придется компилировать SCSS отдельно, используя Grunt, Gulp, sass watch или compass watch. Как только CSS будет сгенерирован, функция автоматически перезагрузит его для вас.
2. Кастомизированный пример подключения Source Maps в js-файлах и в css-файлах
Задача для компиляции файла main.min.css с Source Maps
Задача для конкатенации файла scripts.min.js с Source Maps
Все классно, но есть одна проблема.
sourcemaps.write() – не указаны пути для файла *.map, значит карта источников будет записана внутри файла в самый конец, тем самым увеличивая вес файлов более чем в два раза. Это не круто, но зато карты источников будут работать и в Chrome, и в Firefox.
sourcemaps.write('.') – в таком формате source map запишется отдельным файлом в той же папке, что и основной файл, в формате main.min.css.map и scripts.min.js.map.
Проблема с лишним содержимым в виде карты путей решаема.
Source Maps нужны нам только во время разработки, поэтому при билде продашена просто удалим все комментарии из файлов .css и .js – а карта источников записана именно в виде комментария.
Это часть кода из моей таски ‘build’:
По итогу, на продакшене будут чистые минифицированные файлы без лишнего кода и комментариев.
1. Базовый пример вывода Source Maps для js-файла
Где – plugin1() и plugin2() – это какие-то образные плагины, которые занимаются минификацией и конкатенацией js-файлов, например.
Дальше будет много кода из рабочего примера, будет использоваться scss, сборка, минификация, конкатенация и т.д.
Читайте также: