[Chrome]HAR 파일 가져오기 및 내보내기

HAR 파일

HAR는 HTTP Archive format의 약자로 웹 브라우저와 웹 사이트 간의 정보 추적에 사용되는 형식입니다.

좀 더 쉽게 설명하자면, 크롬 개발자 도구 네트워크 탭의 패널 정보가 JSON 형식으로 변환된 파일입니다.

HAR 파일은 주로 페이지 렌더링 문제, 로딩 시간, API 호출하는 과정에서 발생한 에러를 분석하는 용도로 사용됩니다.

예를 들어, API를 호출하는 과정에서 에러가 발생하였으며, 에러 내용을 웹 페이지 개발자에게 전달해야 하는 경우 HAR 파일만 전달하면 됩니다.

이번 포스팅은 HAR 파일의 장점과 크롬에서 HAR 파일을 내보내거나 가져오는 방법을 설명합니다.

---

HAR 파일이 유용한 경우

다음은 HAR 파일을 유용하게 사용할 수 있는 몇 가지 사례입니다.

 

차단된 요청 및 응답(Blocked request-responses)

개발자는 HAR 파일을 통해 차단된 요청 및 응답에 대한 다양한 시나리오를 세울 수 있으며, 네트워크 역량을 향상할 수 있습니다.

 

네트워크 시각화(Network Visualization)

HAR 파일에는 리소스 요청에 대한 자세한 로딩 시간이 포함되어 있습니다. HAR 파일을 통해 웹 페이지의 성능을 이해할 수 있습니다.

 

복호화된 트래픽 포렌식(Decrypted Traffic Forensics)

프록시(Proxy)와 같은 중간 매개체는 요청 및 응답의 내용을 수정할 수 있는데, HAR 파일의 내용은 네트워크 트래픽으로부터 분리되어 있고 복호화되었기에 모든 리소스가 정상적으로 로드되었는지 확인할 수 있습니다.

---

크롬에서 HAR 파일 내보내기

다음은 크롬에서 HAR 파일을 생성하는 방법입니다.

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

다운로드 방법 1. 내보내기 아이콘 클릭

다운로드 2. 마우스 우클릭 > 모두 콘텐츠가 포함된 HAR로 저장

---

크롬에서 HAR 파일 가져오기

다음은 크롬에서 HAR 파일을 가져오는 방법입니다.

순서 1. 크롬을 실행합니다.
순서 2. 크롬 개발자 도구 실행 후 네트워크 탭을 선택합니다.
순서 3. 가져오기 아이콘을 클릭합니다.

순서 4. 파일 탐색기 창에서 HAR 파일을 가져옵니다.

HAR 파일을 가져오면, HAR 파일 내용을 네트워크 패널에 표시합니다.

---

HAR 파일 분석 방법

HAR 파일이 JSON 형식의 데이터이므로 Visual Studio에서 실행할 수 있지만, 10,000 줄이 넘으므로 직접 분석하는 것은 권장하지 않습니다.

HAR 파일을 분석하려면 크롬과 같은 웹 브라우저를 사용하거나 HAR 뷰어를 사용합니다.

---

HAR 파일 분석 주의사항

HAR 파일은 웹 브라우저 또는 HAR 뷰어를 사용하여 분석할 수 있으며, 각 리소스를 로드하는 데 걸리는 시간을 확인할 수 있습니다. 해당 정보를 통해 로딩 병목 현상을 줄이고 사이트 속도를 개선할 수 있는 부분을 찾을 수 있습니다. HAR 파일을 분석할 때 주의해야 할 일반적인 사항은 다음과 같습니다.

 

DNS 조회 시간

DNS 조회 시간은 ISP, 위치 및 DNS 관리자와 같은 여러 요인에 따라 달라질 수 있습니다. 여러 요인이 반영되었음에도 불구하고 로드되는 리소스가 많은 경우 해당 리소스 때문에 DNS 조회 시간이 증가할 수 있습니다.

 

캐시 되지 않는 리소스

웹 페이지를 로드할 때마다 정적인 리소스는 다시 로드하면 안 됩니다. 해당 웹 페이지를 재방문할 때마다 동일한 리소스를 요청하므로 페이지 로딩 시간에 영향을 미칩니다.

 

로딩 시간이 긴 리소스

리소스의 파일 형식에 따라 리소스를 압축하거나 사용하지 않는 요소를 결합 또는 제거를 통해 로딩 시간을 줄일 수 있습니다.