Abr@X@bra.ru
Firefox DevTools для front-end разработки

Firefox DevTools для front-end разработки

30.01.2019
196

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

Благодаря тому, что Firefox быстро выпускает удивительные улучшения своих DevTools, самое время исследовать мощные аспекты, специально предназначенные для авторов CSS.

В этой статье я расскажу об этих функциях, чтобы помочь вам в разработке и проверке CSS в браузере. Я уверен, что то, чем я собираюсь поделиться, сделает вашу оценку Firefox DevTools положительной.

Так что без лишних слов ... давайте начнем наше путешествие.

Инспектор страниц


Начиная с версии 62, разработчики имеют возможность проверять и изменять HTML и CSS вашей страницы с помощью полезного свойства недавно добавленного 3-панельного инспектора Firefox.

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



Редактор форм - Shape path editor


Способность создавать сложные формы, такие как круг, прямоугольник, эллипс, многоугольник - это именно то, для чего был создан shape path. Если вы экспериментируете или используете его сегодня, у меня есть отличные новости, потому что Firefox позволяет вам редактировать и проверять контуры фигур прямо из их DevTools.




Вы можете посмотреть полное видео Джен здесь.



Откройте демонстрацию выше с помощью вашего Firefox DevTools…

Выберите элемент (в данном случае изображение) с помощью инспектора DOM.

С элементом, выбранным через инспектор DOM, используйте панель CSS Rules, чтобы найти значение формы элементов

Нажмите на ранее упомянутый значок рядом со значением свойства, чтобы выделить путь формы в окне просмотра браузера. Чтобы отключить Shape Path Editor, снова нажмите на иконку.

 

Как только траектория формы активируется в окне просмотра, вам будут предоставлены дополнительные аспекты, помогающие изобразить конкретные характеристики вашего контура формы; специально сплошные и пунктирные линии.

Эти линии будут иметь точки, которыми вы можете манипулировать с помощью курсора, чтобы растянуть форму, если это требуются.

Фильтры

Если вы не знакомы с фильтрами, это отличное свойство CSS для создания визуальных эффектов, таких как размытие, насыщенность и сепия, наряду со многими другими. Эти фильтры аналогичны тем, которые вы обычно используете в Photoshop, но для браузера.



При проверке CSS-фильтров с помощью Firefox отображается значок с серо-белой заливкой, на который также можно нажать, чтобы отредактировать свойство и его значения по своему вкусу.


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

Анимации

Инструмент «Анимации» предоставляет полную информацию об анимациях), примененных к выбранным элементам, вместе с контроллерами, а также временной шкалой (с маркерами каждые 250 миллисекунд) для обработки воспроизведения и отладки / улучшения. Вы также можете управлять любой анимацией, применяемой к псевдоэлементам, например :: before или :: after.


Чтобы начать использовать эту функцию, найдите вкладку «Анимации» в вашем DevTools. Синяя полоса анимации представляет переходы, оранжевый для @keyframes и зеленый для API веб-анимации. Если столбец содержит значок молнии, это означает, что свойство было анимировано с помощью потока. Если анимация или переход имели задержку, она будет показана как заштрихованная заливка. При наведении курсора на каждую полосу отображается всплывающая подсказка, в которой содержится информация о типе анимации, длительности, задержке и функции синхронизации.

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

Сетка - CSS Grid

Я могу только предположить, что большинство из вас, читающих, следовали огромным улучшениям, которые пришли к CSS за эти годы, и особенно это Grid. Firefox был одним из первых браузеров, предложивших разработчикам мощные инструменты для проверки элементов с использованием Grid, и с каждым днем он только улучшается.


Чтобы проверить элементы с примененным свойством grid, инспектор DOM отобразит эти элементы, отмеченные словом «grid», рядом с ними. На панели стилей элемент также будет иметь сопровождающий значок сетки рядом со значением свойства. Щелчок по этому значку отобразит наложение сетки поверх выбранного элемента или области, отображая, таким образом, всю примененную информацию к области сетки, такую как линии и дорожки. Посмотрите эту демонстрацию ниже, чтобы увидеть более подробно всю мощь, которую она предоставляет для проверки CSS Grid:



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

