[Chrome] 개발자 도구 - 화면 캡처

● 용도

    - 웹 페이지를 캡처할 때

    - 스크롤이 생겨 한 번에 한 번에 캡처가 불가능할 때

      => (구글 또는 실행) 프로그램 따로 설치 없이❕

            PDF 다운로드 없이❕

            한 번에 화면 캡처를 할 수 있다✨

     

 

● 방법

    1. 명령어 실행으로 캡처

         - 개발자 도구 > 우측 상단 세로 점 세 개 버튼 > 명령어 실행 또는 Ctrl + Shift + P      

 

         -  원본 크기 스크린샷 캡처 검색 및 선택

             · 노드 스크린샷 캡처 : 선택한 요소 영역을 캡처하고 싶을 때 요소 탭에서 요소 선택 후 캡처 실행

             · 스크린샷 캡처 : 현재 보이고 있는 부분만 캡처

             · 영역 스크린샷 캡처 : 드래그 영역만 캡처. 윈도우 캡처 기능 (Win + Shift + S)의 사각형 캡처와 동일 기능

         - png 형태의 이미지 파일 자동 다운로드 진행

 

     2. 노드 선택으로 캡처

         - 캡처할 노드 우클릭 > 노드 스크린샷 캡처 

             ·  ⭐ 내용이 길어 스크롤이 생겼을 때뿐만 아니라 특정 영역만 캡처하고 싶을 때 해당 노드 선택 후 캡처 가능

 

 

 

● 주의사항

    - 해당 페이지가 viewport 크기의 영향을 받는다면(반응형이라면) 원하는 크기로 조절해주거나 개발자 도구를 새 창으로 열어야 함

 

 

---

참고

• 제주코딩벵스캠프 - 아는 만큼 보이는 크롬 개발자 도구 - 화면 캡처하기
  https://www.youtube.com/watch?v=y0yur8Gnffc&list=PLkfUwwo13dlUJCAGcBOynazaBVgvvj4ba&index=11