Chciałbym podzielić się z wami fajną sztuczką dotyczącą przeglądarki Mozilla Firefox, która może zwiększyć produktywność i zaoszczędzić czas. Podczas przeglądania Internetu czasami chcesz podzielić się czymś ze znajomymi, wykonując zrzut ekranu. Ale wykonanie zrzutu całej strony, zapisanie, przycięcie itp. Wymaga kilku kroków. W tym artykule zobaczymy, jak bezpośrednio wykonać zrzut ekranu określonego elementu na stronie internetowej bez korzystania z dodatków.
Reklama
Po załadowaniu strony internetowej przeglądarka internetowa tworzy model obiektu dokumentu strony. DOM jest zbudowany jako struktura drzewiasta, 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 przeglądarce Firefox , wykonaj następujące czynności:
- Otwórz żądaną stronę w przeglądarce Firefox i kliknij prawym przyciskiem myszy element, który chcesz przechwycić.
- Z menu kontekstowego wybierz opcję „Sprawdź element”:
- Narzędzie inspektora zostanie otwarte. Zauważ, że ma on kontrolkę breadcrumb dla węzłów drzewa DOM:
- Tam możesz kliknąć prawym przyciskiem dowolny element i wybrać Screenshot Node z menu kontekstowego:
Właśnie tego potrzebujemy.
Właśnie tego potrzebujemy.Wspaniałą cechą 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 przeglądarce Firefox . We wspomnianym artykule użyliśmy wbudowanego w Firefoksa polecenia „zrzut ekranu”, aby uchwycić całą stronę. Tej samej funkcji można użyć do zrzutu ekranu określonego elementu na otwartej stronie.
- Otwórz przeglądarkę Firefox i naciśnij Shift + F2 na klawiaturze. Firefox otworzy konsolę / wiersz poleceń u dołu ekranu.
- Wpisz w nim następujące polecenie:
zrzut ekranu - nazwa selektora
Zastąp nazwę „część” odpowiednią nazwą selektora. W moim przypadku tak powinno być
zrzut ekranu --selector '# widget-apps> .iconlist> .iconlist-content> ul'
Druga metoda jest przydatna dla programistów 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.
