크롬에서 풀페이지 캡처하기가 어려웠다. (필자가 알기론)
확장프로그램을 설치해서 캡쳐를 하거나 다른 캡처 프로그램을 이용해야했다.
그러나 4월 업데이트 내역을 보니깐 웹 페이지 전체를 캡처가 가능하게 되었다.

풀페이지 스크린샷

이미지 1. 개발자 도구

개발자 도구 단축키는 F12 or Ctrl+Shift+I이다.

이미지 2. 풀페이지 메뉴
  1. 디바이스 툴바를 클릭한다. 단축키 Ctrl+Shift+M이다.
  2. 왼쪽화면 상단에 More Options를 누른다.
  3. Capture full size screenshot를 누르면 된다.

참조 URL: https://developers.google.com/web/updates/2017/04/devtools-release-notes#screenshots

소개영상

하나 더 좋은 기능을 소개하겠다.

CSS and JS code coverage

새로운 Coverage 탭을 사용하여 사용하지 않는 CSS 및 JS 코드를 찾을 수 있다.
페이지를 로드하거나 실행할 때 탭은 사용 된 코드의 양과 로드 된 양을 알려준다.
필요한 코드만 실행하여 페이지 크기를 줄일 수 있다고 한다.

Coverage 패널 추가
이미지 3. Coverage 패널 추가
Coverage 패널
이미지 4. Coverage 패널

Sources 패널에서 코드 범위 분석이 가능하다.

각 코드 라인은 아래와 같이 색으로 구분된다.

  • 녹색은 코드 라인이 실행됨을 의미한다.
  • 빨간색은 계속 켜져 있으면 실행되지 않음을 의미한다.
  • 빨간색과 녹색 코드 행은 해당 행의 일부 코드만 실행됨을 의미한다.
  • 예를 들어 삼항식 var b=(a > 0) ? a : 0은 빨간색과 녹색으로 표시된다.

출처: https://developers.google.com/web/updates/2017/04/devtools-release-notes