Использование исходных карт для отладки Sass в Chrome

  1. Требования к браузеру и Sass
  2. Что такое исходная карта?
  3. Как помогают Source Maps?
  4. Включение исходных карт в плагинах node-sass
  5. Включение исходных карт с использованием драгоценного камня Sass Ruby
  6. Включение исходных карт с помощью Compass
  7. Включение исходных карт в Chrome
  8. Живое редактирование SCSS в браузере
  9. Отображение с локального хоста на файл на диске
  10. Заключение

Если вы используете Sass в своих интерфейсных проектах, скорее всего, ваши партиалы разделены в чистом и логичном ключе на основе надежного Sass архитектура ,

В таких случаях отладка скомпилированного CSS может быть как хлопотной, так и длительной. пререкаться предоставляет флаг включить номера строк (--line-numbers), которые включают в себя комментарии (как показано ниже) в вашем CSS.

/ * строка 303, молекулы \ аккордеоны \ _accordions.scss * /

Хотя это полезно, вам все равно придется вручную отследить ошибку в вашем CSS до исходного файла. И редактирование CSS в браузере с использованием инструментов разработчика не может быть сохранено, поскольку оно будет перезаписано следующей компиляцией Sass.

Итак, как мы можем сделать этот процесс проще?

Я собираюсь показать вам, как использовать исходные карты в сочетании с Рабочие места Chrome чтобы вы могли отлаживать и редактировать Sass из браузера.

Требования к браузеру и Sass

Функция исходных карт привлекла большое внимание, когда она была впервые представлена, и с тех пор многое изменилось. Теперь он доступен в последних стабильных версиях Chrome, Firefox и Safari.

Вам не требуется Chrome Canary, и вам не нужно редактировать chrome: // flags, чтобы использовать это. Вам нужно только применить правильные настройки, чтобы включить его.

Для исходных карт требуется Sass 3.3 или выше ( Sass 3.4 был выпущен недавно).

Что такое исходная карта?

Исходная карта - это файл .map в формате JSON, который генерируется, когда ваши файлы Sass компилируются в CSS. Он содержит информацию, которая связывает каждую строку вашего CSS-файла (выходные данные) с соответствующей строкой в ​​его исходном файле SCSS (входные данные).

Это означает, что когда ваш CSS компилируется, вы увидите комментарий, подобный следующему, в конце вашего скомпилированного файла CSS:

/ * # sourceMappingURL = style.css.map * /

Ниже приведено содержимое усеченного файла .map.

{"version": 3, "mappings": "; AAiIA, qDAAsD; EACpD, OAAO, EAAE, GAAG" "sources": ["../scss/foundation/components/_breadcrumbs.scss","../scss /foundation/components/_icon-bar.scss","../scss/foundation/components/_offcanvas.scss","../scss/foundation/components/_visibility.scss","../scss/foundation/ components / _global.scss "," .. .. scss / foundation / pages / _index.scss "]," names ": []," file ":" foundation.css "}

Как помогают Source Maps?

При отладке веб-страницы с помощью инструментов разработчика Chrome с использованием исходных карт на панели стилей будет отображаться, с какой частью Sass пришел ваш CSS, вместо того, чтобы указывать на файл CSS. То есть вместо того, чтобы показывать источник как style.css, он будет отображаться как _buttons.scss.

В примере на скриншоте ниже стили для элемента body происходят из части с именем _body.scss.

scss

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

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

  1. Нажмите CTRL и нажмите на цвет слова. Он откроет соответствующий фрагмент на вкладке источников и поместит курсор в точную линию, где определен стиль. В этом случае цвет определяется в переменной с именем $ black.
  2. Нажмите CTRL и нажмите на слово черный . Он откроет _colors.scss на вкладке источников, где определено значение переменной $ black. В случае, если черный цвет исходил от миксина, а не от переменной, CTRL + нажатие на него откроет файл, в котором определен миксин. Нажмите на изображение ниже, чтобы посмотреть анимированный GIF это показывает демонстрацию того, как это может выглядеть.

Нажмите на изображение ниже, чтобы посмотреть   анимированный GIF   это показывает демонстрацию того, как это может выглядеть

Использование исходных карт в Workspaces позволяет редактировать и сохранять изменения в инструментах разработчика Chrome. Если sass --watch запущен, он обнаружит изменение и перекомпилирует CSS. Браузер автоматически перезагрузит этот новый CSS.

Включение исходных карт в плагинах node-sass

