- PVSM.RU - https://www.pvsm.ru -
Ниже приведены фичи и советы по использованию Firefox Developer Tools. Некоторые из них аналогичны возможностям инструментов в Chrome, для некоторых аналоги в других браузерах отсутствуют.
Осторожно, под катом много тяжёлых гифок!
Очень удобно использовать для:
Вы можете отфильтровать правила CSS по любому селектору или свойству.
Для селекторов фильтр выделит цветом селекторы в списке правил. Для свойств инструмент развернёт все свойства, содержащие ваш фильтр, выделит их цветом, а так же скроет правила, где свойств из фильтра не содержится.
Кликните по любой точке с цветом в инспекторе, чтобы открыть удобный инструмент.
Shift+клик на цветной точке позволяет менять представление цвета (имя/hex/hsl/rgb).
Shift+клик на точке рядом с углом позволяет менять единицы измерения угла.
Кликните на точке с искривлённой линией рядом со свойством функции времени, чтобы открыть удобный редактор. Там будут как предопределённые функции, так и возможность настроить свой вариант вручную.
console.log(“#%c%s%c%s”, “color: #bada55”, “dev”, “color: #c55”, “tricks”)
Поддерживаются не все свойства, но весьма много [1].
Нажмите CTRL+R на Mac (и F9 на Windows и Linux). После чего используйте CTRL+R / CTRL+S (F9 / SHIFT+F9) для листания результатов вперёд / назад. В отличие от стрелочек, сочетания клавиш выше будут работать и между сессиями.
:screenshot — fullpage
:screenshot — selector .css-selector
Гораздо удобнее просто указать селектор, чем пытаться точно выделить нужную область мышкой.
cd(iframe)
Вы можете переключаться на контекст iframe по селектору, используя cd().
console.time(“#devtricks”)
console.timeEnd(“#devtricks”)
Запустить таймер — console.time(“метка”),
остановить его - console.timeEnd(“метка”).
Для создания точки надо сделать правый клик на номере строки. Точка будет активной только при выполнении условия.
Поиск по имени файла — CMD + P на Mac (и CTRL + P на Windows и Linux).
Напечатайте "@" в том же инпуте, чтобы искать по объявлению функции в файле.
Напечатайте ":" в том же инпуте, чтобы быстро добраться до строки по её номеру.
Нажмите на иконку {}, чтобы посмотреть красивый код вместо минифицированного.
Точка станет активной при попытке обратиться к урлу и покажет ответственный за обращение код.
Отключённые точки останутся доступны для включения и использования в будущем.
Редактируйте отправленные запросы и оправляйте их заново.
Фильтр по домену — CMD + F на Mac (или CTRL + F на Windows и Linux).
Если вам нужно найти все запросы, без домена, добавьте чёрточку (-) перед фильтром.
Проверьте как сайт будет загружаться при медленном интернете.
Кликните по иконке с таймером, чтобы посмотреть производительность запросов, который делает сайт. Страница будет загружена дважды — без кэша (эмулируя первую загрузку) и с кэшом (эмулируя повторное обращение).
Сохраняем совершённые запросы в архивный формат [2]. Удобно, чтобы обмениваться с коллегами по разработке.
Просматривайте, как будет выглядеть сайт для устройств с кастомным разрешением.
Смотрим загрузку мобильной версии на мобильной скорости интернета.
За это отвечает маленькая иконка с «рукой». Эмулируются, в том числе долгие тапы.
Не забудьте включить в настройках пункт «Перезагружать страницу при смене UA» — сэкономите время.
Удобно, если хотите разместить панели справа (например, для дебага).
Сделайте двойной клик по ячейке, значение которой хотите поменять.
Легче всего удалить куки, выделив их и нажав Backsapce.
Обратите внимание на опции контекстного меню. Очень удобной является опция «Удалить все для домена», но учтите, что домен должен быть точным (т.е. удаление кук для .medium.com не удалит их для medium.com)
Оранжевым мигают куки, которые только что были изменены.
Увидеть изменения записей IndexedDB в реальном времени не получится, поэтому чтобы получить наиболее актуальный снимок БД, используйте кнопку «обновить».
Правый клик по заголовку таблицы поможет скрыть неинтересные столбцы.
На этом всё. Надеюсь, советы были вам полезны!
Автор: QueenOfTheEarth
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/340451
Ссылки в тексте:
[1] весьма много: https://developer.mozilla.org/en-US/docs/Web/API/Console#Styling_console_output
[2] архивный формат: https://w3c.github.io/web-performance/specs/HAR/Overview.html
[3] Источник: https://habr.com/ru/post/481036/?utm_campaign=481036&utm_source=habrahabr&utm_medium=rss
Нажмите здесь для печати.