Firefox에서 특정 웹 페이지 요소의 스크린샷 찍기

생산성을 높이고 시간을 절약할 수 있는 Mozilla Firefox의 멋진 트릭을 공유하고 싶습니다. 웹서핑을 하다 가끔 스크린샷을 찍어 친구들과 공유하고 싶을 때가 있습니다. 그러나 전체 페이지의 스크린샷을 찍고, 저장하고, 자르는 등 여러 단계를 거쳐야 합니다. 이 기사에서는 애드온을 사용하지 않고 웹 페이지의 특정 요소에 대한 스크린샷을 직접 찍는 방법을 알아봅니다.

웹 페이지가 로드되면 웹 브라우저는 페이지의 문서 개체 모델을 생성합니다. DOM은 각 노드가 문서의 일부를 나타내는 객체인 트리 구조로 구성됩니다.

이것을 사용하여 스크린샷에 특정 요소만 캡처하는 방법을 살펴보겠습니다.

NS Firefox에서 특정 웹 페이지 요소의 스크린샷 찍기, 다음 단계를 수행하십시오.

1. Firefox에서 원하는 페이지를 열고 캡처하려는 요소를 마우스 오른쪽 버튼으로 클릭합니다.
2. 상황에 맞는 메뉴에서 "요소 검사"를 선택합니다.
3. 검사기 도구가 열립니다. DOM 트리 노드에 대한 이동 경로 제어가 있습니다.
4. 거기에서 요소를 마우스 오른쪽 버튼으로 클릭하고 선택할 수 있습니다. 스크린샷 노드 컨텍스트 메뉴에서:이것이 바로 우리에게 필요한 것입니다.

이 기능의 가장 큰 장점은 스크롤이 필요한 대부분의 요소를 포함하여 긴 요소도 캡처한다는 것입니다. 제 경우에는 스크린샷이 다음과 같이 보입니다.

또는 내장된 스크린샷 명령. 예전에 제가 썼던 Firefox에서 열린 페이지의 스크린샷을 찍는 방법. 언급된 기사에서 우리는 내장된 Firefox 명령 "스크린샷"을 사용하여 전체 페이지를 캡처했습니다. 동일한 기능을 사용하여 열린 페이지의 특정 요소를 스크린샷할 수 있습니다.

1. Firefox를 열고 누르십시오 쉬프트 + F2 키보드에. Firefox는 화면 하단에 콘솔/명령줄을 엽니다.
2. 그 안에 다음 명령을 입력하십시오.

   스크린샷 -- "이름" 선택기

   "부분"이라는 이름을 적절한 선택기 이름으로 바꿉니다. 내 경우에는 그래야 한다.

   스크린샷 --selector "#widget-apps > .iconlist > .iconlist-content > ul"

두 번째 방법은 정확한 DOM 요소 경로를 알고 있는 웹 개발자에게 유용합니다. 일반 사용자는 분명히 특정 웹 페이지 요소의 스크린샷을 찍는 첫 번째 방법을 선호할 것입니다.