30 полезностей для Firefox Developer Tools

в 15:28, , рубрики: css, Firefox, firefox developer tools, javascript, веб-дизайн, Разработка веб-сайтов
30 полезностей для Firefox Developer Tools - 1

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

Осторожно, под катом много тяжёлых гифок!


Инспектор

Поиск по CSS селектору

30 полезностей для Firefox Developer Tools - 2

Очень удобно использовать для:

  • элементов с `z-index`, на которые не получается кликнуть
  • визуально одинаковых элементов, для которых вы знаете селектор

Фильтр стилей

30 полезностей для Firefox Developer Tools - 3

Вы можете отфильтровать правила CSS по любому селектору или свойству.

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

Выбор цвета и «Пипетка»

30 полезностей для Firefox Developer Tools - 4

Кликните по любой точке с цветом в инспекторе, чтобы открыть удобный инструмент.

Смена представлений цвета

30 полезностей для Firefox Developer Tools - 5

Shift+клик на цветной точке позволяет менять представление цвета (имя/hex/hsl/rgb).

Shift+клик на точке рядом с углом позволяет менять единицы измерения угла.

Редактирование кривых Безье функций времени

30 полезностей для Firefox Developer Tools - 6

Кликните на точке с искривлённой линией рядом со свойством функции времени, чтобы открыть удобный редактор. Там будут как предопределённые функции, так и возможность настроить свой вариант вручную.


Консоль

Применение CSS

console.log(“#%c%s%c%s”, “color: #bada55”, “dev”, “color: #c55”, “tricks”)

30 полезностей для Firefox Developer Tools - 7

Поддерживаются не все свойства, но весьма много.

Поиск по истории

30 полезностей для Firefox Developer Tools - 8

Нажмите CTRL+R на Mac (и F9 на Windows и Linux). После чего используйте CTRL+RCTRL+S (F9SHIFT+F9) для листания результатов вперёд / назад. В отличие от стрелочек, сочетания клавиш выше будут работать и между сессиями.

Скриншот страницы или её элемента

:screenshot — fullpage
:screenshot — selector .css-selector

30 полезностей для Firefox Developer Tools - 9

Гораздо удобнее просто указать селектор, чем пытаться точно выделить нужную область мышкой.

Переключение контекста JavaScript

cd(iframe)

30 полезностей для Firefox Developer Tools - 10

Вы можете переключаться на контекст iframe по селектору, используя cd().

Метки в таймере

console.time(“#devtricks”)
console.timeEnd(“#devtricks”)

30 полезностей для Firefox Developer Tools - 11

Запустить таймер — console.time(“метка”),

остановить его - console.timeEnd(“метка”).


Дебагер JavaScript

Условные точки останова

30 полезностей для Firefox Developer Tools - 12

Для создания точки надо сделать правый клик на номере строки. Точка будет активной только при выполнении условия.

Поиск по имени функции или номеру строки

30 полезностей для Firefox Developer Tools - 13

Поиск по имени файла — CMD + P на Mac (и CTRL + P на Windows и Linux).

Напечатайте "@" в том же инпуте, чтобы искать по объявлению функции в файле.

Напечатайте ":" в том же инпуте, чтобы быстро добраться до строки по её номеру.

Красивый вывод минифицированного кода

30 полезностей для Firefox Developer Tools - 14

Нажмите на иконку {}, чтобы посмотреть красивый код вместо минифицированного.

Точки останова для URL

30 полезностей для Firefox Developer Tools - 15

Точка станет активной при попытке обратиться к урлу и покажет ответственный за обращение код.

Отключить точки останова

30 полезностей для Firefox Developer Tools - 16

Отключённые точки останутся доступны для включения и использования в будущем.


Сеть

Редактирование и пересылка HTTP запросов

30 полезностей для Firefox Developer Tools - 17

Редактируйте отправленные запросы и оправляйте их заново.

Фильтр запросов

30 полезностей для Firefox Developer Tools - 18

Фильтр по домену — CMD + F на Mac (или CTRL + F на Windows и Linux).

Если вам нужно найти все запросы, без домена, добавьте чёрточку (-) перед фильтром.

Ограничение скорости

30 полезностей для Firefox Developer Tools - 19

Проверьте как сайт будет загружаться при медленном интернете.

Горячее/Холодное профилирование

30 полезностей для Firefox Developer Tools - 20

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

Сохранение/Загрузка HAR

30 полезностей для Firefox Developer Tools - 21

Сохраняем совершённые запросы в архивный формат. Удобно, чтобы обмениваться с коллегами по разработке.


Отзывчивый дизайн

Кастомное устройство

30 полезностей для Firefox Developer Tools - 22

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

Ограничение скорости

30 полезностей для Firefox Developer Tools - 23

Смотрим загрузку мобильной версии на мобильной скорости интернета.

Эмулирование тачей

30 полезностей для Firefox Developer Tools - 24

За это отвечает маленькая иконка с «рукой». Эмулируются, в том числе долгие тапы.

Изменение User-Agent

30 полезностей для Firefox Developer Tools - 25

Не забудьте включить в настройках пункт «Перезагружать страницу при смене UA» — сэкономите время.

Выравнивание вьюпорта по левому краю

30 полезностей для Firefox Developer Tools - 26

Удобно, если хотите разместить панели справа (например, для дебага).


Инспектор хранилища

Редактирование Cookies

30 полезностей для Firefox Developer Tools - 27

Сделайте двойной клик по ячейке, значение которой хотите поменять.

Удаление Cookies

30 полезностей для Firefox Developer Tools - 28

Легче всего удалить куки, выделив их и нажав Backsapce.

Обратите внимание на опции контекстного меню. Очень удобной является опция «Удалить все для домена», но учтите, что домен должен быть точным (т.е. удаление кук для .medium.com не удалит их для medium.com)

Изменение Cookies в реальном времени

30 полезностей для Firefox Developer Tools - 29

Оранжевым мигают куки, которые только что были изменены.

Статические снимки для IndexedDB

30 полезностей для Firefox Developer Tools - 30

Увидеть изменения записей IndexedDB в реальном времени не получится, поэтому чтобы получить наиболее актуальный снимок БД, используйте кнопку «обновить».

Изменение отображаемых столбцов таблицы

30 полезностей для Firefox Developer Tools - 31

Правый клик по заголовку таблицы поможет скрыть неинтересные столбцы.


На этом всё. Надеюсь, советы были вам полезны!

Автор: QueenOfTheEarth

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js