이 Codelab에서는 모든 네트워크를 해석하는 과정을 안내합니다. 복잡한 샘플 애플리케이션의 트래픽을 처리할 수 있습니다. 연습이 끝나면 자신의 웹 애플리케이션이 무엇인지 파악하는 데 필요한 기술이 언제인지 확인할 수 있습니다.
네트워크 패널로 이동합니다.
데모의 네트워크 트래픽을 보려면 네트워크 패널로 이동하세요. 애플리케이션입니다.
사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음 전체 화면
입니다.`Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
네트워크 탭을 클릭합니다.
페이지를 새로고침하여 네트워크 트래픽을 확인하세요.
Network 패널에는 초기 설정으로 인해 로드된 모든 애셋이 탐색:
항목 해석 방법
기록된 네트워크 트래픽의 각 행은 단일 요청과 응답을 나타냄 페어링합니다.
유형이 document인 첫 번째 행은
웹 앱의 HTML에서 로드합니다. 이것은 폭포식 구조의 소스입니다. 이후에
추가 애셋 (기본 문서의 하위 리소스라고 함)에 대한 요청 흐름
볼 수 있습니다
CSS stylesheet와 script 하위 리소스를 보여주는 두 번째 및 세 번째 행
는 기본 문서에 의해 시작된 종속된 요청입니다.
이러한 요청이 이루어진 시점을 살펴보면 폭포형 다이어그램을 보면 이러한 요청에 응답하는 과정이 매우 늦게 탐색 요청에 사용합니다.
HTML 문서, CSS 및 전체 페이지를 표시하려면 시작할 수 있습니다.
추가 런타임 요청 만들기
Network 패널이 계속 열려 있고 녹화 중인 상태에서 무언가를 시뮬레이션합니다. 많은 웹 앱에 공통적으로 적용됩니다. 즉, 웹사이트에 더 많은 데이터를 추가하는 데 사용되는 초기 탐색이 완료된 후 페이지가 표시됩니다.
앱에서 Find Me를 클릭한 후 Allow(허용)를 선택합니다. 사이트에서 내 현재 위치에 액세스할 수 있게 됩니다.
웹 앱에서 작업할 위치를 찾으면 주변 찾기를 클릭합니다. 위키백과 항목을 입력하면 추가 네트워크 요청이 여러 개 발생합니다. 나 다음과 같이 표시됩니다.
새 항목 해석
이전과 마찬가지로 기록된 네트워크 트래픽의 각 행은 단일 요청을 나타냅니다. 응답 쌍입니다.
새 항목의 첫 번째 행은 fetch 유형의 요청을 나타냅니다.
이는 포드의
웹 앱에서 데이터를 요청하는 방식
Wikipedia API에서 가져온 것입니다.
다음 행은 모두pngjpeg
위키백과 항목 스크린샷으로 보기가 조금 어렵지만
Waterfall 열의 항목은 API 응답에서 바로 전송됩니다.
이러한 모든 추가 요청에 대해 시기는 페이지를 열어둔 채 주변 위키백과 찾기를 클릭하기 전에 '응모'. 여기서 가장 중요한 것은 when이 초기 탐색 요청을 전송합니다. 데이터 레이크에 존재하는 큰 격차를 통해 폭포식 구조 디스플레이가 초기 로드와 Wikipedia API 요청이 이루어진 시점입니다.
탐색 후 일정 시간이 지난 후에 이루어진 요청은 카테고리로 분류됩니다. '런타임 요청'과 첫 번째 요청 집합과는 대조적으로 '정보' 링크를 클릭합니다.
요약
이 Codelab의 단계를 통해 이제 모든 웹 애플리케이션이 로드하는 항목을 분석하는 데 사용할 수 있는 도구를 제공합니다.
Network 패널에서는 무엇이 로드되고 있는지에 대한 질문에 이름 열의 URL과 유형 열의 데이터, 결과 구체화 시점 로드되고 있습니다.
또한 웹페이지의 요청이 일반적으로 다음 두 카테고리 중 하나입니다.
- 첫 번째 요청은 새 페이지로 이동한 직후에 HTML, JavaScript, CSS (및 기타 애셋)
- 사용자와 페이지의 상호작용의 결과로 발생한 런타임 요청입니다. 이 보통 API에 대한 요청으로 시작해서 후속 요청을 처리합니다.