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