내가 모르는 크롬 네트워크 패널 팁

페이지 로드 및 렌더링 프로세스 스냅샷
네트워크 패널의 왼쪽 상단에 있는 세 번째 카메라 아이콘 버튼을 클릭하여 녹화 모드에 들어가면 새로 고친 후에 페이지 로드 렌더링 과정을 녹화할 수 있다(네트워크 로드가 너무 빨라도 No throttling에서 네트워크를 3G로 제한할 수 있다) 녹화 완성 결과는 위의 그림과 같다. 각 스냅샷에 대응하는 시간이 있고 마우스가 각 스냅샷에 이동할 때 상응하는 시간도 아래의 Timeline에 나타난다.두 번 클릭하면 스냅샷을 볼 때 페이지의 렌더링 상태를 열 수 있습니다. 오른쪽 단추를 누르면 다음 페이지로 전환할 수 있습니다
우리는 이 기능을 이용하여 우리의 페이지의 각 부분의 렌더링 순서를 명확하게 알고 첫 번째 화면의 마운트를 최적화할 수 있다.
보기 요청 발송 기원 등 정보

Initator 열에서 이 요청이 불러오는 파일과 위치를 표시합니다

열 헤더는 정렬을 클릭할 수도 있고, 오른쪽 단추를 눌러서 더 많은 열을 추가할 수도 있다. 예를 들어Protocol

필터 요청

Ctrl or Command(Mac)를 누르면 여러 필터 조건을 선택할 수 있습니다. 위의 그림

참조

필터 입력 상자 지원 조건 조회: 예를 들어 domain:*.juancdn.com larger-than:10k, 더 많은 참고: Filter-requests

XHR 재생
aax 요청에서 오른쪽 단추를 누르고 Replay XHR 를 선택하면 다시 보낼 수 있습니다. 이것은 전방 디버깅 인터페이스에서 사용하기 좋습니다.
관련 참조

https://developers.google.com...

Chrome 콘솔 불완전 가이드

원본 주소:https://uedsky.com/2016-09/chrome-network/최상의 독서 경험을 얻고 토론에 참여하려면 원문을 방문하십시오