Направете екранна снимка на конкретен елемент от уеб страница във Firefox

Бих искал да споделя с вас страхотен трик за Mozilla Firefox, който може да повиши вашата производителност и да ви спести време. Докато сърфирате в мрежата, понякога искате да споделите нещо с приятелите си, като направите екранна снимка от него. Но са необходими няколко стъпки, за да направите екранна снимка на цялата страница, да я запазите, да я изрежете и т.н. В тази статия ще видим как директно да направите екранна снимка на конкретен елемент на уеб страница, без да използвате добавки.

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

Нека да видим как можете да използвате това, за да заснемете само конкретен елемент във вашата екранна снимка.

Да се направете екранна снимка на конкретен елемент от уеб страница във Firefox, направете следните стъпки:

1. Отворете желаната страница във Firefox и щракнете с десния бутон върху елемента, който искате да заснемете.
2. От контекстното меню изберете „Проверка на елемента“:
3. Инструментът за инспектор ще бъде отворен. Забележете, че има контрол за движение за възлите на DOM дървото:
4. Там можете да щракнете с десния бутон върху всеки елемент и да изберете Възел за екранна снимка от контекстното меню:Точно това ни трябва.

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

Като алтернатива можете да използвате вградената екранна снимка команда. По-рано писах Как да направите екранна снимка на отворената страница във Firefox. В споменатата статия използвахме вградената в Firefox команда "screenshot", за да заснемем цялата страница. Същата функционалност може да се използва за скрийншот на конкретен елемент на отворената страница.

1. Отворете Firefox и натиснете Shift + F2 на клавиатурата. Firefox ще отвори конзола/команден ред в долната част на екрана.
2. Въведете следната команда вътре:

   екранна снимка -- селектор "име"

   Заменете името "порция" с подходящото име на селектора. В моя случай трябва да бъде

   екранна снимка -- селектор "#widget-apps > .iconlist > .iconlist-content > ul"

Вторият метод е полезен за уеб разработчици, които знаят точния път на DOM елемента. Средният потребител очевидно ще предпочете първия метод да направи екранна снимка на конкретен елемент от уеб страница.