Полезные инструменты для разработчиков сайтов в Firefox

2015-11-28 Инструменты Mr.Edyan 1 107 0

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

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

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

1. Просмотр горизонтальных и вертикальных линеек

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

Он доступен в меню браузера в разделе ☰ > Разработка > Панель разработки (или по сочетанию клавиш

Shift

). Появится панель в нижней части страницы, введите в неё команду

rulers

и нажмите

Enter

Чтобы опция отображалась в окне панели инструментов, откройте в меню Инструменты (иконка с тремя вертикальными полосами) > Веб-разработка - Инструменты разработки. Кликните на значок шестерёнки в правой области, далее найдите надпись «Доступные кнопки инструментов» активируйте флажок «Переключить отображение линеек для этой страницы».

2. Съёмка скриншотов при помощи селекторов CSS

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

Откройте ☰ > Разработка > Панель разработки (

Shift

). Введите команду

screenshot --selector any_unique_css_selector

и нажмите ввод.

Чтобы опция появилась в окне панели инструментов, откройте его (см. описание в пункте 1) и в разделе «Доступные кнопки инструментов» установите галочку «Сделать скриншот всей страницы».

3. Узнайте цвет веб-страницы

Firefox имеет встроенный инструмент анализа цвета под названием Пипетка (Eyedropper). Инструмент доступен по адресу ☰ > Разработка > Пипетка.

Чтобы опция показалась в окне панели инструментов, откройте его и в колонке «Доступные кнопки инструментов» поставьте галочку «Захватить цвет со страницы».

4. Просмотр макета страницы в 3D

При проблемах с размещением элементов страницы помочь может просмотр её трёхмерной модели. В 3D вы сможете гораздо более чётко увидеть различные элементы в разных слоях страницы. Для просмотра веб-страницы в 3D нажмите кнопку «3D-вид».

Чтобы эта кнопка отображалась в панели инструментов, откройте её и в разделе «Доступные кнопки инструментов» установите флажок «3D-вид».

5. Просмотр стиля браузера

Стили браузеров бывают двух типов: стиль по умолчанию, который браузер присваивает каждому элементу, и стиль для конкретного обозревателя (с префиксом браузера). Увидев установленный стиль, вы сможете решить проблемы с переопределением ваших стилей, а также узнать о существующих стилях для определённых браузеров.

Чтобы получить доступ к стилям браузера через меню, откройте ☰ > Разработка > Инспектор. Откройте вкладку «Вычислено» в правой части и проверьте флажок «Стили браузера». Вы также можете открыть вкладку «Инспектор» через сочетание клавиш

Ctrl

Shift

6. Отключаем javascript для текущей сессии

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

Для этого откройте меню Инструменты > Веб-разработка - Инструменты разработки. Нажмите на иконку шестерёнки справа и в разделе «Дополнительные параметры» активируйте флажок «Отключить javascript*».

7. Скрываем стили CSS на странице

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

Чтобы удалить CSS-стиль (inline, внутренний или внешний) с веб-страницы, откройте «Инструменты разработки», вкладку «Стили» и нажмите на символ глаза в списке стилей. Нажмите ещё раз, чтобы вернуть страницу к первоначальному виду.

Чтобы получить доступ к редактору стилей через меню, выберите ☰ > Разработка > Стили (

Shift

8. Предварительный просмотр реакции HTML-содержимого на запрос

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

В меню откройте ☰ > Разработка > Сеть (

Ctrl

Shift

). Затем откройте веб-страницу по своему выбору или обновите текущую страницу, щёлкните на нужном запросе (с ответом кода HTML) из списка запросов и нажмите в правой части экрана на вкладку «Ответ».

9. Предварительный просмотр веб-страницы на экранах разных размеров

Чтобы проверить веб-страницы на адаптивность, откройте в меню ☰ > Разработка > Адаптивный дизайн (

Ctrl

Shift

). Чтобы отображалась соответствующая кнопка, откройте меню Инструменты > Веб-разработка - Инструменты разработки. Нажмите на шестерёнку с правой стороны и в разделе «Доступные кнопки инструментов» поставьте галочку «Режим адаптивного дизайна».

Проверка адаптивности в браузере Firefox

10. Запустите javascript на страницах

Для выполнения кода javascript на любой веб-странице используйте инструмент под названием «Простой редактор javascript». Откройте ☰ > РазработкаПростой редактор javascript (

Shift

Чтобы показывалась данная кнопка, откройте меню Инструменты в правом верхнем углу > Веб-разработка - Инструменты разработки. Нажмите на иконку шестерёнки справа и в разделе «Доступные кнопки инструментов» активируйте флажок «Простой редактор javascript».

Добавочные статьи из категории «Инструменты»