В этом обзоре мы рассмотрим некоторые из замечательных инструментов разработчика, которые есть в браузере Firefox "из коробки", т.е. без установки дополнительных расширений.
Даже если Google Chrome является вашим основным браузером для разработки, в Firefox есть некоторые инструменты, которых нет в Chrome. Справедливо и обратное утверждение: в Chrome есть некоторые инструменты, которых нет у Firefox, но инструменты разработчика Firefox настолько полезны, что вы действительно выиграете, зная о них.
Примерно в 2018 году Firefox поручил специальной команде добавить инструменты для веб-разработки в этот замечательный браузер. Задача этой статьи - познакомить вас с некоторыми из наиболее примечательных инструментов Mozilla Firefox.
Для начинающих
Начну с того, что перечислю пару вещей, которые есть у инспектора. Нажмите F12, чтобы открыть его, и вы увидите стандартный макет инспектора с тремя панелями (окно браузера, источник HTML и редактор свойств). Нажав на кнопку в виде ..., вы можете изменить конфигурацию размещения этой панели.
Если вы когда-либо пользовались инспектором в любом браузере, все это будет вам знакомо. То же самое относится и к настройкам Режима адаптивного дизайна (Responsive Design Mode), которые позволяют вам просматривать веб-страницы для различных экранах благодаря имитации нужных областей просмотра.
Вы можете использовать ряд кнопок/выпадающих списков для выбора модели телефона/планшета, скорость загрузки и ориентацию экрана (портретная, альбомная).
Примечание: кстати, вы знали, что дополнить/уменьшить набор инструментов разработчика вы сможете, перейдя в настройки кликом по кнопке F1.
1. Инспекторы
Все инструменты браузера содержат несколько инспекторов: HTML-инспектор и CSS-инспектор, но в Firefox есть и другие. Один из таких примеров является довольно новым и дает нам возможность проверять переменные шрифты.
Инспектор шрифтов
Переменные шрифты имеют дополнительные параметры помимо параметров обычных шрифтов - откройте инспектор и посмотрите на вкладку «Шрифты» (она может быть ниже инспектора свойств в зависимости от ширины открытого Инспектора свойств). Вы можете посмотреть на все используемые на странице шрифты:
При выделении конкретного элемента можно узнать настройки шрифта именно для него.
Flexbox-инспектор
Инструменты разработчика Firefox также включают в себя инспектор Flexbox, подсветку которого можно включать и выключать в нескольких местах. За счет клика на 'flex'-кнопках, вы можете увидеть подсветку сетки flexbox-элементов.
Также можно посмотреть подробные свойства flexbox-элементов, переключившись на вкладку Разметка в Инспекторе. Можете посмотреть самостоятельно на примере разметки 2 колоночного flexbox-макета.
По каждому элементу также можно посмотреть данные, кликнув по стрелке вправо.
CSS Grid Inspector
В Firefox также есть замечательный инспектор CSS Grid - то, что вы могли бы осознать, проверив любой макет, использующий Grid:
Вы увидите, что инспектор помечает любые элементы, которые используют flexbox или Grid. Взгляните на этот пример, чтобы увидеть ее в действии. В разделе правил вы увидите значок сетки рядом с элементами, которые используют сетку, разумеется, если включены соответствующая настройка.
Нажав на кнопку "grid", вы можете включить на вкладке Разметка маркеры, показывающие строки и столбцы, разрывы сетки и номера строк, а также имена областей, если они предусмотрены в коде.
Инспектор доступности
Следующим инспектором, предлагаемым инструментами разработчика Firefox, является инспектор специальных возможностей. Chrome также имеет функции проверки доступности, но у Firefox они немного отличаются. Включите их, посетив вкладку «Поддержка доступности» (Shift + F12) в Инспекторе.
Для управления спецвозможностями нажмите на кнопку "Включить функции поддержки доступности":
Mozilla рекомендует снова отключить их, как только вы закончите использовать их, поскольку они могут повлиять на производительность. Проверить страницу вы можете на соответствие контраста текста и правильности оформления текстовых полей.
В некоторых случаях имеет смысл это сделать, т.к. при изменении каких-то настроек или css-свойств вы можете не заметить, что текст заголовков слился с фоном, например. 
Возле элемента вы также увидите небольшой селектор - наведите курсор на него для получения всплывающей подсказки.
2. Инструменты разработчика
Давайте теперь посмотрим на некоторые инструменты для разработчиков.
Инструмент редактирования формы
Этот инструмент потрясающий. Например, если у вас есть маска обрезки, которая задана свойством clip-path, над изображением, вы можете редактировать значения полигонов непосредственно курсором мыши. Перетащите узлы, чтобы изменить форму, дважды щелкните путь, чтобы добавить новую точку, или дважды щелкните существующий узел, чтобы удалить его.
Этот инструмент также можно использовать со свойством shape-outside, что позволяет редактировать поле многоугольника вокруг исходной фигуры.
Редактор CSS-фильтров
В Инструментах разработчика Mozilla Firefox также есть редактор CSS-фильтров! Как и во всех доступных инструментах, нажмите значок рядом с соответствующим свойством, чтобы вызвать редактор / инспектор. В этом случае редактор фильтров позволяет вам манипулировать CSS-фильтрами, добавлять больше, удалять ненужные фильтры и сохранять предустановки, когда они могут понадобиться снова.
Просмотрщик изображений
Еще одна функция, которую вы вряд ли встретите в инструментах разработчика других браузеров, - это средство просмотра изображений. Наведите курсор на любой URL-адрес изображения в инспекторе CSS, и вы увидите удобный эскиз. Нажмите на него, и вы попадете в новое окно с изображением в нем.
Визуализатор изменений свойств группы CSS Transform
Возможность визуализации CSS-преобразований делает их создание намного проще, чем их кодирование. Например, при наведении указателя мыши на преобразование rotate() Firefox покажет вам исходную начальную позицию элемента вместе с новой позицией.
Точки позиционирования
Это прекрасный маленький бонусный инструмент. Когда элемент абсолютно позиционирован, щелкните по значку "absolute" на панели «Разметка» (Box model), чтобы отобразить маркеры, отображающие положение элемента. Нажмите и перетащите элемент за эти точки, чтобы поместить его в нужное вам положение без подгонки цифровых значений. Если же вам проще работать с числами, то клик по цифре, относящейся к какой-либо точке абсолютного позиционирования, позволит вам изменять значения, нажимая на клавиши ↓ ↑, чтобы увеличить (уменьшить) значение на 1 или, зажав клавишу Shift - на 10 единиц. То же относится и к относительно позиционированным элементам.
Удобные помощники
Здесь мы рассмотрим несколько полезных маленьких помощников, которые предлагает браузер Firefox.
Встроенная пипетка
Нажмите на этот значок на панели инспектора свойств, а затем щелкните в любом месте экрана, чтобы получить цвет блока и добавить его в буфер обмена.
Инструмент создания скриншотов
Инструмент создания скриншотов - это не то, что вы увидите по умолчанию, поэтому вам, возможно, придется включить его в настройках (сделать скриншот всей страницы). После того, как он станет доступен, вы увидите значок, который снимает скриншот всей страницы браузера и загружает его автоматически в папку загрузок (супер удобно!)
Дополнительные кнопки панели инструментов
Рядом с кнопкой снимка экрана можно добавить еще две иконки, если в настройках Инструментов разработчика (F1) вы установите еще 2 флажка:
- Линейки
- Инструмент измерения
Эти два полезных дополнения действительно полезны, если вы перфекционист!
Отображение обработчиков событий, записанных в JavaScript/jQuery
Еще одна важная особенность инструментов разработчика в Firefox - это возможность посмотреть, к каким элементам и какие обработчики событий привязаны. Причем неважно, каким способом назначен обработчик события - вы видите слово event - и можете просмотреть код функции, записанный для обработки данного события в JavaScript/jQuery.
На основе статьи 14 Firefox Developer Tools You Might Not Know About
