네트워크 활동 검사

케이스 바스크

Twitter GitHub Glitch

페이지의 네트워크 활동 검사와 관련하여 가장 일반적으로 사용되는 DevTools 기능의 실습 튜토리얼입니다.

대신 기능을 둘러보려면 네트워크 참조를 확인하세요.

이 튜토리얼을 계속 읽거나 이 튜토리얼의 동영상 버전을 시청하세요.

Network 패널을 사용해야 하는 경우

일반적으로 리소스가 예상대로 다운로드 또는 업로드되고 있는지 확인해야 하는 경우 네트워크 패널을 사용합니다. Network 패널의 가장 일반적인 사용 사례는 다음과 같습니다.

• 리소스가 실제로 업로드 또는 다운로드되고 있는지 확인합니다.
• HTTP 헤더, 콘텐츠, 크기 등 개별 리소스의 속성 검사

페이지 로드 성능을 개선할 방법을 찾고 있다면 네트워크 패널부터 시작하지 마세요. 네트워크 활동과 관련 없는 다양한 유형의 부하 성능 문제가 있습니다. Lighthouse 패널로 시작하세요. 페이지 개선 방법에 관한 타겟팅된 추천을 제공합니다. 웹사이트 속도 최적화를 참고하세요.

네트워크 패널 열기

이 튜토리얼을 최대한 활용하려면 데모를 열고 데모 페이지의 기능을 사용해 보세요.

1. 시작하기 데모를 엽니다.

   

   그림 1. 데모

   데모를 별도의 창으로 이동하는 것이 좋습니다.

   

   그림 2. 한 창에 표시된 데모와 다른 창에 표시된 튜토리얼

2. Control+Shift+J 또는 Command+Option+J (Mac)를 눌러 DevTools를 엽니다. Console 패널이 열립니다.

   

   그림 3. 콘솔

   DevTools를 창 하단에 도킹하는 것이 좋습니다.

   

   그림 4. 창 하단에 도킹된 DevTools

3. 네트워크 탭을 클릭합니다. 네트워크 패널이 열립니다.

   

   그림 5. 창 하단에 도킹된 DevTools

현재 네트워크 패널은 비어 있습니다. DevTools는 열려 있는 동안에만 네트워크 활동을 기록하고 DevTools를 연 이후 네트워크 활동이 발생하지 않기 때문입니다.

네트워크 활동 로깅

페이지로 인해 발생하는 네트워크 활동을 보려면 다음 단계를 따르세요.

1. 페이지를 새로고침합니다. '네트워크' 패널에는 모든 네트워크 활동이 네트워크 로그에 기록됩니다.

   

   그림 6. 네트워크 로그

   네트워크 로그의 각 행은 리소스를 나타냅니다. 기본적으로 리소스는 시간순으로 나열됩니다. 최상위 리소스는 일반적으로 기본 HTML 문서입니다. 맨 아래 리소스는 마지막으로 요청된 모든 리소스입니다.

   각 열은 리소스에 대한 정보를 나타냅니다. 그림 6은 기본 열을 보여줍니다.

   • 상태. HTTP 응답 코드입니다.
   • 유형. 리소스 유형입니다.
   • 시작자. 리소스가 요청된 원인입니다. '초기자' 열의 링크를 클릭하면 요청을 일으킨 소스 코드로 이동합니다.
   • 시간. 요청에 걸린 시간입니다.

   • 폭포식 구조. 요청의 여러 단계를 그래픽으로 표현 폭포식 구조 위로 마우스를 가져가면 분석 내용을 확인할 수 있습니다.

     참고: 참고 네트워크 로그 위의 그래프를 개요라고 합니다. 이 튜토리얼에서는 사용하지 않으므로 원하는 경우 숨길 수 있습니다. [Overview 창 숨기기][6]를 참고하세요.

2. DevTools가 열려 있는 한, 네트워크 활동에 네트워크 활동이 기록됩니다. 이를 보여주려면 먼저 네트워크 로그 하단을 확인하고 마지막 활동을 기억해 둡니다.

3. 이제 데모에서 데이터 가져오기 버튼을 클릭합니다.

4. 네트워크 로그 하단을 다시 확인합니다. getstarted.json이라는 새 리소스가 있습니다. 데이터 가져오기 버튼을 클릭하면 페이지에서 이 파일을 요청했습니다.

   

   그림 7. 네트워크 로그의 새 리소스

자세히 보기