Все плагины node-sass имеют API для включения опции карты источника Sass.

  • grunt-contrib-sass - Включите исходные карты в разделе параметров вашего Gruntfile.js, чтобы установить sourcemap: true.

  • gulp - sass sourceComments: 'map' в gulp-sass включает исходные карты в Gulp. Это указывает на исходные карты, то есть они добавляются в конец вашего CSS-файла. В этом случае отдельного файла .map не будет.

  • broccoli- sass sourceMap: true активирует исходные карты.

Включение исходных карт с использованием драгоценного камня Sass Ruby

Если вы используете гем Sass Ruby для компиляции, вы можете включить исходные карты с помощью следующей команды терминала:

sass style.scss: ../ css / style.css --sourcemap

Включение исходных карт с помощью Compass

Если вы используете Compass, вы можете запустить следующую команду:

sass style.scss: ../ css / style.css --компас --sourcemap

Или вы можете добавить sass_options = {: sourcemap => true} в ваш файл config.rb и запустить Compass Watch как обычно.

Включение исходных карт в Chrome

Включение исходных карт скомпилирует карту со ссылками. Результатом этой компиляции будут два файла: файл .css и файл .css.map. Файл .map будет содержать соответствующие данные, чтобы вы могли отладить точное местоположение, где начинается стиль.

Чтобы это работало в Chrome, выполните следующие действия:

  1. Открытые инструменты разработчика.
  2. Нажмите на значок шестеренки (вверху справа), чтобы открыть Настройки.
  3. В разделе «Общие» найдите раздел «Источники». В этом разделе выберите «Включить исходные карты CSS».
  4. Убедитесь, что сопровождающий «Автоперезагрузка сгенерированного CSS» также включена.

Убедитесь, что сопровождающий «Автоперезагрузка сгенерированного CSS» также включена

Последний шаг помогает перезагрузить CSS при его изменении. Думайте об этом как о функции перезагрузки в реальном времени только для CSS.

Примечание. Вам все равно придется компилировать SCSS отдельно, используя Grunt, Gulp, sass watch или compass watch. Как только CSS будет сгенерирован, функция автоматически перезагрузит его для вас.

Живое редактирование SCSS в браузере

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

Чтобы включить рабочие области в Chrome, выполните следующие действия.

  1. Откройте инструменты разработчика Chrome.
  2. Нажмите на значок шестеренки, чтобы открыть панель настроек.
  3. Выберите опцию «Рабочая область» в левой части панели «Настройки».
  4. Выберите корневую папку вашего проекта в разделе «Папки».
  5. Дайте Chrome разрешение на доступ к вашей локальной файловой системе.

Дайте Chrome разрешение на доступ к вашей локальной файловой системе

Это добавит все ваши файлы проекта на панель «Источники» в инструментах разработчика.

Отображение с локального хоста на файл на диске

Последний шаг для редактирования SCSS в браузере требует сопоставления файлов с локального хоста с исходными файлами. Выполнение следующих действий активирует это отображение:

  1. При просмотре страницы на вашем локальном сервере, проверьте любой элемент на вашей странице.
  2. В инструментах разработчика выберите вкладку Sources.
  3. В дереве файлов слева щелкните правой кнопкой мыши таблицу стилей и выберите «Сопоставить с ресурсом файловой системы…».
  4. Это вызовет диалог поиска файлов. Выберите соответствующий файл (вашу таблицу стилей).
  5. Перезапустите инструменты разработчика.

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

Если вы следите за изменениями в Sass, SCSS будет скомпилирован, и CSS автоматически обновится на вашей странице, включая ваши изменения.

Заключение

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

Хотя эта статья посвящена работе с исходными картами в Chrome, вы можете сделать то же самое в Fire Fox , а также Сафари , Internet Explorer 11 также поддерживает исходные карты, но, похоже, нет никакой информации об использовании исходных карт в этом браузере с Sass, так что вам придется попробовать это самостоятельно.

Если вы хотите учиться визуально, проверьте SassBites # 21 от Мики Годболт , в котором обсуждается, как включить и использовать исходные карты в Chrome.

Я надеюсь, что это станет ценным, экономящим время дополнением вашего рабочего процесса.

Похожие

