(맥 사파리/크롬) 웹브라우저에서 개발자모드로 요청 패킷 헤더보기

맥북 기준으로 작성

웹 브라우저는 safari, chrome 둘 다 가능하다.

---

safari

1. 개발자 모드 열기

option + command + i 클릭  

개발자 모드 실행 (사파리)

 

 

 

2. 네트워크 탭 클릭

safari 개발자모드 네트워크탭

 

왼쪽에 나열되어 있는 것이, 네이버 접속 시 받아온 리소스이다 ! (수행된 수많은 요청의 response)

 

이 중 하나인 html 파일인 m.naver.com을 클릭해보면, 

m.naver.com 확인

 

미리보기: m.naver.com 리소스(html) 을 볼 수 있다 !   

 

헤더: 웹 브라우저 -> 서버 요청 패킷 헤더 및 응답 패킷 헤더

쿠키: 서버에서 발급한 쿠키값으로, 웹 브라우저가 저장할 것 (암호화하지 않는다는 것 확인 가능)

크기: 패킷 크기 (전체, 헤더, 페이로드(리소스)), 리소스 형식 확인 가능 

시간: 요청 후 ~ 응답 시간, 응답 도달 ~ 리소스 다운로드 시간 확인 가능

보안:  프로토콜, 인증서 정보, ... 확인 가능

 

여기에서 헤더 확인 가능하다 ~!

 

 

 

---

Chrome

1. 개발자 모드 열기

option + command + i 클릭  

개발자 모드 실행 (크롬)

 

 

2. 네트워크 탭 클릭

크롬의 경우, 네트워크 탭 클릭 시 아무것도 보이지 않는다. 이때 반드시 새로고침을 한 번 해주자 !

새로고침 후 화면

 

사파리와 마찬가지로 다운로드된 여러 리소스가 보인다. 

이 중, www.naver.com을  클릭해보면

www.naver.com 확인

 

safari와 마찬가지로 헤더, 쿠키, 시간, 미리보기가 가능하며

 

흥미로운 것은,

1. safari와는 달리 html코드 미리보기 시에 렌더링된 화면을 볼 수 있다.

HTML 코드 (렌더링)

 

 

2. 또하나의 safari와의 차별점은 Initiator 탭이다.

Initiator 탭

 

www.naver.com에서  Initiaor 탭을 글릭한 화면이다.  

 

이것은, www.naver.com에서  다시 어떤 url로 요청을 보내 원하는 리소스를 얻어왔는지를 보여준다.