네트워크 활동 검사

Kayce Basques

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

기능을 둘러보려면 네트워크 참조를 참고하세요.

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

Network 패널을 사용하는 경우

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

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

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

네트워크 패널 열기

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

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

   

   그림 1. 데모

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

   

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

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

   

   그림 3. 콘솔

   DevTools를 창 하단에 고정하는 것이 나을 수도 있습니다.

   

   그림 4. DevTools가 창 하단에 고정됨

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

   

   그림 5. DevTools가 창 하단에 고정됨

지금은 Network 패널이 비어 있습니다. 그 이유는 DevTools가 열려 있는 동안에만 네트워크 활동을 기록하며 DevTools를 연 후 네트워크 활동이 발생하지 않았기 때문입니다.

네트워크 활동 로깅

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

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

   

   그림 6. 네트워크 로그

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

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

   • 상태. HTTP 응답 코드입니다.
   • 유형. 리소스 유형입니다.
   • 시작자. 리소스를 요청한 이유입니다. Initiator(시작자) 열의 링크를 클릭하면 요청을 일으킨 소스 코드로 이동합니다.
   • 시간. 요청에 걸린 시간입니다.

   • 폭포. 요청의 여러 단계를 그래픽으로 나타낸 것입니다. 폭포 위로 마우스를 가져가면 분석 내용을 확인할 수 있습니다.

     참고: 참고 네트워크 로그 위의 그래프를 개요라고 합니다. 이 튜토리얼에서는 사용하지 않으므로 원하는 경우 숨길 수 있습니다. [개요 창 숨기기][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 And Hard Reload 워크플로는 DevTools가 열려 있는 경우에만 사용할 수 있습니다.

스크린샷 캡처

스크린샷을 사용하면 로드되는 동안 시간이 지남에 따라 페이지가 어떻게 표시되는지 확인할 수 있습니다.

1. Capture Screenshots 를 클릭합니다.

2. Empty Cache And Hard Reload 워크플로를 통해 페이지를 다시 로드합니다. 자세한 방법은 느린 연결 시뮬레이션하기를 참고하세요. Screenshots 창은 로드 프로세스 중에 페이지가 다양한 지점에서 어떻게 보이는지 보여주는 썸네일을 제공합니다.

   

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

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

   

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

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

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

리소스 세부정보 검사

리소스를 클릭하여 자세히 알아보세요. 직접 해보기:

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

   

   그림 14. 헤더 탭

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

   

   그림 15. 미리보기 탭

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

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

   

   그림 16. 응답 탭

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

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

   

   그림 17. 소요 시간 탭

5. 네트워크 로그를 다시 보려면 닫기 를 클릭합니다.

   

   그림 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. 추가를 클릭합니다.

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

   

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

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

다음 단계

축하합니다. 튜토리얼을 완료했습니다. Dispense Award를 클릭하여 어워즈를 받습니다.

네트워크 참조에서 네트워크 활동 검사와 관련된 추가 DevTools 기능을 알아보세요.