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

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

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *