Вы здесь: Главная » HTML » Инструменты разработчика » Подробно об Инструментах разработчика Firefox

Подробно об Инструментах разработчика Firefox

В этом обзоре мы рассмотрим некоторые из замечательных инструментов разработчика, которые есть в браузере Firefox "из коробки", т.е. без установки дополнительных расширений.

Даже если Google Chrome является вашим основным браузером для разработки, в Firefox есть некоторые инструменты, которых нет в Chrome. Справедливо и обратное утверждение: в Chrome есть некоторые инструменты, которых нет у Firefox, но инструменты разработчика Firefox настолько полезны, что вы действительно выиграете, зная о них.

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

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

Для начинающих

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

Закрепляем инструменты разработчика

Если вы когда-либо пользовались инспектором в любом браузере, все это будет вам знакомо. То же самое относится и к настройкам Режима адаптивного дизайна (Responsive Design Mode), которые позволяют вам просматривать веб-страницы для различных экранах благодаря имитации нужных областей просмотра.

adaptive-mode-firefox

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

Кнопки адаптивного дизайна

Примечание: кстати, вы знали, что дополнить/уменьшить набор инструментов разработчика вы сможете, перейдя в настройки кликом по кнопке F1.

настройки инспектора Firefox

Все инструменты браузера содержат несколько инспекторов: HTML-инспектор и CSS-инспектор, но в Firefox есть и другие. Один из таких примеров является довольно новым и дает нам возможность проверять переменные шрифты.

Инспектор шрифтов

Переменные шрифты имеют дополнительные параметры помимо параметров обычных шрифтов - откройте инспектор и посмотрите на вкладку «Шрифты» (она может быть ниже инспектора свойств в зависимости от ширины открытого Инспектора свойств). Вы можете посмотреть на все используемые на странице шрифты:

Инспектор шрифтов Firefox

При выделении конкретного элемента можно узнать настройки шрифта именно для него.Инспектор шрифтов Firefox

Flexbox-инспектор

Инструменты разработчика Firefox также включают в себя инспектор Flexbox, подсветку которого можно включать и выключать в нескольких местах. За счет клика на 'flex'-кнопках, вы можете увидеть подсветку сетки flexbox-элементов.

flexbox-инспектор

Также можно посмотреть подробные свойства flexbox-элементов, переключившись на вкладку Разметка в Инспекторе. Можете посмотреть самостоятельно на примере разметки 2 колоночного flexbox-макета.

Разметка для flexbox

По каждому элементу также можно посмотреть данные, кликнув по стрелке вправо.

flexbox-инспектор для элемента

CSS Grid Inspector

В Firefox также есть замечательный инспектор CSS Grid - то, что вы могли бы осознать, проверив любой макет, использующий Grid:

Вы увидите, что инспектор помечает любые элементы, которые используют flexbox или Grid. Взгляните на этот пример, чтобы увидеть ее в действии. В разделе правил вы увидите значок сетки рядом с элементами, которые используют сетку, разумеется, если включены соответствующая настройка.

Линии разметки в grid-инспекторе

Нажав на кнопку "grid", вы можете включить на вкладке Разметка маркеры, показывающие строки и столбцы, разрывы сетки и номера строк, а также имена областей, если они предусмотрены в коде.

grid-инспектор

Инспектор доступности

Следующим инспектором, предлагаемым инструментами разработчика Firefox, является инспектор специальных возможностей. Chrome также имеет функции проверки доступности, но у Firefox они немного отличаются. Включите их, посетив вкладку «Поддержка доступности» (Shift + F12) в Инспекторе.

Для управления спецвозможностями нажмите на кнопку "Включить функции поддержки доступности":

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

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

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

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

Давайте теперь посмотрим на некоторые инструменты для разработчиков.

Инструмент редактирования формы

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

polygon clip-path

Этот инструмент также можно использовать со свойством shape-outside, что позволяет редактировать поле многоугольника вокруг исходной фигуры.

Редактор CSS-фильтров

В Инструментах разработчика Mozilla Firefox также есть редактор CSS-фильтров! Как и во всех доступных инструментах, нажмите значок рядом с соответствующим свойством, чтобы вызвать редактор / инспектор. В этом случае редактор фильтров позволяет вам манипулировать CSS-фильтрами, добавлять больше, удалять ненужные фильтры и сохранять предустановки, когда они могут понадобиться снова.

Редактор фильтров

Просмотрщик изображений

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

Просмотр изображений в CSS инспектора свойств Firefox

Визуализатор изменений свойств группы CSS Transform

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

rotate

Точки позиционирования

Это прекрасный маленький бонусный инструмент. Когда элемент абсолютно позиционирован, щелкните по значку "absolute" на панели «Разметка» (Box model), чтобы отобразить маркеры, отображающие положение элемента. Нажмите и перетащите элемент за эти точки, чтобы поместить его в нужное вам положение без подгонки цифровых значений.  Если же вам проще работать с числами, то клик по цифре, относящейся к какой-либо точке абсолютного позиционирования, позволит вам изменять значения, нажимая на клавиши ↓ ↑, чтобы увеличить (уменьшить) значение на 1 или, зажав клавишу Shift - на 10 единиц. То же относится и к относительно позиционированным элементам.

Изменение положение позиционированного элемента

Удобные помощники

Здесь мы рассмотрим несколько полезных маленьких помощников, которые предлагает браузер Firefox.

Встроенная пипетка

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

eyedropper

Инструмент создания скриншотов

Инструмент создания скриншотов - это не то, что вы увидите по умолчанию, поэтому вам, возможно, придется включить его в настройках (сделать скриншот всей страницы). После того, как он станет доступен, вы увидите значок, который снимает скриншот всей страницы браузера и загружает его автоматически в папку загрузок (супер удобно!)

Настройки для создания скриншотаКнопка для создания скриншота

Дополнительные кнопки панели инструментов

Рядом с кнопкой снимка экрана можно добавить еще две иконки, если в настройках Инструментов разработчика (F1) вы установите еще 2 флажка:

  • Линейки
  • Инструмент измерения

Эти два полезных дополнения действительно полезны, если вы перфекционист!

Линейки в Firefox

Отображение обработчиков событий, записанных в JavaScript/jQuery

Еще одна важная особенность инструментов разработчика в Firefox - это возможность посмотреть, к каким элементам и какие обработчики событий привязаны. Причем неважно, каким способом назначен обработчик события - вы видите слово event - и можете просмотреть код функции, записанный для  обработки данного события в JavaScript/jQuery.

Обработчик события в Firefox

Функция-обработчик события в Firefox

На основе статьи 14 Firefox Developer Tools You Might Not Know About

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *