32장 Network 패널로 느림과 실패 찾기

Network 패널은 페이지가 서버에 보낸 요청과 받은 응답을 기록한다. 패널을 연 뒤 기록 버튼이 켜진 상태에서 페이지를 새로고침한다. 문서, 스크립트, 이미지, 폰트, API 요청이 나타나고 상태 코드, 크기, 시간, 시작 순서를 비교할 수 있다. 문제를 재현하기 전에 열어야 첫 요청부터 잡힌다.

빨간 요청은 실패를 뜻할 수 있지만 광고 차단 확장이 일부 추적 요청을 막은 정상 결과일 수도 있다. 실제 기능과 관련된 이름인지, 상태가 4xx인지 5xx인지, 오래 기다리다 취소됐는지 본다. Waterfall은 DNS, 연결, 서버 대기, 다운로드가 겹치는 흐름을 보여 준다. 가장 큰 파일 하나보다 시작을 막는 긴 요청이 더 중요할 수 있다.

Disable cache는 DevTools가 열린 동안 캐시를 쓰지 않게 해 첫 방문에 가까운 조건을 만든다. Network throttling은 느린 회선을 흉내 내지만 컴퓨터 성능과 실제 이동통신 품질을 완전히 재현하지 않는다. Preserve log는 페이지 이동 전 기록을 남겨 로그인 리디렉션을 추적할 때 유용하다.

HAR 내보내기에는 주소, 쿠키, 헤더, 요청 본문, 응답 데이터가 담길 수 있다. 지원팀에 보내기 전에 민감 정보를 제거할 도구와 절차를 확인한다. 단순 화면 캡처보다 강력한 진단 자료인 만큼 취급도 더 엄격해야 한다. 자신의 사이트나 명시적으로 허가받은 시스템에서만 분석한다.