(맥 사파리/크롬) 웹브라우저에서 개발자모드로 요청 패킷 헤더보기
맥북 기준으로 작성
웹 브라우저는 safari, chrome 둘 다 가능하다.
safari
1. 개발자 모드 열기
option + command + i 클릭
2. 네트워크 탭 클릭
왼쪽에 나열되어 있는 것이, 네이버 접속 시 받아온 리소스이다 ! (수행된 수많은 요청의 response)
이 중 하나인 html 파일인 m.naver.com을 클릭해보면,
미리보기: m.naver.com 리소스(html) 을 볼 수 있다 !
헤더: 웹 브라우저 -> 서버 요청 패킷 헤더 및 응답 패킷 헤더
쿠키: 서버에서 발급한 쿠키값으로, 웹 브라우저가 저장할 것 (암호화하지 않는다는 것 확인 가능)
크기: 패킷 크기 (전체, 헤더, 페이로드(리소스)), 리소스 형식 확인 가능
시간: 요청 후 ~ 응답 시간, 응답 도달 ~ 리소스 다운로드 시간 확인 가능
보안: 프로토콜, 인증서 정보, ... 확인 가능
여기에서 헤더 확인 가능하다 ~!
Chrome
1. 개발자 모드 열기
option + command + i 클릭
2. 네트워크 탭 클릭
크롬의 경우, 네트워크 탭 클릭 시 아무것도 보이지 않는다. 이때 반드시 새로고침을 한 번 해주자 !
사파리와 마찬가지로 다운로드된 여러 리소스가 보인다.
이 중, www.naver.com을 클릭해보면
safari와 마찬가지로 헤더, 쿠키, 시간, 미리보기가 가능하며
흥미로운 것은,
1. safari와는 달리 html코드 미리보기 시에 렌더링된 화면을 볼 수 있다.
2. 또하나의 safari와의 차별점은 Initiator 탭이다.
www.naver.com에서 Initiaor 탭을 글릭한 화면이다.
이것은, www.naver.com에서 다시 어떤 url로 요청을 보내 원하는 리소스를 얻어왔는지를 보여준다.