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

Автор оригинала: Alex Lakatos
  • Перевод
  • Tutorial


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


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




Инспектор


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



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


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

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



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


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


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



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


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



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


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


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



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




Консоль


Применение CSS


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


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


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



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


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


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


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


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


cd(iframe)


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


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


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


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


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




Дебагер JavaScript


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



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


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



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


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


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


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



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


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



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


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



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




Сеть


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



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


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



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


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


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



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


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



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


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



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




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


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



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


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



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


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



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


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



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


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



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




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


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



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


Удаление Cookies



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


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


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



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


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



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


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



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




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

Похожие публикации

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 6

    +1
    Ого, бешенная лиса на картинке — это явно не то, что должно привлекать к продукту.
      0
      Это копия перевода с pcnews.ru или свой перевод mozilla.org/en-US/firefox/xx.x/releasenotes?

      На какую версию браузера сие распространяется? На 71.0 или более ранние?
        +1
        Если кого-то, как и меня заинтересовала картинка с вопросом, вот:
        Q: «What is the biggest lie in the entire universe?»
        A: «I have read and agree to the Terms & Conditions.»
          +2

          А еще с 71 версии включен websocket inspector наконец-то.

            +1
            Что там с WS? Frame можно просматривать или до сих пор нет?
              +1

              С версии 71 можно

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое