Сделайте снимок экрана определенного элемента веб-страницы в Firefox.

Я хотел бы поделиться с вами классным трюком для Mozilla Firefox, который может повысить вашу продуктивность и сэкономить ваше время. Во время серфинга в Интернете вы иногда хотите поделиться чем-то с друзьями, сделав снимок экрана. Но требуется несколько шагов, чтобы сделать снимок экрана всей страницы, сохранить его, обрезать и т. Д. В этой статье мы увидим, как напрямую сделать снимок экрана определенного элемента на веб-странице без использования надстроек.

Когда веб-страница загружается, ваш веб-браузер создает объектную модель документа для страницы. Модель DOM построена как древовидная структура, в которой каждый узел является объектом, представляющим часть документа.

Давайте посмотрим, как вы можете использовать это, чтобы захватить только определенный элемент на свой снимок экрана.

К сделать снимок экрана определенного элемента веб-страницы в Firefoxвыполните следующие действия:

1. Откройте желаемую страницу в Firefox и щелкните правой кнопкой мыши элемент, который хотите записать.
2. В контекстном меню выберите «Проверить элемент»:
3. Инструмент инспектора откроется. Обратите внимание, что у него есть элемент управления для узлов дерева DOM:
4. Там вы можете щелкнуть правой кнопкой мыши любой элемент и выбрать Узел снимков экрана из контекстного меню:Это именно то, что нам нужно.

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

Как вариант, вы можете использовать встроенный Скриншот команда. Ранее я писал Как сделать снимок экрана открытой страницы в Firefox. В упомянутой статье мы использовали встроенную в Firefox команду «скриншот» для захвата всей страницы. Эту же функцию можно использовать для снятия скриншота определенного элемента на открытой странице.

1. Откройте Firefox и нажмите Shift + F2 на клавиатуре. Firefox откроет консоль / командную строку внизу экрана.
2. Введите в него следующую команду:

   скриншот - селектор "имя"

   Замените имя «часть» на соответствующее имя селектора. В моем случае это должно быть

   скриншот --selector "# widget-apps> .iconlist> .iconlist-content> ul"

Второй метод полезен для веб-разработчиков, которые знают точный путь к элементу DOM. Обычный пользователь, очевидно, предпочтет первый способ сделать снимок экрана определенного элемента веб-страницы.