적용 범위 패널을 사용하면 사용되지 않는 JavaScript 및 CSS 코드를 찾을 수 있습니다. 사용되지 않는 코드를 삭제하면 페이지 로드 속도를 높이고 사용자의 모바일 데이터를 절약할 수 있습니다.
개요
사용되지 않는 JavaScript 또는 CSS를 제공하는 것은 웹 개발에서 흔한 문제입니다. 예를 들어 페이지에서 Bootstrap의 버튼 구성요소 를 사용한다고 가정해 보겠습니다. 버튼 구성요소를 사용하려면 다음과 같이 HTML에 Bootstrap의 스타일 시트에 대한 링크를 추가해야 합니다.
...
<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>
...
이 스타일 시트에는 버튼 구성요소의 코드만 포함되어 있는 것은 아닙니다. Bootstrap의 모든 구성요소에 대한 CSS가 포함되어 있습니다. 하지만 다른 Bootstrap 구성요소는 사용하지 않습니다. 따라서 페이지에서 필요하지 않은 CSS를 다운로드하고 있습니다. 이 추가 CSS는 다음과 같은 이유로 문제가 됩니다.
- 추가 코드로 인해 페이지 로드가 느려집니다. 렌더링 차단 CSS를 참고하세요.
- 사용자가 모바일 기기에서 페이지에 액세스하면 추가 코드가 모바일 데이터를 사용합니다.
적용 범위 패널을 사용하면 페이지를 기록하고 CSS 및 JavaScript 리소스의 총 사용된 바이트와 사용되지 않은 바이트에 관한 보고서를 보고 소스 패널에서 코드를 추적할 수 있습니다.
적용 범위 패널 열기
- DevTools를 엽니다.
- 명령어 메뉴를 엽니다.
coverage를 입력하기 시작하고 적용 범위 표시 명령어를 선택한 후 Enter 키를 눌러 명령어를 실행합니다. 적용 범위 패널이 서랍 에 열립니다.
또는 오른쪽 상단에서 more_vert 옵션 더보기 > 도구 더보기 > 적용 범위를 선택합니다.
코드 적용 범위 기록
코드 적용 범위를 캡처하려면 다음 단계를 따르세요.
적용 범위 범위를 설정하려면 적용 범위 패널 상단의 작업 표시줄에 있는 드롭다운 목록에서 함수별 또는 블록별 을 선택합니다.
기록을 시작하려면 패널 중앙에 있는 새로고침 버튼을 클릭합니다. 적용 범위 패널은 페이지를 새로고침하고 페이지를 로드하는 데 필요한 코드를 캡처하며 사용자가 페이지와 상호작용하는 동안 기록을 계속합니다.
코드 적용 범위 기록을 중지하려면 패널의 작업 표시줄에서 범위 계측 중지 및 결과 표시를 클릭합니다.
코드 적용 범위 분석
적용 범위 패널의 표에는 분석된 리소스와 각 리소스 내에서 사용된 코드의 양이 표시됩니다.
행을 클릭하여 소스 패널에서 리소스를 열고 사용된 코드와 사용되지 않은 코드의 줄별 분석을 확인합니다. 사용되지 않는 코드 줄은 왼쪽에 줄 번호가 있는 열 옆에 세로 회색 선으로 표시됩니다.
- URL 열은 분석된 리소스의 URL입니다.
- 유형 열은 리소스에 CSS, JavaScript 또는 둘 다 포함되어 있는지 여부를 나타냅니다.
- 총 바이트 열은 리소스의 총 크기(바이트)입니다.
- 사용되지 않은 바이트 열은 사용되지 않은 바이트 수입니다.
- 사용 시각화 열은 총 바이트 열과 사용되지 않은 바이트 열의 시각화입니다. 막대의 회색 섹션은 사용되지 않은 바이트입니다. 녹색 섹션은 사용된 바이트입니다.
URL별로 보고서를 필터링하려면 작업 표시줄의 필터에서 URL을 지정합니다.
적용 범위 패널 하단의 상태 표시줄에는 사용된 코드의 비율이 표시됩니다. 상태 표시줄은 필터링을 고려합니다.
필터 막대 옆의 드롭다운 목록에서 보고서에 표시할 모두 또는 CSS 또는 JavaScript 만 선택할 수 있습니다.
보고서에 확장 프로그램 코드를 포함하려면 콘텐츠 스크립트를 사용 설정합니다.
보고서를 내보내려면 적용 범위 내보내기를 클릭합니다.