네트워크 로그의 열을 구성할 수 있습니다. 사용하지 않는 열을 숨길 수 있습니다. 또한 기본적으로 숨겨져 있는 열도 많이 있으므로 유용하게 활용할 수 있습니다.

1. 네트워크 로그 표의 헤더를 마우스 오른쪽 버튼으로 클릭하고 도메인을 선택합니다. 이제 각 리소스의 도메인이 표시됩니다.

   

   그림 8. 도메인 열 사용 설정

참고: 도움말: 이름 열에서 셀 위로 마우스를 가져가면 리소스의 전체 URL을 볼 수 있습니다.

느린 네트워크 연결 시뮬레이션

사이트를 구축하는 데 사용하는 컴퓨터의 네트워크 연결이 사용자의 휴대기기의 네트워크 연결보다 빠를 수 있습니다. 페이지를 제한하면 휴대기기에서 페이지를 로드하는 데 걸리는 시간을 더 잘 파악할 수 있습니다.

1. 기본적으로 온라인으로 설정된 제한 드롭다운을 클릭합니다.

   

   그림 9. 제한 사용 설정

2. 느린 3G를 선택합니다.

   

   그림 10. 느린 3G 선택

3. Reload 를 길게 누른 다음 Empty Cache And Hard Reload를 선택합니다.

   

   그림 11. 캐시 비우기 및 하드 새로고침

   재방문 시 브라우저는 일반적으로 캐시에서 일부 파일을 제공하므로 페이지 로드 속도가 빨라집니다. Empty Cache 및 Hard Reload는 브라우저를 모든 리소스에 대해 네트워크로 강제합니다. 이 기능은 신규 방문자의 페이지 로드 경험을 확인할 때 유용합니다.

   참고: 참고 Empty Cache 및 Hard Reload 워크플로는 DevTools가 열려 있을 때만 사용할 수 있습니다.

스크린샷 캡처

스크린샷을 통해 페이지가 로드되는 동안 시간이 지남에 따라 어떻게 표시되는지 볼 수 있습니다.

1. Capture Screenshots 를 클릭합니다.

2. Empty Cache And Hard Reload 워크플로를 통해 페이지를 다시 로드합니다. 실행 방법에 관한 알림이 필요하면 느린 연결 시뮬레이션을 참고하세요. 스크린샷 창에는 로드 프로세스 중에 페이지가 다양한 지점에서 어떻게 보이는지 썸네일이 표시됩니다.

   

   그림 12. 페이지 로드 스크린샷

3. 첫 번째 썸네일을 클릭합니다. DevTools는 해당 시점에 어떤 네트워크 활동이 발생하고 있었는지 보여줍니다.

   

   그림 13. 첫 번째 스크린샷에서 발생한 네트워크 활동

4. Capture Screenshots 를 다시 클릭하여 Screenshots 창을 닫습니다.

5. 페이지를 새로고침합니다.

리소스 세부정보 검사

리소스를 클릭하면 자세한 정보를 확인할 수 있습니다. 직접 해보기:

1. getstarted.html 아이콘을 클릭합니다. Headers 탭이 표시됩니다. 이 탭을 사용하여 HTTP 헤더를 검사할 수 있습니다.

   

   그림 14. 헤더 탭

2. 미리보기 탭을 클릭합니다. HTML의 기본 렌더링이 표시됩니다.

   

   그림 15. 미리보기 탭

   이 탭은 API가 HTML로 오류 코드를 반환하고 HTML 소스 코드보다 렌더링된 HTML을 더 쉽게 읽을 수 있거나 이미지를 검사할 때 유용합니다.

3. 응답 탭을 클릭합니다. HTML 소스 코드가 표시됩니다.

   

   그림 16. 응답 탭

   참고: 팁 파일을 축소할 때 응답 탭 하단에 있는 형식 버튼을 클릭하면 가독성을 위해 파일 콘텐츠의 형식이 다시 지정됩니다.

4. 시간 탭을 클릭합니다. 이 리소스의 네트워크 활동 분석 정보가 표시됩니다.

   

   그림 17. 시간 탭

5. Close 를 클릭하여 네트워크 로그를 다시 확인합니다.

   

   그림 18. 닫기 버튼

네트워크 헤더 및 응답 검색

모든 리소스의 HTTP 헤더 및 응답에서 특정 문자열이나 정규 표현식을 검색해야 하는 경우 검색 창을 사용합니다.

예를 들어, 리소스가 적절한 캐시 정책을 사용하고 있는지 확인하려 한다고 가정해 보겠습니다.