Шрифты

Я большой поклонник типографики, и Firefox, безусловно, поразил меня одной из моих любимых функций, вкладка Шрифты.



Вкладка «Шрифты» предоставляет разработчикам возможность проверять, просматривать и манипулировать шрифтами, примененными к вашей странице. Вам также предоставляется более подробная информация, такая как URL-адреса используемых шрифтов.



Начиная с версии 62 также поддерживаются переменные шрифты, что позволяет просматривать их в реальном времени в браузере.

Скриншоты


Если ваша работа требует документирования интерфейса в статической форме, Firefox проделал замечательную работу, реализовав умные способы визуального документирования вашей работы. Наряду с возможностью делать полные снимки экрана страницы, вы также можете выбрать частичные области страницы и даже отдельные узлы (удобная функция для авторов, разрабатывающих изолированные компоненты / модули).

Есть несколько способов сделать скриншоты с помощью Firefox; через сам DevTools, или используя панель браузера. Если вы используете DevTools непосредственно, выберите «Настройки», найдите столбец «Доступные кнопки панели инструментов» и найдите переключатель «Сделать снимок экрана всей страницы».


В разделе «Поведение снимка экрана» вы найдете дополнительные параметры для управления поведением. После выбора этих параметров в строке меню DevTools в правом верхнем углу будет отображаться значок камеры, позволяющий сделать снимок экрана всей страницы. Если вы не хотите снимать всю страницу, вы также можете захватить отдельные элементы, используя панель HTML-инспектора, щелкнув правой кнопкой мыши по выбранному вами узлу.


Редактор стилей

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


Такие параметры, как просмотр, создание и импорт всей таблицы стилей, - это всего лишь несколько аспектов и все они в вашем распоряжении.



Боковая панель справа предназначена специально для тех досадных правил @media, которые предоставляют ссылку на таблицу стилей, в которой определено правило, а также возможность импортировать собственную таблицу стилей или создать новую.


Адаптивный дизайн - Responsive Design

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


Firefox позаботился о том, чтобы предоставить разработчикам мощные инструменты для проверки адаптивных аспектов сайтов, и в последние годы получил отличное направление от Chrome. Вы даже можете нажать на правило @media, чтобы автоматически применить его в режиме адаптивного дизайна.

Трансформации

Разве не приятно было бы точно увидеть, как расположены свойство transform. С Firefox DevTools вы это можете!


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

Работа с препроцессорами

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

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

CSS переменные

CSS-переменные наконец-то могут автоматически заполняться в зависимости от переменных, определенных в вашем CSS коде.


Подытожим

Независимо от того, какой выбор вы сделаете для DevTool, факты ясны; каждый раз, когда DevTool совершенствуется или желает измениться к лучшему, мы, как сообщество, получаем пользу. Поскольку меж браузерное тестирование так важно, имеет смысл иметь DevTool в наших руках, который помогает улучшить рабочий процесс и помогает делать повседневные задачи менее сложными, позволяя нам сосредоточиться на том, что действительно важно; отладка, проверка, сохранение и настройка на лету.







DevTools, front-end
Читайте также:
Debugger в VSCode

Debugger в VSCode

На css-tricks.com Крис Койер (Chris Coyier) написал пост «Как перестать использовать console.log () и начать...
Читать
9 хитростей для разработчиков JavaScript в 2019 году

9 хитростей для разработчиков JavaScript в 2019 году

Еще один год закончился, и JavaScript постоянно меняется. Тем не менее, есть несколько советов, которые помогут вам напи...
Читать
CSS Grid, подробное руководство по гридам с примерами

CSS Grid, подробное руководство по гридам с примерами

Это руководство было создано как ресурс, который поможет вам лучше понять и изучить Grid CSS, и было организовано таким ...
Читать