Что такое Кровавая Супер Луна?
... картинке ниже: Лунное затмение. Рис. Сагредо / НАСА / Викимедиа Когда на экране Луны появляется глубокая тень Земли (и, таким образом, начинается полное затмение - в отличие от частичной или полутени), солнечные лучи, падающие на наш земной шар с противоположной от Луны стороны, разрушаются в атмосфере
Что такое запись PTR и как сделать обратный поиск IP?
... ствует много типов DNS-записей, и начинающим может быть непросто понять, какая DNS-запись необходима или как ее настроить. В этом руководстве вы узнаете, что такое запись PTR и как проверить, установлена ​​ли она для IP-адреса. Что такое запись PTR Короче говоря, запись PTR похожа на обратную версию записи A. Запись сопоставляет доменное имя с IP-адресом, PTR сопоставляет IP-адрес с именем хоста. Однако эти две записи независимы. Например, запись hostinger.com может указывать
как сделать популярный блог
Загрузите автономный установщик Google Chrome 63 для всех операционных систем
... выпущен в стабильном канале и доступен для загрузки пользователями. В этой статье вы найдете ссылки для автономной установки Chrome 63. Google Chrome - это многоплатформенный браузер с простым интерфейсом. Он имеет расширенные и мощные функциональные возможности для улучшения
Как включить Google сейчас в Chrome на Linux
Карты Google Now в Chrome OS Прошлая неделя увидел появление оболочки Google Aura в Chrome для
Что такое Google Диск и как он работает? A 2019 Пошаговое руководство
... карт для резервного копирования на внешние устройства, такие как камера или телефон. Последний вид, указанный в меню настроек, - «настройки». Это представление позволяет обновить или отключить хранилище, а также имеет несколько переключателей для других настроек. Есть также опция, называемая «сетевые настройки», которая позволяет регулировать скорость
Apple SIM: все, что нужно знать об SIM-карте для iPad
... стал предпочтительным рабочим инструментом для многих. Он мощный и легкий в транспортировке, гораздо больше, чем ноутбук благодаря своей легкости и изяществу. Он идеально подходит для офисных задач, ответов на электронные письма и просмотра веб-страниц в поисках информации. Однако, когда у нас нет Wi-Fi соединения, оно теряет много сил . Чтобы решить эту проблему, некоторые люди совместно используют соединение своего смартфона в качестве маршрутизатора для доступа к сети.
Лучший хостинг. Как просто измерить производительность MySql?
На форумах и в дискуссионных группах часто можно попросить «лучшую» команду хостинг ». Лучшее, конечно, неоднозначное понятие, и среди множества критериев, которые вы можете принять во внимание, - производительность. Как вы сами это проверите, прежде чем покупать хостинг? Вы можете быстро пройти
Как читать больше и покупать книги дешевле?
... внование в том, кто любит книги больше всего в мире, я бы выиграл золотую медаль (даже если бы она была выдолблена из картофеля и действительно желтой). Я начал читать, когда мне было шесть лет, и с тех пор я не представлял мир без книг. Более того, я думаю, что чтение так сильно меняет людей, что каждый из нас должен читать. Просто как успеть на это и как сделать так, чтобы покупка новинки не повредила в кармане? Я люблю читать, но у меня не всегда есть время для этого. Я часто обещаю
Как войти в свою учетную запись Google с помощью телефона вместо пароля
Google ввел новую безопасность аккаунта, основанную на двухэтапной проверке. Если вы включите эту опцию, вы сможете войти в свою учетную запись Google, подтвердив свою личность с помощью телефонного уведомления вместо пароля. Как это настроить? Двухэтапная проверка
Как запустить Google Chrome OS с USB-накопителя
... карту SD Association Formatter приложение. Скачать: SD Card Formatter для Windows | Macos (Свободно) Для пользователей Linux мы рекомендуем использовать GParted для быстрого форматирования. Скачать:

Комментарии

