Бьюсь об заклад вы привыкли к инструментам разработчика в Chrome. Ежедневная проверка вёрстки, просмотр логов или анализ загрузку страницы делается на автопилоте. Но что если есть альтернатива, которая в некоторых моментах работает иначе и часто даже лучше?

Инструменты разработчика в Firefox создавались отдельно и имеют свою историю. Их команда не ставила задачу сделать копию Chrome. Вместо этого они сфокусировались на своих идеях о том, как сделать отладку более наглядной. В результате некоторые вещи там реализованы более прямолинейно и понятно. Конечно, не всё идеально, и у Chrome есть свои преимущества. Об этом сегодня и поговорим.

В этой статье мы посмотрим на Firefox DevTools в деталях. Отойдем от банальных соревнований в стиле «у кого DevTools длиннее». Вместо этого разберем, в каких ситуациях панель Firefox может сэкономить вам время, а в каких всё же удобнее остаться в Chrome. Откроем для себя несколько приёмов, которые можно добавить в свою ежедневную работу, независимо от браузера.

Возможности Chrome DevTools я подробно разобрал в прошлой статье.

❯ 1. Первое впечатление и интерфейс

1.1. Как открыть и горячие клавиши

Открыть Firefox Developer Tools так же просто, как и в Chrome. Нажми клавишу F12, сочетание Ctrl+Shift+I (Cmd+Opt+I на Mac) или используй пункт «Исследовать элемент» в контекстном меню. Сочетание Ctrl+Shift+C для быстрого выбора элемента тоже работает.

1.2. Знакомство с интерфейсом и вкладками

Сразу видно, что интерфейс очень похож. Вверху узнаваемые вкладки: Инспектор (аналог Elements), Консоль, Отладчик (Sources), Сеть (Network) и т. д.

Основное отличие, которое бросается в глаза, это структура вкладки «Инспектор». Вместо разделения на две части, как в Chrome, Firefox использует тройную панель. Слева дерево DOM, посередине все CSS правила элемента, а справа дополнительные инструменты вроде модели Flexbox или просмотра доступности. Про вкладку «Инспектор», более подробно будет описано ниже.

1.3. Настройка под себя

Панель можно прикрепить к любой стороне окна или вынести отдельно через меню с тремя точками. Там же находится пункт «Настройки» (или клавиша F1), где меняются темы светлая или темная и включаются экспериментальные функции браузера. Гибко переставлять сами вкладки местами, как в Chrome, не получится, это основное ограничение в настройках расположения.

❯ 2. Вкладка Инспектор

Именно за эту вкладку многие веб-разработчики выбирают Firefox. Здесь визуализация CSS реализована удобнее, чем у аналогов.

Разберем уникальные вещи у Firefox Devtools, не смотря на то, что идентично с Chrome.

2.1. Работа с CSS Grid и Flexbox

Для просмотра сетки достаточно нажать на значок grid рядом с элементом в DOM-дереве. Линии сразу отрисуются поверх страницы.

Но основные удобства расположились во вкладке «Разметка» (Layout). Там можно включить отображение номеров линий и названий грид-областей, что сильно упрощает отладку сложных макетов.

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

2.2. Вкладка Fonts (Шрифты)

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

Главная особенность — поддержка вариативных шрифтов. Если шрифт это умеет, вы увидите ползунки. Ими можно регулировать жирность, наклон и другие параметры на лету, не прописывая font-variation-settings вручную.

2.3. Вкладка Changes (Изменения)

Эта вкладка работает как локальный git diff. Она собирает все правки стилей, которые вы сделали в текущей сессии. Новые строки подсвечиваются зеленым, удаленные — красным. Вам не нужно искать измененные селекторы по разным файлам: просто нажмите «Копировать все изменения» и вставьте готовый код в свой редактор.

2.4. Анимации

Для настройки плавности переходов здесь есть удобный редактор кривых Безье. Вы тянете за точки графика и сразу видите результат.

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

❯ 3. Вкладка Консоль

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

3.1. Многострочный ввод

Набирать длинный код в обычной консоли неудобно. Приходится постоянно жать Shift+Enter для переноса строки, а случайно нажатый Enter отправляет недописанный кусок и вызывает ошибку.

В Firefox эту проблему решили кардинально. Консоль изначально разделена на две части. Слева полноценный редактор кода. В нем можно спокойно писать функции, объявлять переменные и форматировать текст, как в IDE. Когда код готов, нажимаете «Запустить», и результат появляется в правой части окна. Это намного удобнее для экспериментов с логикой прямо на живом сайте.

3.2. Фильтрация и вывод объектов

