HAR 파일 Import와 Export (with Chrome 브라우저)

• HAR 파일은 HTTP Archive format의 약자
• HAR 파일은 웹 브라우저와 웹 사이트 간의 정보 추적에 사용되는 형식
• HAR 파일은 크롬 개발자 도구 네트워크 탭의 패널 정보가 JSON 형식으로 변환

 

• HAR 파일은 주로 페이지 렌더링 문제, 로딩 시간, API 호출하는 과정에서 발생한 에러를 분석하는 용도로 사용
• 예를 들어, API를 호출하는 과정에서 에러가 발생하였으며, 에러 내용을 웹 페이지 개발자에게 전달해야 하는 경우 HAR 파일만 전달하면 문제 파악하기 쉬움

 

 

1. HAR 파일이 유용한 경우

1. 차단된 요청 및 응답(Blocked request-responses)
   • 개발자는 HAR 파일을 통해 차단된 요청 및 응답에 대한 다양한 상황 파악하기 쉬움
   • 차단된 요청 및 응답에 대한 HAR 파일 분석을 통해 네트워크 역량을 향상 가능
     
     
2. 네트워크 시각화(Network Visualization)
   • HAR 파일에는 리소스 요청에 대한 자세한 로딩 시간이 포함됨
   • HAR 파일을 통해 웹 페이지의 성능을 파악하기 쉬움
     
     
3. 복호화된 트래픽 포렌식(Decrypted Traffic Forensics)
   • 프록시(Proxy)와 같은 중간 매개체는 요청 및 응답의 내용이 수정됨
   • HAR 파일의 내용을 통해 네트워크 트래픽으로부터 분리되어 있고 복호화되었기에 모든 리소스가 정상적으로 로드되었는지 확인 가능

 

2. HAR 파일 분석 시 주의사항

• 각 리소스에 대한 정보를 통해 로딩 병목 현상을 줄이고 사이트 속도를 개선할 수 있는 부분을 찾을 수 있음
  
  

1. DNS 조회 시간
   • DNS 조회 시간은 ISP, 위치 및 DNS와 같은 여러 요인에 따라 달라질 수 있음
   • 로드되는 리소스가 많은 경우 해당 리소스 때문에 DNS 조회 시간이 증가할 수 있음
     
     
2. 캐시 되지 않는 리소스
   • 웹 페이지를 로드할 때마다 정적인 리소스는 다시 로드하면 안됨
   • 해웹 페이지를 재방문할 때마다 동일한 리소스를 요청하는 경우, 페이지 로딩 시간에 영향을 미침
     
     
3.  로딩 시간이 긴 리소스
   • 리소스의 파일 형식에 따라 리소스를 압축하거나 사용하지 않는 요소를 결합 또는 제거를 통해 로딩 시간을 줄 일 수 있음
   • 리소스에 따라 로딩 시간이 길어 질 수 있음

 

3. 크롬에서 HAR 파일 내보내기(export) 방법

1. 네트워크 분석이 필요한 웹 페이지로 접속
2. 크롬 개발자 도구 실행 후 네트워크 탭을 선택
3. 이슈가 되었던 문제를 재현
4. Chrome에서 HAR 내보내기(export)를 클릭하여 다운로드

 

3.1.  HAR 내보내기(export) 아이콘 클릭

 

3.2. 마우스 우클릭 → 모두 콘텐츠가 포함된 HAR로 저장

 

4. 크롬에서 HAR 파일 가져오기(import) 방법

1. 크롬을 실행
2. 크롬 개발자 도구 실행 후 네트워크 탭을 선택
3. import(가져오기) 아이콘을 클릭
   

   

    
    
4. 파일 탐색기 창에서 HAR 파일을 가져오기(import)

 

 

 

참고 자료 : https://developer-talk.tistory.com/834