Chrome DevTools의 Coverage 패널을 사용하면 사용하지 않는 JavaScript와 CSS 코드. 사용하지 않는 코드를 삭제하면 페이지 로드 속도를 높이고 사용자의 모바일 데이터를 절약할 수 있습니다.
개요
사용되지 않는 JavaScript 또는 CSS를 제공하는 것은 웹 개발에서 일반적인 문제입니다. 예를 들어 부트스트랩의 버튼 구성요소를 사용한다고 가정해 보겠습니다. 입니다. 버튼 구성요소를 사용하려면 링크를 추가해야 합니다. 다음과 같이 HTML에서 부트스트랩의 스타일 시트를 추가합니다.
...
<head>
...
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
...
</head>
...
이 스타일 시트에는 버튼 구성요소의 코드만 포함되어 있는 것은 아닙니다. 그것은 에는 모든 부트스트랩 구성요소의 CSS가 포함됩니다. 하지만 여러분은 다른 부트스트랩 구성요소에 해당합니다. 따라서 여러분의 페이지는 필요하지 않은 CSS입니다. 이 추가 CSS는 다음에서 문제가 됩니다. 이유:
- 코드를 추가하면 페이지 로드가 느려집니다. 렌더링 차단 CSS를 참고하세요.
- 사용자가 휴대기기에서 페이지에 액세스하면 추가 코드는 모바일 데이터를 사용할 수 있습니다.
범위 패널 열기
- 명령어 메뉴를 엽니다.
coverage를 입력하고 범위 표시 명령어를 선택한 다음 Enter 키를 눌러 명령어를 실행합니다. 범위 패널이 다음 위치에서 열립니다. 창.
레코드 코드 적용 범위
코드 적용 범위를 캡처하려면 다음 단계를 따르세요.
적용 범위 범위를 설정하려면 범위 패널 상단의 작업 모음의 드롭다운 목록에서 함수별 또는 블록별을 선택합니다.
기록을 시작하려면 새로고침을 클릭합니다. 계측 적용 범위 시작 및 페이지 새로고침 범위 패널이 페이지를 새로고침하고, 페이지를 로드하는 데 필요한 코드를 캡처하고, 페이지와 상호작용하는 동안 기록을 계속합니다.
코드 적용 범위 기록을 중지하려면 stop_circle 측정 범위 중지 및 결과 표시를 클릭합니다.
코드 적용 범위 분석
범위 패널의 표에는 분석된 리소스와 각 리소스 내에서 사용된 코드의 양이 표시됩니다.
행을 클릭하여 Sources 패널에서 리소스를 열고 사용된 코드와 사용되지 않은 코드를 한 줄씩 분류하여 확인할 수 있습니다. 사용되지 않은 코드 줄은 왼쪽에 줄 번호가 있는 열 옆에 빨간색 줄로 표시됩니다.
- URL 열은 분석된 리소스의 URL입니다.
- 유형 열에는 리소스에 CSS, 자바스크립트, 또는 둘 다일 수 있습니다.
- 총 바이트 수 열은 리소스의 총 크기(바이트)입니다.
- Unused Bytes 열은 사용되지 않은 바이트 수입니다.
- 이름이 지정되지 않은 마지막 열은 총 바이트 수와 Unused Bytes 열. 막대의 빨간색 섹션은 사용되지 않은 바이트입니다. 이 회색 섹션은 사용된 바이트입니다.
URL로 보고서를 필터링하려면 작업 표시줄의 필터에서 URL을 지정합니다.
적용 범위 패널 하단의 상태 표시줄에는 사용된 코드의 비율이 표시됩니다. 상태 표시줄에는 필터링이 반영됩니다.
필터 표시줄 옆의 드롭다운 목록에서 모두를 선택하거나 CSS 또는 자바스크립트만 선택하여 보고서에 표시할 수 있습니다.
보고서에 확장 프로그램 코드를 포함하려면 check_box 콘텐츠 스크립트를 사용 설정합니다.
보고서를 내보내려면 다운로드 범위 내보내기를 클릭합니다.