Devtools를 사용하여 페이지 스크린샷 찍기
클라이언트나 팀원에게 웹사이트의 현재 상태 또는 그 일부에 대한 전체 스크린샷을 보여줘야 할 때가 있었습니다. 그래서 저는 전체 페이지 화면 캡처를 사용했고, 다른 종류의 스크린샷에는 Windows의 조각 도구 또는 Snaggit를 사용했습니다. 이 게시물 Gyazo처럼 온라인으로 호스팅하려면 GIF 메이커도 있습니다.
최근에 저는 Devtools에 확장 프로그램이 필요 없이 전체 페이지 스크린샷을 찍는 도구가 있다는 것을 발견했습니다!
이것은 새로운 생각이 아니며 2017년 4월 Devtools 업데이트에 포함되었습니다. 하지만 제가 바위 밑에 살고 있어서 지금까지 알지 못한 것 같습니다…
개발자 도구
공식 Devtools 페이지에 명시된 대로:
Chrome DevTools는 Google Chrome 브라우저에 직접 내장된 웹 개발자 도구 세트입니다. DevTools는 페이지를 즉석에서 편집하고 문제를 신속하게 진단하는 데 도움이 되며 궁극적으로 더 나은 웹사이트를 더 빠르게 구축하는 데 도움이 됩니다.
Devtools에서 명령 실행하기
Devtools를 여는 방법을 이미 알고 계시지만 이 게시물을 위해 잊어버린 경우에는 F12 키 또는 Ctrl + Shift + I 단축키를 사용하여 여십시오. 그런 다음 Devtools 내부 메뉴에서 Run command를 열거나 Ctrl + Shift + P를 사용해야 합니다.
스크린샷 도구
screenshot를 입력하면 명령이 필터링되며, 사용할 수 있는 스크린샷 방법에는 4가지가 있습니다.
- 지역 스크린샷
- 전체 크기 스크린샷
- 노드 스크린샷
- 스크린샷 캡처
모든 스크린샷 방법을 확인하기 전에 devtools가 이미지 처리를 마친 후 웹페이지 이름과 함께 자동으로 다운로드됩니다.
지역 스크린샷
area screenshot를 사용하면 웹사이트의 일부를 선택하고 스크린샷을 만들 수 있습니다.
결과:
전체 크기 스크린샷
full size screenshot는 처음부터 끝까지 전체 웹페이지의 스크린샷을 찍습니다.
결과:
노드 스크린샷
node screenshot를 사용하면 검사 요소에서 선택한 노드의 스크린샷을 만들 수 있습니다.
결과:
스크린샷 캡처
capture screenshot는 스크롤 없이 현재 페이지와 브라우저 크기의 스크린샷을 찍습니다.
결과:
