[Google Chrome] Network 분석을 위한 HAR 파일 사용

본 포스트는 크롬 브라우저의 개발자 도구를 사용하여 네트워크 기록을 분석할 수 있는 HAR 파일 사용법에 대한 설명입니다.

 

 

개발을 하다가 특정 환경이나 사용자에게 오류가 발생하는 경우, 특히나 Back-end가 아닌 Front-end에서 오류가 발생하는 경우 분석을 위해 해당 시점의 네트워크 요청과 결과를 알고 싶을 때가 있습니다.

 

물론 서버에 전체 Request와 Response에 대한 로그를 남긴다면 서버에서 로그를 조회할 수도 있겠지만 너무 대용량이라 전체 로그는 남기기가 쉽지 않습니다. 만약 이럴 경우에 개발자나 테스터에게 동일한 오류가 발생했을 경우 HAR 파일로 저장한 후 네트워크 데이터 분석에 사용할 수 있습니다.

(B2E 같은 내부 사용자를 위한 시스템이면 사용자에게도 로그를 부탁할 수 있겠지만, 대고객 시스템은 이런 경우는 어림 없습니다.)

 

네트워크 기록을 HAR 파일로 저장하기 위해서는 아래와 같이 진행합니다.

 

1. [F12]를 눌러 개발자 도구를 열고 [Network] 탭으로 이동합니다.

2. 도구 중 아래 버튼을 선택합니다.

    또는 바로가기 메뉴에서 [Save all as HAR with content] 를 선택해도 됩니다.

3. 원하는 위치와 파일명을 지정하여 저장합니다.

 

저장한 파일을 에디터에서 열어보면 네트워크 기록이 JSON 형태로 저장되어 있습니다. 해당 내용을 보고 파악하기는 힘들고, 전달받은 HAR 파일을 Google Chrome의 [Network] 탭으로 드래그합니다.

생성하는 시점과 동일한 네트워크 기록이 표시되어 분석할 수 있습니다.

 

HAR 파일은 Chrome이 아닌 다른 브라우저에서도 저장할 수 있습니다.