Зробіть знімок екрана певного елемента веб-сторінки у Firefox
Я хотів би поділитися з вами крутим трюком для Mozilla Firefox, який може підвищити вашу продуктивність і заощадити ваш час. Під час серфінгу в Інтернеті ви іноді хочете поділитися чимось із друзями, зробивши знімок екрана. Але потрібно кілька кроків, щоб зробити знімок екрана всієї сторінки, зберегти його, обрізати тощо. У цій статті ми побачимо, як безпосередньо зробити знімок екрана певного елемента на веб-сторінці без використання доповнень.
Реклама
Коли веб-сторінка завантажується, ваш веб-браузер створює об’єктну модель сторінки документа. DOM будується як деревовидна структура, в якій кожен вузол є об’єктом, що представляє частину документа.
Давайте подивимося, як ви можете використовувати це для захоплення лише певного елемента на знімку екрана.
До зробити знімок екрана певного елемента веб-сторінки у Firefox, виконайте такі дії:
- Відкрийте потрібну сторінку в Firefox і клацніть правою кнопкою миші на елементі, який потрібно зафіксувати.
- У контекстному меню виберіть «Перевірити елемент»:
- Відкриється інструмент інспектора. Зверніть увагу, що для вузлів дерева DOM є елемент керування "хлібною крихтою":
- Там ви можете клацнути правою кнопкою миші будь-який елемент і вибрати Вузол знімка екрана з контекстного меню:
Це саме те, що нам потрібно.
Чудовою особливістю цієї функції є те, що вона також захоплює довгі елементи, включаючи більшість елементів, які потребують прокручування. У моєму випадку ось як виглядає скріншот:
Як варіант, можна використовувати вбудований знімок екрана команда. Раніше я писав Як зробити скріншот відкритої сторінки в Firefox. У згаданій статті ми використали вбудовану команду Firefox «скріншот», щоб зробити всю сторінку. Цю ж функцію можна використовувати для створення скріншоту певного елемента на відкритій сторінці.
- Відкрийте Firefox і натисніть Shift + F2 на клавіатурі. Firefox відкриє консоль/командний рядок у нижній частині екрана.
- Введіть всередині нього таку команду:
знімок екрана -- селектор "ім'я"
Замініть назву «порція» на відповідну назву селектора. У моєму випадку так і повинно бути
знімок екрана --selector "#widget-apps > .iconlist > .iconlist-content > ul"
Другий метод корисний для веб-розробників, які знають точний шлях до елемента DOM. Звичайний користувач, очевидно, віддасть перевагу першому методу, щоб зробити знімок екрана певного елемента веб-сторінки.