Zrób zrzut ekranu określonego elementu strony internetowej w Firefoksie

Chciałbym podzielić się z wami fajną sztuczką dla Mozilla Firefox, która może zwiększyć twoją produktywność i zaoszczędzić czas. Podczas surfowania w sieci czasami chcesz podzielić się czymś ze znajomymi, robiąc zrzut ekranu. Jednak wykonanie zrzutu ekranu całej strony, zapisanie go, przycięcie itp. wymaga kilku kroków. W tym artykule zobaczymy, jak bezpośrednio wykonać zrzut ekranu określonego elementu na stronie internetowej bez używania dodatków.

Po załadowaniu strony internetowej przeglądarka tworzy obiektowy model dokumentu strony. DOM jest skonstruowany jako struktura drzewa, w której każdy węzeł jest obiektem reprezentującym część dokumentu.

Zobaczmy, jak możesz użyć tego do przechwycenia tylko określonego elementu na zrzucie ekranu.

Do zrób zrzut ekranu określonego elementu strony internetowej w Firefoksie, wykonaj następujące czynności:

1. Otwórz żądaną stronę w przeglądarce Firefox i kliknij prawym przyciskiem myszy element, który chcesz przechwycić.
2. Z menu kontekstowego wybierz „Sprawdź element”:
3. Narzędzie inspektora zostanie otwarte. Zwróć uwagę, że ma kontrolkę breadcrumb dla węzłów drzewa DOM:
4. Tam możesz kliknąć prawym przyciskiem dowolny element i wybrać Węzeł zrzutu ekranu z menu kontekstowego:Właśnie tego potrzebujemy.

Wspaniałą rzeczą w tej funkcji jest to, że przechwytuje również długie elementy, w tym większość elementów wymagających przewijania. W moim przypadku tak wygląda zrzut ekranu:

Alternatywnie możesz użyć wbudowanego zrzut ekranu Komenda. Wcześniej pisałem Jak zrobić zrzut ekranu otwartej strony w Firefoksie. We wspomnianym artykule użyliśmy wbudowanego w Firefoksie polecenia „zrzut ekranu”, aby przechwycić całą stronę. Tej samej funkcjonalności można użyć do zrzutu ekranu określonego elementu na otwartej stronie.

1. Otwórz Firefoksa i naciśnij Shift + F2 na klawiaturze. Firefox otworzy konsolę / wiersz poleceń na dole ekranu.
2. Wpisz w nim następujące polecenie:

   zrzut ekranu --selektor "nazwa"

   Zastąp nazwę „porcja” odpowiednią nazwą selektora. W moim przypadku powinno być

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

Druga metoda jest przydatna dla twórców stron internetowych, którzy znają dokładną ścieżkę elementu DOM. Przeciętny użytkownik oczywiście woli pierwszą metodę wykonania zrzutu ekranu określonego elementu strony internetowej.