Лого www.SiteHere.ru

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

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

Если Вы используете браузер 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-селекторов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

V Видео

Содержание

Вывод

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

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

Успехов!

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

10 полезных функций Firefox Developer для веб-разработчиков 5.00/5 (100.00%) 5 голос(ов)

Понравилась статья - расскажи друзьям! :)

Из чего состоит любой сайт? HTML
+
CSS
+
JS
Технологии не поддаются обучению?
2 комментария к записи
  • Владимир

    Интересно, но хотелось бы узнать:

    Как в в версиях начиная с 29 вернуть старый вид ( систем ресторе делает пожоже, но не всё)?

    Короче убрать интерфейс аустралис и вернуть нормальный вид браузера, а не это подобие хрома ( очень не удобное)

     
  • Миха

          У меня установлена новая 42.0, 64х битная Файерфокс, смогу ли я применять всё это, на моей версии. До этого была 32х битная 42.0, но 64 намного лучше.  

     

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

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