Работа с логами здесь ощущается немного чище. Браузер группирует повторяющиеся сообщения, чтобы не засорять эфир. Поиск работает глубоко: он ищет совпадения не только в тексте сообщений, но и внутри свойств объектов, которые вы вывели в лог. Если нужно сохранить историю после перезагрузки страницы, просто включите опцию «Непрерывныелоги» (Persist Logs) в настройках.

4. Вкладка Отладчик

То, что в Chrome называется «Sources», здесь просто «Отладчик». Интерфейс выполняет ту же задачу: навигацию по файлам и остановку кода, но визуально он воспринимается легче.

4.1. Навигация и брейкпоинты

Слева находится список файлов во вкладке «Исходники». Поиск по ним работает через соседнюю вкладку «Поиск». Чтобы поставить брейкпоинт, кликните на номер строки на центральной панели.

Главное визуальное преимущество проявляется при остановке скрипта. Firefox показывает значения переменных прямо внутри кода, в конце строки, где эта переменная используется.

4.2. Подсветка синтаксиса

Даже если код минифицирован, кнопка {} внизу панели вернет ему «человеческий» вид. При этом подсветка синтаксиса в Firefox часто работает корректнее и контрастнее, чем в том же Chrome, но это субъективно.

5. Вкладка Сеть

Здесь находится один из самых полезных инструментов для работы с API, который позволяет тестировать бэкенд прямо из браузера.

5.1. Изменение и повторная отправка

Вам не нужно копировать запрос в Postman, чтобы проверить, как сервер отреагирует на другие данные. Просто кликните правой кнопкой мыши по строке запроса и выберите «Изменить и снова отправить».

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

5.2. Просмотр ответов

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

❯ 6. Вкладка Поддержка доступности

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

6.1. Дерево доступности

Браузеры строят страницу дважды: сначала DOM-дерево для отображения, а затем дерево доступности для скринридеров.

Здесь вы видите именно второе. Вкладка показывает структуру сайта так, как её «слышат» программы чтения с экрана. Для каждого элемента можно сразу проверить его роль (кнопка, ссылка, заголовок) и доступное имя. Это позволяет мгновенно заметить, если у кнопки нет подписи или картинка не имеет alt текста, не запуская сам скринридер.

6.2. Проверка проблем

В верхней части панели есть меню «Проверка на проблемы». Выберите «Все проблемы», и инструмент просканирует текущую страницу.

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

Следующая глава про небольшие, но очень полезные инструменты, которые встроены прямо в браузер.

❯ 7. Полезные мелочи

В Firefox есть еще несколько вкладок, но они ничем не отличаются от Chrome, поэтому разберём оставшиеся функции, ради которых в других браузерах приходится ставить отдельные расширения.

7.1. Скриншоты элементов и страницы

Сделать скриншот всей длинной страницы или конкретного блока здесь можно в два клика.

Чтобы сохранить изображение отдельного элемента, просто кликните правой кнопкой мыши по нужному узлу на вкладке «Инспектор» и выберите «Скриншот узла». Браузер сохранит картинку именно этого блока, обрезав всё лишнее, даже если элемент не помещается на одном экране.

Если нужно сфоткать всю страницу целиком с прокруткой, то просто кликните правой кнопкой мыши по странице и выберите «Сделать снимок экрана». Это скорее особенность просто браузера, но все же удобно.

7.2. Системная пипетка

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

В Firefox инструмент работает на уровне операционной системы. Вы можете нажать на иконку пипетки, вынести курсор за пределы браузера и взять образец цвета с рабочего стола, из интерфейса другой программы или макета в Figma. Скопированный код цвета сразу попадет в буфер обмена. Это очень удобно, когда нужно быстро перенести оттенок из дизайна в верстку.

❯ Итоги

Firefox DevTools ощущаются как инструменты, созданные с большой любовью к верстке и дизайну. Если ваша задача собрать сложный Grid-макет, настроить вариативные шрифты, подогнать анимацию или проверить доступность — тут вы сделаете это быстрее. Визуализация на голову выше, а возможность редактировать и повторно отправлять сетевые запросы экономит время при работе с API.

Chrome DevTools остаются стандартом индустрии не просто так. Когда дело доходит до профилирования производительности, поиска утечек памяти или отладки очень тяжелых JavaScript-приложений, инструменты Chrome часто показывают себя лучше.

Пожалуй, лучший совет, который я могу дать: не ограничивайте себя одним браузером. Попробуйте использовать Firefox для задач верстки и стилизации — вы удивитесь, насколько удобнее может быть работа с CSS. А для глубокой инженерии и проверки скорости оставьте Chrome.

Удачи в разработке!

Новости, обзоры продуктов и конкурсы от команды Timeweb.Cloud — в нашем Telegram-канале ↩