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

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

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

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

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

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

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

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

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

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

     screenshot --selector "# widget-apps> .iconlist> .iconlist-content> ul" 

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

Оцените статью
digitdocom.ru
Добавить комментарий