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