Style Editor

Редактор Стилей позволит вам:

• просматривать и редактировать все таблицы стилей, находящиеся на странице
• создать новые таблицы стилей с нуля, и применять их к странице
• импортировать существующие таблицы стилей и применять их к странице

Чтобы открыть редактор стилей выберите опцию "Редактор стилей" из меню "Разработка" (который является подменю в меню "Инструменты"). Инструменты появятся в нижней части окна браузера, с активной панелью редактора стилей:

Редактор Стилей делится на три основные части:

•   the style sheet pane on the left
•  the editor on the right

•  the media sidebar.

Панель таблицы стилей

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

Панель редактора

Справа находится панель редактора. Где вы можите видеть и редактировать исходный код выбранного листа стилей. Любые изменения, которые вы делаете, немедленно применяются к странице. Это позволяет легко экспериментировать, просматривать, а также изменять тестировать. После того как Вы удовлетворены вашими изменениями, Вы можете сохранить копию локально, нажав кнопку Сохранить в нижнем правом углу листа в панели таблица стилей.

Редактор предоставляет номера строк и подсветку синтаксиса, что облечает читать вам CSS. Он также поддерживает номер ряда keyboard shortcuts.

Редактор Стилей автоматически де-минимизирует таблицы стилей, которые он обнаруживает, не влияя на оригинал. Что делает его гораздо легче для работаты на страницах, которые были оптимизированы.

Редактор Стилей поддерживает автозаполнение. Просто начните печатать, и он будет предлагать вам перечень предложений.

Вы можете включить автозаполнение в Style Editor settings.

Боковая панель @media

С Firefox 33 и далее, Редактор Стилей отображает боковую панель на правой стороне, где текущий лист содержит какие-либо @media правлила. Боковая панель содержит список правил и ссылку на строки таблицы, где правило определено. Щелкните элемент, чтобы перейти к этому правилу в листе.Состояние текста остаётся серым, если запрос медиа в настоящее время не применяется.

Боковая панель медиа особенно хорошо работает с Responsive Design View для создания и отладки мобильных макетов:

Создание и импортирование таблицы стилей

Вы можете создать новую таблицу стилей, нажав на кнопку Создать на панели инструментов. После чего начать ввод CSS в отрывшемся редакторе и видеть, как новые стили в реальном времени применяются так же, как изменяются в других таблицах.

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

Источник карты поддержки

Веб-разработчики часто создают CSS файлы, используя препроцессор как Sass, Less, или Stylus. Эти инструменты создания CSS файлов с более богатым и выразительным синтаксисам. Если это сделать, будучи в состоянии просматривать и редактировать созданный CSS не так полезен, потому что код, который вы поддерживать синтаксис препроцессора, а не генерирует CSS. Так вы должны были бы изменить сгенерированный CSS, затем вручную работать, как с первоисточником.

Источник карты имеет инструменты для карты вернутся из полученных CSS к первоначальному синтаксису, так что они могут отображать, и позволяют редактировать файлы в оригинальном синтаксисе. С Firefox 29 и далее, Редактор Стиль могу понять исходные карты CSS.

Это означает, что если вы используете, например, Sass, то редактор Стиль покажу вам, и вы сможете редактировать, Sass файлы, а не CSS, который генерируется из них:

Для этого, чтобы работать, вы должны:

• использовать CSS препроцессора, который понимает Source Map Revision 3 proposal. В настоящее время это означает, Sass 3.3.0 или выше, или 1.5.0 version of Less.. Другие препроцессоры активно работаем над добавлением поддержки или его рассмотрения.
• на самом деле поручить препроцессор для генерации исходного карту, например, пропусканием --sourcemap аргумент Sass инструмента командной строки.

Просмотр первоисточников

Теперь, если вы выберете "Показать оригинальные источники" в Style Editor settings, ссылки рядом с правилом CSS в Rules view будет ссылаться к первоисточникам в редакторе стилей

Редактирование первоисточников

Вы также можете редактировать первоисточники в редакторе стилей и видеть результаты сразу на странице. Чтобы это сделать есть два варианта.

Во-первых, настроить препроцессор так следит за оригиналом и автоматически восстанавливает CSS при изменении исходного кода. С Sass вы можете сделать это, просто передавая  в этой опции:

sass index.scss:index.css --sourcemap --watch

Затем сохраните оригинал в редакторе стилей, нажав на кнопку "Сохранить" рядом с файлом, и сохранение его на исходный файл.

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

Сочетания клавиш

Редактор исходного сочетания

Эта таблица перечисляет умолчательные клавиатурные сокращения для редактора исходного кода.

Вместо них в разделе Настройки редактора настроек инструментов разработчика, вы можете выбрать схему привязки клавиш Vim, Emacs или Sublime Text.

Для этого откройте страницу about:config, выберите настройку devtools.editor.keymap и присвойте ей значение "vim", "emacs" или "sublime". Если вы сделаете это, выбранная схема привязки будет использоваться для всех инструментов разработчика, использующих редактор исходного кода. Вам нужно будет повторно открыть редактор, чтобы изменения вступили в силу.

Начиная с Firefox 33 и выше, настройки схемы привязки клавиш выставляются в разделе Настройки редактора настроек инструментов разработчика и вы можете установить её там вместо ручного редактирования about:config.