Сделайте снимок экрана определенного элемента веб-страницы в Firefox.
Я хотел бы поделиться с вами классным трюком для Mozilla Firefox, который может повысить вашу продуктивность и сэкономить ваше время. Во время серфинга в Интернете вы иногда хотите поделиться чем-то с друзьями, сделав снимок экрана. Но требуется несколько шагов, чтобы сделать снимок экрана всей страницы, сохранить его, обрезать и т. Д. В этой статье мы увидим, как напрямую сделать снимок экрана определенного элемента на веб-странице без использования надстроек.
Рекламное объявление
Когда веб-страница загружается, ваш веб-браузер создает объектную модель документа для страницы. Модель DOM построена как древовидная структура, в которой каждый узел является объектом, представляющим часть документа.
Давайте посмотрим, как вы можете использовать это, чтобы захватить только определенный элемент на свой снимок экрана.
К сделать снимок экрана определенного элемента веб-страницы в Firefoxвыполните следующие действия:
- Откройте желаемую страницу в Firefox и щелкните правой кнопкой мыши элемент, который хотите записать.
- В контекстном меню выберите «Проверить элемент»:
- Инструмент инспектора откроется. Обратите внимание, что у него есть элемент управления для узлов дерева DOM:
- Там вы можете щелкнуть правой кнопкой мыши любой элемент и выбрать Узел снимков экрана из контекстного меню:
Это именно то, что нам нужно.
Самое замечательное в этой функции то, что она также захватывает длинные элементы, включая большинство элементов, требующих прокрутки. В моем случае вот как выглядит скриншот:
Как вариант, вы можете использовать встроенный Скриншот команда. Ранее я писал Как сделать снимок экрана открытой страницы в Firefox. В упомянутой статье мы использовали встроенную в Firefox команду «скриншот» для захвата всей страницы. Эту же функцию можно использовать для снятия скриншота определенного элемента на открытой странице.
- Откройте Firefox и нажмите Shift + F2 на клавиатуре. Firefox откроет консоль / командную строку внизу экрана.
- Введите в него следующую команду:
скриншот - селектор "имя"
Замените имя «часть» на соответствующее имя селектора. В моем случае это должно быть
скриншот --selector "# widget-apps> .iconlist> .iconlist-content> ul"
Второй метод полезен для веб-разработчиков, которые знают точный путь к элементу DOM. Обычный пользователь, очевидно, предпочтет первый способ сделать снимок экрана определенного элемента веб-страницы.
