생산성을 높이고 시간을 절약 할 수있는 Mozilla Firefox의 멋진 트릭을 공유하고 싶습니다. 웹 서핑을하는 동안 가끔 스크린 샷을 찍어 친구들과 공유하고 싶을 때가 있습니다. 그러나 전체 페이지의 스크린 샷을 찍고, 저장하고, 자르는 데는 여러 단계가 필요합니다.이 기사에서는 추가 기능을 사용하지 않고 웹 페이지에서 특정 요소의 스크린 샷을 직접 찍는 방법을 살펴 봅니다.
광고
웹 페이지가로드되면 웹 브라우저는 페이지의 문서 개체 모델을 만듭니다. DOM은 각 노드가 문서의 일부를 나타내는 객체 인 트리 구조로 구성됩니다.
이것을 사용하여 스크린 샷에 특정 요소 만 캡처하는 방법을 살펴 보겠습니다.
에 Firefox에서 특정 웹 페이지 요소의 스크린 샷 찍기 , 다음 단계를 수행하십시오.
- Firefox에서 원하는 페이지를 열고 캡처하려는 요소를 마우스 오른쪽 버튼으로 클릭합니다.
- 컨텍스트 메뉴에서 '요소 검사'를 선택합니다.
- 인스펙터 도구가 열립니다. DOM 트리 노드에 대한 이동 경로 컨트롤이 있습니다.
- 여기에서 요소를 마우스 오른쪽 버튼으로 클릭하고 스크린 샷 노드 컨텍스트 메뉴에서 :
이것이 바로 우리에게 필요한 것입니다.
이것이 바로 우리에게 필요한 것입니다.이 기능의 가장 큰 장점은 스크롤이 필요한 대부분의 요소를 포함하여 긴 요소도 캡처한다는 것입니다. 제 경우 스크린 샷은 다음과 같습니다.
또는 내장 된 스크린 샷 명령. 앞서 나는 썼다 Firefox에서 열린 페이지의 스크린 샷을 찍는 방법 . 언급 된 기사에서 우리는 전체 페이지를 캡처하기 위해 내장 된 Firefox 명령어 '스크린 샷'을 사용했습니다. 동일한 기능을 사용하여 열린 페이지의 특정 요소를 스크린 샷 할 수 있습니다.
- Firefox를 열고 Shift + F2 키보드에서. Firefox는 화면 하단에 콘솔 / 명령 줄을 엽니 다.
- 내부에 다음 명령을 입력하십시오.
스크린 샷-선택기 '이름'
'부분'이름을 적절한 선택기 이름으로 바꿉니다. 제 경우에는
screenshot --selector '# widget-apps> .iconlist> .iconlist-content> ul'
두 번째 방법은 정확한 DOM 요소 경로를 알고있는 웹 개발자에게 유용합니다. 일반 사용자는 특정 웹 페이지 요소의 스크린 샷을 찍는 첫 번째 방법을 선호합니다.
