Десятка незаменимых Firefox-надстроек веб-разработчика

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

1. Firefox Quantum

Стандартная версия Firefox, которую использует большинство пользователей. Пусть вас не смущает слово Quantum в названии — это новое имя браузера, которое дали разработчики после большого обновления в конце 2017 года. Именно благодаря этим доработкам программа смогла сравняться с Chrome по скорости и потреблению системных ресурсов.

Скачать →

2. Firefox Nightly

Firefox Nightly предназначен для активных пользователей, которые хотят участвовать в тестировании новых функций. Здесь они появляются задолго до того, как будут представлены в основной версии браузера.

Вместе с этим нужно быть готовым к возможным ошибкам или нестабильной работе этой версии программы. Поэтому использовать Firefox Nightly в качестве основного браузера мы не рекомендуем.

Скачать →

3. Firefox Beta

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

Обратите внимание, что эта версия тоже является тестовой. С помощью неё разработчики собирают обширную информацию об использовании браузера. И если для вас важна приватность, то Firefox Beta — не самый лучший выбор.

Скачать →

4. Firefox Developer Edition

Предназначение этого браузера прямо указано в названии — это инструмент для разработчиков. Именно поэтому в Firefox Developer Edition встроено множество функций и инструментов, которые облегчают веб-разработку.

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

Скачать →

5. Firefox Extended Support Release

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

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

Скачать →

Время чтения: 5 мин.

Браузер 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-селекторов проделываем следующие действия:

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. Более подробно на видео — .

Содержание

Вывод

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

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

Успехов!

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

Чтобы получать свежие статьи — выберите любой удобный для вас мессенджер ниже — просто кликните по нему: —> —>

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

Черт, у Firefox даже есть специальная версия браузера, созданного только для веб-разработчиков. Вот насколько сильно Mozilla заботится о веб-дизайнерах и разработчиках.

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

#1 Firebug

• Подходит: веб-дизайнерам и разработчикам
• Что делает: Инспектирует веб-страницы

#2 FireFTP

• Подходит: веб-разработчикам
• Что делает: клиент для Firefox

#3 Web Developer

• Подходит: веб-разработчикам и дизайнерам
• Что делает: анализ и проверка веб-страниц

#4 ColorZilla

• Подходит: дизайнерам интерфейсов
• Что делает: инструмент для анализа цвета

#5 Greasemonkey

• Подходит: веб-разработчикам
• Что делает: изменение веб-сайтов с настраиваемым кодом

#6 Pixel Perfect

• Подходит: дизайнерам интерфейсов
• Что делает: регулирует смещение веб-элементов

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

#7 DownloadThemAll

• Подходит: веб-дизайнерам
• Что делает: загружает все с веб-страницы

#8 IE Tab V2

• Подходит: дизайнерам интерфейсов
• Что делает: проверяйте веб-страницы в Internet Explorer

#9 BuiltWith

• Подходит: веб-дизайнерам и разработчикам
• Что делает: показывает о технологии, используемые на веб-сайте

#10 QuickJava

• Подходит: веб-разработчикам
• Что делает: включает или выключает Java

#11 MeasureIt

• Подходит: дизайнерам интерфейсов
• Что делает: Измеряет элементы в пикселях

#12 Quick Locale Switcher

• Подходит: веб-дизайнерам
• Что делает: переключает язык в браузере

#13 Dummy Lipsum

• Подходит: дизайнерам интерфейсов
• Что он делает: генерирует фиктивный текст

#14 Cookies Manager

• Подходит: веб-разработчикам
• Что делает: редактирует и создает cookie

#15 colorPicker

• Подходит: дизайнерам интерфейсов
• Что делает: выбирает цвета на веб-странице

#16 Wappalyzer

• Подходит: веб-дизайнерам и разработчикам
• Что делает: дает информацию о программном обеспечении, используемым веб-сайтом

#17 User-Agent Switcher

• Подходит: веб-разработчикам
• Что делает: изменяет пользовательский агент браузера

#18 Tab Memory Usage

• Подходит: веб-дизайнерам и разработчикам
• Что делает: показывает пример использования вкладки памяти браузера

#19 Open With Photoshop

• Подходит: веб-дизайнерам и графическим дизайнерам
• Что делает: открывает изображения в Photoshop

#20 TableTools2

• Подходит: дизайнерам интерфейсов
• Что делает: улучшает таблицы HTML

#21 FireSSH

• Подходит: веб-разработчикам
• Что делает: клиент SSH для Firefox

#22 Auto Refresh

• Подходит: дизайнерам интерфейсов
• Что делает: автоматически обновляет веб-страницы

#23 Firesizer

• Подходит: дизайнерам интерфейсов
• Что делает: изменяет размер окон Firefox для конкретных разрешений экрана

#24 Font Finder

• Подходит: веб-дизайнерам и разработчикам
• Что делает: находит информацию о шрифтах страницы и ее элементов

#25 Open With

• Подходит: дизайнерам интерфейсов
• Что делает: проверяет веб-страницы в различных браузерах

#26 Clear Cache

• Подходит: веб-дизайнерам и разработчикам
• Что делает: очищает кэш браузера

Это дополнение моментально очищает кэш браузера Firefox (RAM и DISK), чтобы сократить использование ресурсов компьютера. Расширение позволяет очистить кэш, просто нажав на кнопку или нажав клавишу F9 на клавиатуре. Если вы хотите быстро просмотреть изменения, внесенные на веб-страницу, это дополнение окажется очень полезным.

Источник

Используемые источники:

• https://lifehacker.ru/versii-firefox/
• https://sitehere.ru/10-poleznyx-funkcij-firefox-developer-dlya-veb-razrabotchikov
• https://freelance.today/poleznoe/26-interesnyh-rasshireniy-firefox-dlya-veb-dizaynerov-i-razrabotchikov.html