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

생산성을 높이고 시간을 절약 할 수있는 Mozilla Firefox의 멋진 트릭을 공유하고 싶습니다. 웹 서핑을하는 동안 가끔 스크린 샷을 찍어 친구들과 공유하고 싶을 때가 있습니다. 그러나 전체 페이지의 스크린 샷을 찍고, 저장하고, 자르는 데는 여러 단계가 필요합니다.이 기사에서는 추가 기능을 사용하지 않고 웹 페이지에서 특정 요소의 스크린 샷을 직접 찍는 방법을 살펴 봅니다.

광고

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

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

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

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

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

1. Firefox를 열고 Shift + F2 키보드에서. Firefox는 화면 하단에 콘솔 / 명령 줄을 엽니 다.
2. 내부에 다음 명령을 입력하십시오.

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

   '부분'이름을 적절한 선택기 이름으로 바꿉니다. 제 경우에는

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

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