Find Unused JavaScript And CSS Code With The Coverage Tab In Chrome DevTools - Coverage Tab으로 미사용 css, javascript 확인하기

Find Unused JavaScript And CSS Code With The Coverage Tab In Chrome DevTools

Open the Coverage tab

1. 커맨드 창 열기.
2. coverage 를 커맨드 검색창에 입력하고, Show Coverage 를 선택한다. Coverage 탭이 개발자도구의 Drawer에 활성화된다.

Record code coverage

1. Coverage 탭에서 아래에 따라 버튼을 클릭한다 :
   • 페이지를 로딩하기 위해서 어떤 코드들이 필요한지 보기 위해Start Instrumenting Coverage And Reload Page 를 클릭한다.
   • 페이지에서 어떤 코드들이 사용되는지 보기 위해 Instrument Coverage 을 클릭한다.
2. 코드 커버리지 녹화 중단을 위해 Stop Instrumenting Coverage And Show Results 를 클릭한다.

Analyze code coverage

Coverage 탭은 각 리소스에서 얼마나 많은 코드가 사용되었는지, 분석 결과를 알려준다. 리소스의 각 행을 클릭하면 Sources 패널에서 사용되는 코드와 사용되지 않는 코드를 분리해서 확인할 수 있다.

• URL 컬럼은 분석되는 리소스의 URL.
• Type 컬럼은 리소스가 CSS, JavaScript 중 어떤 타입을 포함하고 있는지.
• Total Bytes 컬럼은 리소스 파일의 크기.
• Unused Bytes 컬럼은 사용되지 않는 리소스의 크기.
• 마지막 이름없는 컬럼은 위의 Total Bytes 와 Unused Bytes 를 시각화 해놓은 것. 붉은 색은 미사용, 녹색은 사용하는 리소스의 크기를 나타냄.