10 полезных функций Firefox Developer для веб-разработчиков

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

Если Вы используете браузер Google Chrome, тогда обязательно посмотрите следующую подборку плагинов:

• 7 плагинов Google Chrome для владельцев сайтов

Возможности Firefox Developer

Если у Вас вдруг нет этого браузера, то скачать последнюю версию Firefox Developer можно здесь — Скачать Firefox с официального сайта.

Ну что ж, давайте посмотрим что же это за 10 инструментов браузера Firefox, которыми Вы можете воспользоваться сразу, как только установите его.

1 Показать вертикальную и горизонтальную линейку

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

Чтобы показать данную линейку Вам необходимо выполнить следующие действия:

1. На клавиатуре нажимаем сочетание клавиш SHIFT+F2.
2. В появившейся консоли внизу страницы вводим слово "rulers".
   И затем нажимаем ENTER.
3. Чтобы отключить линейки введите повторно слово "rulers".

Также горизонтальную и вертикальную линейку можно включить и без использования консоли. Как это сделать смотрите на видео — ПЕРЕЙТИ К ВИДЕО.

2 Делаем скриншоты с помощью CSS-селекторов

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

Чтобы сделать скриншот с помощью CSS-селекторов проделываем следующие действия:

1. Опять же на клавиатуре нажимаем сочетание клавиш SHIFT+F2, то есть включаем консоль.
2. В появившейся консоли вводим фразу "screenshot —selector ВАШ_CSS_СЕЛЕКТОР".
   И затем нажимаем ENTER. Затем у Вас появиться окошко, где необходимо будет выбрать папку для сохранения изображения.

О том, как сделать скриншот всей страницы смотрите видео — ПЕРЕЙТИ К ВИДЕО.

3 Определение цвета на странице

Также в Firefox Developer присутствует возможность определения цвета на странице.

Где находится данный интрумент и как он работает смотрите видео — ПЕРЕЙТИ К ВИДЕО.

4 Слои на странице в 3D

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

Чтобы увидеть свой сайт в 3D Вам необходимо сначала включить этот параметр в настройках Firefox Developer. Как это сделать смотрите видео — ПЕРЕЙТИ К ВИДЕО.

5 Стили браузера

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

Данную функцию также необходимо сначала включить в настройках Firefox Developer. Как это сделать смотрите видео — ПЕРЕЙТИ К ВИДЕО.

6 Отключение Javascript для текущей сессии

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

То есть отключаем Javascript во время текущей сессии и смело тестируем.

Отключить его можно в настройках Firefox Developer. Как это сделать смотрите видео — ПЕРЕЙТИ К ВИДЕО.

7 Динамическое отключение CSS

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

Чтобы отключить какой-либо из файла стилей, Вам необходимо открыть Firefox Developer, перейти в блок "Стили" и в правой колонке напротив необходимого файла стилей нажать на значок с глазом, чтобы он стал перечеркнутым.

Более подробно показано на видео — ПЕРЕЙТИ К ВИДЕО.

8 Определение шрифтов на странице

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

Узнать это можно при включенном инспекторе кода от Firefox Developer. Более подробно об этом на видео — ПЕРЕЙТИ К ВИДЕО.

9 Проверка адаптивности

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

Чтобы активировать данную функцию Вам необходимо на клавиатуре нажать сочетание клавиш:CTRL+SHIFT+M.

А затем Вам остается лишь изменять размер окна и тестировать под разные размеры экранов. Более подробно на видео — ПЕРЕЙТИ К ВИДЕО.

10 Выполнение Javascript на странице

Быстрый запуск Javascript кода на странице можно легко осуществить с помощью Firefox Developer. Здесь есть такая функция "Простой Javascript редактор". Здесь Вы можете писать любой Javascript код и он будет выполняться как обычный скрипт внутри страницы, то есть взаимодействовать со всеми элементами на ней.

Но его предварительно необходимо включить в настройках Firefox Developer. Более подробно на видео — ПЕРЕЙТИ К ВИДЕО.

V Видео

Содержание

• #1. Показать вертикальную и горизонтальную линейку
• #2. Делаем скриншоты с помощью CSS-селекторов
• #3. Определение цвета на странице
• #4. Слои на странице в 3D
• #5. Стили браузера
• #6. Отключение Javascript для текущей сессии
• #7. Динамическое отключение CSS
• #8. Определение шрифтов на странице
• #9. Проверка адаптивности
• #10. Выполнение Javascript на странице

Вывод

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

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

Успехов!

С Уважением, Юрий Немец