10 полезных инструментов для разработчиков Firefox, которые вы должны знать
Firefox, являющийся «браузером разработчика», имеет множество отличных инструментов, которые помогут сделать нашу работу проще. Вы можете найти больше информации о его наборе инструментов на веб-странице Firefox Developer Tools, а также попробовать их браузер Developer Edition, который имеет больше функций и инструментов, которые тестируются..
Для этого поста я перечислил 10 удобных инструментов вам может понравиться из его коллекции инструментов разработчика. Я также продемонстрировал, что эти инструменты могут делать с GIF-файлами, а также как получить к ним доступ для быстрого ознакомления..
1. Просмотр горизонтальных и вертикальных линейок
Firefox имеет инструмент линейки, который отображает горизонтальные и вертикальные линейки с пиксельными единицами на странице. Инструмент полезен для размещения ваших элементов по всей странице.
Чтобы получить доступ к линейкам через меню, перейдите по ссылке: ☰> разработчик > Панель инструментов разработчика (сочетание клавиш: Shift + F2). Когда панель инструментов появится внизу страницы, введите правители и нажмите Войти.
Чтобы это появилось в окне инструментов разработчика, перейдите в «Параметры панели инструментов». В разделе «Доступные кнопки панели инструментов» установите флажок «Переключить линейки для страницыфлажок.
2. Делайте скриншоты с помощью селекторов CSS
Хотя панель инструментов Firefox позволяет делать снимки экрана полной страницы или видимых фрагментов, на мой взгляд, метод селектора CSS более полезен для захвата скриншоты отдельных элементов а также для элементы, которые видны при наведении мыши только (как меню).
Чтобы сделать скриншоты через меню, перейдите к ☰> разработчик > Панель инструментов разработчика (сочетание клавиш Shift + F2). Когда панель инструментов появится внизу страницы, введите скриншот --selector any_unique_css_selector и нажмите войти.
Чтобы это появилось в окне инструментов разработчика: нажмите «Параметры панели инструментов» и в разделе «Доступные кнопки панели инструментов» установите флажок «Сделать полный снимок экрана " флажок.
3. Выберите цвета с веб-страниц
Firefox имеет встроенный инструмент выбора цвета под названием «Пипетка». Для доступа к инструменту «Пипетка» через меню перейдите к ☰> разработчик > глазная пипетка.
Чтобы это появилось в окне инструментов разработчика: нажмите «Параметры панели инструментов» и в разделе «Доступные кнопки панели инструментов» проверьте раздел »Возьмите цвет со страницыфлажок.
4. Просмотр макета страницы в 3D
Просмотр веб-страниц в 3D помогает решить проблемы с макетом. Вы сможете увидеть различные многоуровневые элементы гораздо более четко в 3D-виде. Чтобы просмотреть веб-страницу в 3D, нажмите кнопку «3D вид».
Чтобы это появилось в окне инструментов разработчика, нажмите «Параметры панели инструментов» и в разделе «Доступные кнопки панели инструментов» установите флажок «3D видфлажок.
5. Просмотр стиля браузера
Стили браузера имеют два типа: стиль по умолчанию, который браузер назначает для каждого элемента, и стили, специфичные для браузера (стили с префиксом браузера). Взглянув на стили браузера, вы сможете диагностировать любые проблемы переопределения в вашей таблице стилей а также узнать о любых существующих браузер-специфических стилях .
Для доступа к «стилям браузера» через меню перейдите к to> разработчик > Инспектор. Затем нажмите вкладку «Вычисленные» в правом разделе и установите флажок «Стили браузера»..
Вы также можете открытьИнспектор"нажмите сочетание клавиш Ctrl + Shift + C, а затем откройте" Стили браузера ".
6. Отключите JavaScript для текущего сеанса
Для обеспечения лучшей практики и совместимости с программами чтения с экрана всегда рекомендуется кодировать любой веб-сайт таким образом, чтобы его функциональность не была нарушена в среде с отключенным JavaScript. Чтобы проверить для таких сред, вы можете отключить JavaScript для сеанса, в котором вы работаете.
Чтобы отключить JavaScript для текущего сеанса, нажмите «Параметры панели инструментов» и в разделе «Дополнительные настройки» установите флажок «Отключить JavaScript* "флажок.
7. Скрыть стиль CSS со страницы
Как и в случае с JavaScript, из-за проблем с доступностью лучше всего разрабатывать веб-сайты таким образом, чтобы страницы должны быть читаемыми даже без каких-либо стилей. Чтобы увидеть, как выглядит страница без какого-либо стиля, вы можете отключить их в инструментах разработчика..
Чтобы удалить любой стиль CSS (встроенный, внутренний или внешний), примененный к веб-странице, просто нажмите на символ глаза из перечисленных таблиц стилей на вкладке «Редактор стилей». Нажмите еще раз, чтобы вернуться к исходному виду.
Для доступа к «Редактору стилей» через меню перейдите к ☰> разработчик > Редактор стилей (сочетание клавиш: Shift + F7.
8. Предварительный просмотр ответа HTML-контента на запрос
Инструменты разработчика Firefox имеют возможность Предварительный просмотр ответов типа контента HTML. Это помогает разработчику просматривать любые перенаправления 302 и проверять, была ли предоставлена конфиденциальная информация в ответе..
Для доступа к «Предварительному просмотру» через меню перейдите к ☰> разработчик > сеть (сочетание клавиш: Ctrl + Shift + Q. Затем откройте веб-страницу по вашему выбору или перезагрузите текущую страницу, нажмите на желаемый запрос (с ответом HTML) из списка запросов и нажмите "предварительный просмотрвкладка в правом разделе.
9. Предварительный просмотр веб-страницы на разных размерах экрана
Чтобы проверить отзывчивость веб-страницы, используйте «Адаптивное представление дизайна», к которому можно получить доступ ☰> разработчик > Адаптивный дизайн или с помощью ярлыка: Ctrl + Shift + M.
Чтобы отобразить кнопку инструмента «Режим адаптивного дизайна», нажмите «Параметры панели инструментов» и в разделе «Доступные кнопки панели инструментов» установите флажок «Режим адаптивного дизайна»..
10. Запустите JavaScript на страницах
Для быстрого выполнения JavaScript на любой веб-странице просто используйте инструмент «Scratchpad» Firefox. Для доступа к «Скретчпаду» через меню перейдите по ссылке; ☰> разработчик > блокнот или используйте сочетание клавиш Shift + F4.
Чтобы кнопка «Scratchpad» появилась в окне инструментов разработчика для быстрого использования: нажмите «Параметры панели инструментов"и под"Доступные кнопки панели инструментовраздел "Скретчпад" флажок.
