Chrome 브라우저 창 전체 스크롤/특정 컴포넌트만 스크린샷하기(크롬 개발자도구 활용)

MacOS에서는 기본적으로 ⌘ + ⇧ + 4 등의 단축키를 이용해 캡처를 할 수 있지만, 스크롤이 있는 페이지의 경우에는 전체 스크롤을 캡처하기가 어렵다.

하지만 캡처 대상이 Chrome 브라우저일 경우에는 Chrome 브라우저에서 제공하는 스크린 샷 기능을 활용해 웹사이트의 전체 스크롤 혹은 특정 컴포넌트를 캡처할 수 있다.

해당하는 웹페이지로 이동 후 F12키를 누르거나, 해당 웹페이지 빈 곳 우클릭 후 검사(Inspect) 클릭( ⌥+⌘+I)
개발자 도구가 열리면 Console 탭으로 이동한 뒤, ⌘ + ⇧ + P 단축키를 눌러 명령 메뉴를 연다. 명령 메뉴에 screenshot을 검색해서 Capture full size screenshot을 클릭하면 PNG파일로 저장된다.

웹페이지의 특정 컴포넌트만 캡처하고 싶은 경우,

해당하는 웹페이지로 이동 후 F12키를 누르거나, 해당 웹페이지 빈 곳 우클릭 후 검사(Inspect) 클릭( ⌥+⌘+I)
Element 탭에서 캡처를 원하는 태그를 우클릭 후 Capture node screenshot을 클릭하면 PNG파일로 저장된다.