1. 검색 을 클릭합니다. 네트워크 로그 왼쪽에 검색창이 열립니다.

   

   그림 19. 검색창

2. Cache-Control를 입력하고 Enter 키를 누릅니다. 검색창에는 리소스 헤더 또는 콘텐츠에서 찾은 Cache-Control의 모든 인스턴스가 나열됩니다.

   

   그림 20. Cache-Control 검색결과

3. 결과를 클릭하여 확인합니다. 헤더가 헤더에 있으면 헤더 탭이 열립니다. 콘텐츠에서 쿼리가 발견되면 응답 탭이 열립니다.

   

   그림 21. 헤더 탭에 강조표시된 검색결과

4. '검색창'과 '시간' 탭을 닫습니다.

   

   그림 22. 닫기 버튼

리소스 필터링

DevTools는 당면한 작업과 관련이 없는 리소스를 필터링하는 다양한 워크플로를 제공합니다.

그림 23. 필터 툴바

필터 툴바는 기본적으로 사용 설정되어 있어야 합니다. 그렇지 않은 경우:

1. 필터 를 클릭하여 표시합니다.

문자열, 정규 표현식, 속성으로 필터링

필터 텍스트 상자는 다양한 유형의 필터링을 지원합니다.

1. 필터 텍스트 상자에 png을 입력합니다. png 텍스트가 포함된 파일만 표시됩니다. 이 경우 PNG 이미지와 일치하는 파일만 있습니다.

   

   그림 24. 문자열 필터

2. /.*\.[cj]s+$/를 입력합니다. DevTools는 j 또는 c로 끝나지 않고 그 뒤에 1개 이상의 s 문자가 있는 파일 이름을 가진 리소스를 필터링합니다.

   

   그림 25. 정규 표현식 필터

3. -main.css를 입력합니다. DevTools는 main.css를 필터링합니다. 패턴과 일치하는 다른 파일도 필터링됩니다.

   

   그림 26. 네거티브 필터

4. 필터 텍스트 상자에 domain:raw.githubusercontent.com을 입력합니다. DevTools는 이 도메인과 일치하지 않는 URL이 있는 리소스를 필터링합니다.

   

   그림 27. 속성 필터

   필터링 가능한 속성의 전체 목록은 속성별로 요청 필터링을 참고하세요.

5. 텍스트의 필터 텍스트 상자를 지웁니다.

리소스 유형으로 필터링

스타일시트와 같은 특정 파일 유형에 집중하려면 다음 단계를 따르세요.

1. CSS를 클릭합니다. 다른 모든 파일 형식은 필터링됩니다.

   

   그림 28. CSS 파일만 표시

2. 스크립트도 보려면 Control 또는 Command (Mac) 키를 누른 상태에서 JS를 클릭합니다.

   

   그림 29. CSS 및 JS 파일만 표시

3. 모두를 클릭하여 필터를 삭제하고 모든 리소스를 다시 확인합니다.

다른 필터링 워크플로는 요청 필터링을 참고하세요.

요청 차단

일부 리소스를 사용할 수 없을 때 페이지는 어떻게 보이고 작동할까요? 완전히 실패하나요? 아니면 여전히 어느 정도 작동하는가? 요청을 차단하면 다음 사항을 확인할 수 있습니다.

1. Control+Shift+P 또는 Command+Shift+P (Mac)를 눌러 Command 메뉴를 엽니다.

   

   그림 30. 명령어 메뉴

2. block를 입력하고 Show Request Blocking을 선택한 후 Enter 키를 누릅니다.

   

   그림 31. 요청 차단 표시

3. 패턴 추가 를 클릭합니다.

4. main.css를 입력합니다.

   

   그림 32. main.css님 차단 중

5. Add를 클릭합니다.

6. 페이지를 새로고침합니다. 예상대로 기본 스타일시트가 차단되었으므로 페이지의 스타일이 약간 엉망이 됩니다. 네트워크 로그의 main.css 행을 확인합니다. 빨간색 텍스트는 리소스가 차단되었음을 의미합니다

   

   그림 33. main.css님이 차단되었습니다.

7. 요청 차단 사용 설정 체크박스를 선택 해제합니다.

다음 단계

축하합니다. 가이드를 완료했습니다. 디스펜스 어워즈를 클릭하여 어워즈를 받습니다.

네트워크 참조를 확인하여 네트워크 활동 검사와 관련된 DevTools 기능을 더 찾아보세요.