10 малоизвестных лайфхаков в инструментах разработчика Mozilla Firefox

Инструменты разработчика в браузере — высокомощное оружие программиста. Без них мы бы не понимали, почему элементы не выравниваются, картинки не загружаются, — не говоря уже о более сложных случаях.

Инструменты разработчика в Firefox стали значительно лучше и удобнее за последние годы. Давайте рассмотрим 10 лайфхаков их использования на примере гифок.

Инструменты разработчика в Mozilla

Сделать скриншот всей страницы

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

Скриншот всей страницы

Сделать скриншот одного узла

Выберите элемент в инспекторе элементов, нажмите на нем правой кнопкой и выберите Screenshot Node:

Сделать скриншот одного узла

Удалить класс из элемента

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

Оттуда вы можете также добавить новый класс элементу:

Удалить класс из элемента

Перетащить элемент в панели Элементов

В панели Элементов вы можете перетащить любой HTML элемент и поменять его расположение на странице:

Перетащить элемент в Панели элементов

Сослаться на выбранный элемент в Консоли

Выберите узел в панели Элементов и напечатайте $0 в консоли, чтобы сослаться на него:

Сослаться на элемент в Консоли

Получить быстрый доступ к селекторам API

Одна из классных функций Консоли инструментов разработчика — клавиши быстрого доступа к селекторам API:

$() — клавиша быстрого доступа к document.querySelector()
$$() — клавиша быстрого доступа document.querySelectorAll()

Использовать величину последней операции в Консоли

Используйте $_ , чтобы сослаться на значение возврата предыдущей операции, выполненной в Консоли:

Использовать величину последней операции

Сослаться на любой элемент из Инспектора в Консоли

Нажмите правой кнопкой на любом элементе и выберите Use in Console. Ему будет присвоена временная переменная:

Сослаться на элемент из Инспектора

Отладить JavaScript

Вы можете установить контрольные точки в исходных файлах JavaScript из панели Debugger и любое выражение в файле JS для контроля:

Отладить JavaScript

При перезагрузке странице контрольные точки и выражения останутся неизменными, и скрипт остановится в нужном месте:

Как отладить JavaScript

Узнать, какой шрифт используется

Элемент font-family в CSS позволяет установить список шрифтов, которые нужно использовать на странице. Если, к примеру, один шрифт не находится, используется второй и дальше по списку. Но непонятно, как узнать, какой шрифт применяется, когда вы смотрите на страницу. Легко — это тот, который подчеркнут:

Узнать, какой шрифт используется

Применять CSS Grid

CSS Grid — это недавно появившаяся крутая функция CSS.
В инструментах разработчика Firefox есть инспектор, который очень помогает при использовании сеток:

Применять CSS Grid

Источник: статья в издании Hackernoon

Понравилась статья? Оставь свой голос!
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (1 оценок, среднее: 5,00 из 5)
Загрузка...