Инструменты разработчика

Таблицы стилей EffCSS и связанные с ними функции StyleSheet maker могут быть просмотрены с помощью специального расширения браузера - EffCSS Developer Tools.

Установка

Метод установки зависит от браузера:

• Mozilla Firefox может использовать расширение из собственного магазина дополнений,
• браузеры на основе Chromium (такие как Google Chrome, Yandex Browser, Microsoft Edge и др.) могут установить расширения из распакованного zip-архива, используя режим разработчика chrome://extensions.

Интерфейс

Расширение позволяет исследовать таблицы стилей, созданные с помощью EffCSS. Вы можете использовать сортировку, фильтровать по состоянию активности, искать конкретное CSS-содержимое и исследовать конкретный конфиг - включая и StyleSheet maker, и таблицу стилей.

Рабочая область состоит из 2 частей - области списка и области карточки.

Внутри области списка доступны следующие действия:

1. Выбрать фрейм для анализа (если на странице есть несколько фреймов, использующих EffCSS).
2. Вываести провайдер стилей текущего фрейма в консоли браузера.
3. Перезагрузить расширение.
4. Включить/выключить все EffCSS стили для текущего фрейма.
5. Искать по CSS-содержимому или по ключу функции StyleSheet maker.
6. Выбрать параметр сортировки.
7. Выбрать направление сортировки.
8. Отфильтровать активные/пассивные таблицы стилей.
9. Выбрать все таблицы стилей или сбросить выделение.
10. Вывести выделенные таблицы в консоль браузера.
11. Сохранить CSS-файл с выбранными таблицами стилей.
12. Сохранить JS-файл с выбранными функциями StyleSheet maker.
13. Включить выбранные таблицы стилей.
14. Выключить выбранные таблицы стилей.
15. Выделить таблицу стилей или снять выделение.
16. Вывести таблицу стилей в консоль браузера.
17. Открыть карточку таблицы стилей.
18. Включить/выключить таблицу стилей.

Область списка также позволяет сравнивать таблицы стилей, используя такие метрики как количество CSS-правил, свойств и др. Чтобы увидеть содержимое конкретной CSS таблицы или связанную с ней функцию StyleSheet maker, вам потребуется открыть карточку.

Внутри области карточки доступны следующие действия:

19. Открыть вкладку функции StyleSheet maker.
20. Открыть вкладку таблицы стилей.
21. Закрыть карточку.