Что такое USB Type-C?
Что такое USB Type-C? Type-C относится к физической форме новейшего USB-разъема. Разъем USB Type-C не следует путать с новым стандартом USB 3.1, который был анонсирован примерно в то же время (мы вернемся к этому через секунду). Наиболее распространенной и знакомой формой разъема USB является USB Type-A, который в настоящее время
Но как быть уверенным, что ваша защита действительно работает так же хорошо, как вы думаете?
Но как быть уверенным, что ваша защита действительно работает так же хорошо, как вы думаете? Эти инструменты также могут быть особенно полезны, если вы пытаетесь быстро определить, насколько безопасен чужой компьютер. Они могут показать вам, сколько уязвимого программного обеспечения установлено на ПК. Проверьте свой антивирус Нет, мы не собираемся рекомендовать загрузку вируса для проверки вашей антивирусной программы - это путь к катастрофе. Если вы когда-нибудь
Что такое «печать по требованию» и как это работает?
Что такое «печать по требованию» и как это работает? Печать по требованию - это процесс, при котором вы работаете с поставщиком, чтобы настроить изделия с белой этикеткой (например, бейсбольные кепки или сумки) с вашим собственным дизайном, чтобы продавать их на основе заказа под вашим собственным
Спросите, что и как именно они намерены делать в вопросах экономических и государственных финансов: что это будет переводить в конкретные цифры, хотя и приблизительно?
Спросите, что и как именно они намерены делать в вопросах экономических и государственных финансов: что это будет переводить в конкретные цифры, хотя и приблизительно? Они знают, о чем говорят? ( вот ссылки на ФБ ). Не обманывайте себя лозунгами и любыми ответами. Без подробностей в Польше все будет продолжаться, потому что лозунги не изменят
А что такое супер луна?
А что такое супер луна? Это имя означает полную луну в тот момент, когда она находится ближе всего к Земле на своей орбите. Эта орбита имеет эллиптическую форму, слегка вытянутую, так что расстояние Серебряного глобуса от нашей планеты варьируется примерно от 406,7 тысячи. км (это самый дальний, то есть в апогее ) до менее 357 тысяч. км (ближайший - перигей ). 28 сентября 2015 года Луна будет ровно 356 877 тысяч. км
Что такое SEO?
Что такое SEO? Поисковая оптимизация (SEO), которая является оптимизацией веб-сайтов поисковых систем, представляет собой серию мероприятий, направленных на подготовку веб-сайта таким образом, чтобы он мог занимать самые высокие позиции в результатах поисковых систем при сохранении рекомендаций для поисковых систем.
Как и Сократ, я гордился бесславным подвигом радикальное принятие , Принять что именно?
Что такое SEO? Поисковая оптимизация (SEO), которая является оптимизацией веб-сайтов поисковых систем, представляет собой серию мероприятий, направленных на подготовку веб-сайта таким образом, чтобы он мог занимать самые высокие позиции в результатах поисковых систем при сохранении рекомендаций для поисковых систем.
Что такое конверты DL?
Что такое конверты DL? Конверты DL они имеют размер 110x220 мм. Они в основном используются для отправки деловой переписки, договоров, счетов и аналогичных документов. Они оснащены самоклеющейся полосой, благодаря которой отправка даже большого количества писем становится простой и не занимает много времени. Форматы конвертов - как выбрать их для
Что такое вики?
Что такое вики? «Wiki» - это гавайский термин, который означает «быстрый». Вики на основе компьютеров - это тип системы управления контентом, которая позволяет сообществу людей добавлять, редактировать, структурировать и удалять контент, хранящийся в центральном месте. Самый большой и самый успешный пример вики - это онлайн-энциклопедия, Wikipedia® , Содержимое в Википедии предоставляется исключительно добровольцами, и сайт
Что такое препроцессор CSS?
Что такое препроцессор CSS? Препроцессоры CSS не заменяют CSS. Фактически, препроцессоры просто предоставляют нам дополнительную функциональность, такую ​​как переменные, миксины, операции и функции, с помощью которых мы можем упростить процесс создания и управления файлами CSS. Препроцессоры позволяют нам определять свойства один раз, а затем повторно использовать их в нашем проекте гораздо более динамично, чем простой CSS. Что МЕНЬШЕ? LESS - относительно
2. Как были найдены используемые в настоящее время инструменты?
2. Как были найдены используемые в настоящее время инструменты? Юлия Нойманн: То, что мы давно искали, это инструмент, который помогает нам эффективно обрабатывать комментарии пользователей. Существует много инструментов взаимодействия с системами заявок, но только один провайдер предложил программировать собственное решение. Это автоматически помечает билеты для новых комментариев, если комментарии содержат только теги или смайлики. Это сделало управление сообществом

Как помогают Source Maps?
Итак, как мы можем сделать этот процесс проще?
Что такое исходная карта?
Как просто измерить производительность MySql?
Как вы сами это проверите, прежде чем покупать хостинг?
Просто как успеть на это и как сделать так, чтобы покупка новинки не повредила в кармане?
Как это настроить?
Что такое USB Type-C?
Но как быть уверенным, что ваша защита действительно работает так же хорошо, как вы думаете?
Что такое «печать по требованию» и как это работает?