[Dev Tools] DevTools의 네트워크를 능숙하게 사용합니다.각 항목의 견해와 사용 방법을 총결하다.

Chrome의 개발 도구인 네트워크 패널의 사용 방법에 대한 요약
또한 사용microsoft의 edge에서도 똑같은 개발 도구.
카탈로그

Devtool 시작

네트워크 패널의 주요 동작

Preserve log

Disable Cache

기록 캡처

네트워크 전환

거르다

임의 여과

요청 유형에 따라 필터링

Hide data URLs

여과 시간

waterfall

파일당 세부 정보

HTTP Headers

Preview

Response

Timing

Cookies

Devtool 시작ctrl + shift + I
네트워크 옵션을 클릭하십시오.
네트워크 패널의 주요 동작

기본값 없음

왼쪽 상단에 빨간색 원이 있을 때의 통신을 기록한다

Preserve log
모든 로그를 저장합니다.

Disable Cache
Disable cache에서 체크하면 캐시가 사용되지 않으므로 다시 로드해도 처음 액세스할 때와 읽기 속도가 동일합니다.
기록 캡처
호출에서 디스플레이까지의 포획을 시간 순서로 확인할 수 있습니다.
렌더링 속도와 도면 상황을 조사할 수 있습니다.
이전 크롬에는 비디오 아이콘이 있었는데, 지금은 톱니바퀴를 누르고capture schreenshot에 검사 표시를 넣습니다.

그림을 포획할 때 아래 waterfall에 표시된 노란색 선이 그려진 위치를 표시합니다.

네트워크 전환
온라인(현재 인터넷 통신), 3G, 오프라인 상태의 페이지가 어떻게 표시되는지 간단하게 확인할 수 있다.


dd를 클릭하면 좋아하는 설정을 추가할 수 있습니다.

거르다
얻은 로그를 필터하는 방법은 몇 가지가 있습니다.

임의 필터

요청 유형에 따른 필터

Hide data URLs

경과 시간에 따른 필터

임의 여과
왼쪽 위 모서리의 검색 창을 사용하여 필터링할 수 있습니다.
일치하는 파일 이름을 입력하거나 전용 검색어를 사용할 수 있습니다.

filter requests
요청 유형에 따라 필터링

XHR 소개
Ajax(비동기 통신)에 대한 내장 객체입니다.비동기 통신을 통해 요청을 보내는 자원을 확인할 수 있습니다.
XMLHttpRequest의 약칭입니다.
Hide data URLs
데이터 URL은 문서에 포함된 작은 파일입니다.첫머리에 data:의 방안이 첨부되어 있다.
URL만 있으면 이미지, 음악, 동영상 등의 편리한 방안을 삽입할 수 있다.

↓Hide data URLs가 선택되어 있으면 숨길 수 있습니다.

여과 시간
이 기간 동안만 파일을 표시할 수 있는 시간을 제한할 수 있습니다.

로그 패널
각 파일의 로그를 확인할 수 있습니다.

항목
컨텐트
Name
파일 이름
Status
HTTP 상태 코드
Type
MIME 유형
Initiator
자원 호출 초기 요청
Size
파일 크기(응답 머리글 및 바디)
Time
요청에서 마지막 응답까지의 총 시간
Waterfall
각 활동의 시각적 표시
로그 편집 패널
열을 추가하거나 삭제하려면 열 이름을 마우스 오른쪽 버튼으로 클릭합니다.

↓method,protocol 등 추가

waterfall
waterfall에서 모든 파일이 요청에서 표시까지 걸리는 시간을 확인할 수 있습니다.

각 파일을 선택하면 timing에서도 같은 정보를 확인할 수 있습니다.

항목
컨텐트
Queing
브라우저 대기열 생성 요청 시간
Stalled
요청을 보낼 수 있을 때까지 대기하는 시간입니다.
DNS Lookup
브라우저가 도메인 이름에서 IP 주소를 참조하는 데 걸린 시간(이름 해결에 걸린 시간)
Initial connection
TCP 및 SSL 연결을 설정하는 데 걸리는 시간
SSL
SSL 핸드셰이크가 완료되는 데 필요한 시간입니다.(TCP = Initial connection - SSL)
Request sent
요청을 보내는 데 걸린 시간
Waiting(TTFB)
첫 번째 응답까지 걸린 시간.이것은 서버가 요청을 받은 후 응답에 회답할 때까지의 시간입니다.TTFB라고도 합니다.(Time To First Bite)
Content Download
브라우저가 응답을 받기 전의 시간
파일당 세부 정보
파일 이름을 클릭하면 자세한 정보를 확인할 수 있습니다.

파일 종류에 따라 Cookies 및 Initiator 가 없습니다.
1. HTTP Headers
HTTP 머리글 확인

표시된 Headers 정보는 파일에 따라 다릅니다.


(참조)머리글 디테일
2. Preview
응답의 바디 미리보기를 확인할 수 있습니다.
▶content-type: image/jpeg의 예

▶Content-Type: application/javascript의 예

▶content-type: text/html; charset=utf-8의 예

3. Response
호응하는 몸을 확인할 수 있다.
▶content-type: text/html; charset=utf-8의 예

▶Content-Type: application/javascript의 예

4. Timing
요청에서 화면으로 표시되는 데 필요한 시간의 상세한 내용을 확인할 수 있습니다.

항목별 참조waterfall.
5. Cookies
쿠키 정보를 확인할 수 있습니다.

항목
컨텐트
Name
쿠키 이름
Value
쿠키 값
Domain
쿠키를 수신할 수 있는 호스트
Path
요청에 존재하는 URL
Expires/Max-Age
쿠키 최대 유효기간
Size
쿠키 크기 [bits]
HTTP only
✔준비된 경우 HTTP 쿠키만 사용합니다.JS 허용 안 함
Secure
✔준비된 경우 HTTPS 쿠키만 전송
SameSite
같은 사이트의 쿠키만 허용 여부 (none,strict lax)
구글의 주요 쿠키
Google은 광고의 복원 등에 사용됩니다. Doubliecck.인터넷 산하에 저장되다.
1. IDE
광고의 유효성을 측정하고 고객에게 목표 광고를 제시하기 위해 광고주의 광고를 열람, 클릭한 후 고객을 등록하고 보고하는 활동에 사용한다.
2. DSID
온라인 광고의 재편성, 최적화, 보고와 귀속 표시에 사용됩니다.
(참조)Google privacy policy
참조 링크
・Chrome DevTools