이 가이드에서는 Chrome DevTools를 사용하여 웹페이지의 리소스를 보는 방법을 알려줍니다. 리소스는 페이지를 올바르게 표시하기 위해 필요한 파일입니다. 리소스의 예로는 CSS, JavaScript, HTML 파일, 이미지가 있습니다.
이 가이드에서는 개발자가 웹 개발 및 Chrome DevTools의 기본사항을 잘 알고 있다고 가정합니다.
리소스 열기
검사하려는 리소스의 이름을 알고 있는 경우 명령어 메뉴를 사용하여 리소스를 빠르게 열 수 있습니다.
Control+P 또는 Command+P (Mac)를 누릅니다. 파일 열기 대화상자가 열립니다.
그림 1. 파일 열기 대화상자
드롭다운에서 파일을 선택하거나 파일 이름을 입력하고 자동 완성 상자에서 올바른 파일이 강조표시되면 Enter 키를 누릅니다.
그림 2. Open File 대화상자에서 파일 이름 입력
네트워크 패널에서 리소스 열기
리소스 세부정보 검사를 참고하세요.
그림 3. Network 패널에서 리소스 검사
다른 패널의 리소스 표시 네트워크 패널
아래의 리소스 찾아보기 섹션에서는 DevTools UI의 다양한 부분에서 리소스를 보는 방법을 보여줍니다. Network 패널에서 리소스를 검사하려면 리소스를 마우스 오른쪽 버튼으로 클릭하고 Reveal in Network 패널의를 선택합니다.
그림 4. 네트워크 패널에서 보기 옵션
리소스 찾아보기
Network 패널에서 리소스 찾아보기
네트워크 활동 기록을 참고하세요.
그림 5. 네트워크 로그의 페이지 리소스
디렉터리로 찾아보기
디렉토리별로 정리된 페이지의 리소스를 보려면 다음 단계를 따르세요.
- Sources 탭을 클릭하여 Sources 패널을 엽니다.
페이지 탭을 클릭하여 페이지의 리소스를 표시합니다. 페이지 창이 열립니다.
그림 6. Page 창
다음은 그림 6에서 명확하지 않은 항목에 대한 분석입니다.
- top은 기본 문서 탐색 컨텍스트입니다.
- airhorner.com은 도메인을 나타냅니다. 그 아래에 중첩된 모든 리소스는 해당 도메인에서 가져옵니다.
예를 들어 comlink.global.js 파일의 전체 URL은
https://airhorner.com/scripts/comlink.global.js일 가능성이 높습니다. - scripts는 디렉터리입니다.
- (index)는 기본 HTML 문서입니다.
- iu3은 또 다른 탐색 컨텍스트입니다. 이 컨텍스트는 기본 문서 HTML에 삽입된
<iframe>요소로 만들어졌을 가능성이 높습니다. - sw.js는 서비스 워커 실행 컨텍스트입니다.
리소스를 클릭하여 편집기에서 확인합니다.
그림 7. 편집기에서 파일 보기
파일 이름으로 찾아보기
기본적으로 Page 창에서는 리소스를 디렉터리별로 그룹화합니다. 이 그룹화를 사용 중지하고 각 도메인의 리소스를 단순 목록으로 보려면 다음 안내를 따르세요.
- Page 창을 엽니다. 디렉터리로 찾기를 참고하세요.
옵션 더보기
를 클릭하고 폴더별 그룹화를 사용 중지합니다.
그림 8. 폴더별로 그룹화 옵션
리소스는 파일 유형별로 구성됩니다. 각 파일 형식 내에서 리소스는 알파벳순으로 구성됩니다.
그림 9. Group By Folder를 사용 중지한 후의 Page 창
파일 형식으로 찾아보기
파일 형식에 따라 리소스를 그룹화하려면 다음 단계를 따르세요.
Application 탭을 클릭합니다. Application 패널이 열립니다. 기본적으로 매니페스트 창이 먼저 열립니다.
그림 10. Application 패널
Frames 창까지 아래로 스크롤합니다.
그림 11. Frames 창
관심 있는 섹션을 펼칩니다.
리소스를 클릭하여 확인합니다.
그림 11. 애플리케이션 패널에서 리소스 보기
네트워크 패널에서 유형별로 파일 탐색
리소스 유형별로 필터링을 참조하세요.
그림 12. 네트워크 로그에서 CSS 필터링