[디버깅] 개발자모드 Network

■ 통신 테스트를 진행하다보면 네트워크의 흐름을 봐야 할 일들이 있다. 통신 URL 이 원하는 방향으로 잘 향하고 있는지 중간에 값은 잘 들어가 있는지 어느 페이지가 문제가 되는지 이러한 것들을 네트워크에서 알 수 있는 정보들이 많이 있다. 다른 디버깅 모드를 통해서 확인할 수도 있고 콘솔이나 서버 오류 들로도 알 수도 있지만 통신의 흐름을 직관적으로 보기에는 Network 탭을 참고하는게 도움이 될 때가 있다.

 

개발자 모드 - 네트워크 탭 확인 방법(크롬)

1) F12(개발자모드) - Network 탭 click

2) 마우스 우클릭 - 검사 - Network 탭 click

 

 

네트워크는 페이지가 이동될 때 많은 정보들이 나타나게 된다. 아래 사진은 구글 메인화면에서 네이버로 이동할 때의 모습이다.

 

 

 도메인으로 접근을 하면서 브라우저에서 통신 보낼 때의 정보들이 눈에 띈다. 제일 대표적인 내용은 Request URL 정보이다. 어떤 프로토콜을 호출하는지 어떤 도메인으로 통신하는지 등 다양한 정보들을 알 수 있다. 나도 이 부분에서 사용하는 정보가 많지 않지만 관심이 있다면 하나씩 살펴봐도 도움이 될 것 같다.

 특히 리다이렉트 되는 프로세스가 있다면 전체 프로세스를 생각하면서 어느 부분에서 오류가 발생하는지 통신이 잘 되는지 찾아내는데 도움이 된다고 생각한다.

 

 오류가 발생했을 때 제일 기본은 서버의 로그를 살펴보는 것도 맞지만 로그에 남지 않는 경우들도 많다. 그 때 찾아내는 방법 중에 Network 또한 유용한 방법이지 않을까 싶다.

 

※ 개발자모드의 Elements, Console 부분은 다들 많이 보겠지만 그 외적으로 Application.Network 등을 살펴보면 정보를 이루고 있는 다양한 속성들을 이해할 수 있는 것 같아 재미있다.