HAR File 로 HTTP Request 추적하기

최근에 AWS ELB 쪽 버그를 제보하면서 AWS 에서 버그를 제보하는 방법에 대해서 가이드를 받았었다. 가이드를 받던 도중 .har 파일이라는 것에 대해 알게되었는데, 이게 참 기획자 분이나 QA 분에게 알려드리면 좋을것 같아서 사내 위키에 올리고 팀원에게 공유했다.

 

Har file 이란?

HTTP Archive format 의 약자로 Json 형태의 파일로 네트워크 기록을 Debug 하기 위해 사용한다. Viewer 를 통해 파일을 열어보면 아래 사진으로 확인할 수 있듯이 해당 유저가 Network Tab 의 기록동안 어떤 일을 했는지 파악할 수 있다.

하는 방법

1. Chrome Tab 에서 개발자 도구를 연다

2. Network 기록 제거를 실행한다. (반드시 해주어야함!!!)

3. 기록을 다 지웠다면 버그가 났던 상황을 똑같이 재현합니다. 개발자도구를 닫지 말고 재현해주세요.

4. 재현한 후에 네트워크 탭에서 "Save all as Har with content" 를 눌러서 파일을 저장해주세요.

 

5. 아래의 링크로 들어가서 Chrome Extension 을 설치해주세요.

- https://chrome.google.com/webstore/detail/http-archive-viewer/ebbdbdmhegaoooipfnjikefdpeoaidml/related?hl=ko 

HTTP Archive Viewer

6. 프로그램이 맥에 잘 설치되었는지 확인하고 설치되었다면 실행해주세요

7. 아까의 har 파일을 네모 상자에 드롭해주세요

8. 아래와 같이 유저의 모든 HTTP Action 을 확인할 수 있습니다.

후기

AWS 에 버그를 제보하면서 위와 같은 방법들을 Guide 받았는데 이게 애매한 버그들을 찾기 좋겠다는 참 좋은 생각이 들었다. 이전에 버그 추적을 위해서 세션값으로 추적하거나 했는데, 재현가능한 버그를 발견할때는 이런식으로 har 파일로 달라고 하면 더 찾기 쉽겠다는 생각이 많이 들었다 ㅎㅎ.