HAR 파일이란?

HAR (HTTP Archive) 파일은 웹 페이지에서 발생하는 네트워크 요청과 응답을 기록하는 JSON 형식의 파일로, 웹 성능 문제를 분석하거나 디버깅할 때 유용한 도구입니다. 이 파일은 페이지 로딩 시간, 리소스 로딩, 요청 및 응답 헤더 등 모든 HTTP 트랜잭션에 대한 상세 정보를 포함합니다. 

HAR 파일 활용법

HAR 파일을 개발팀에 제공하면, 문제의 원인을 빠르게 파악하고 해결할 수 있습니다. 예를 들어, 페이지 로딩 속도나 특정 요청에서 발생하는 지연 시간을 쉽게 확인할 수 있어 성능 문제나 네트워크 트래픽 문제를 더 빠르고 정확하게 분석할 수 있습니다.

HAR 파일 기록 방법

(*사용하는 브라우저를 클릭하여 해당 방법으로 넘어가세요)

1. Google Chrome

2. Mozilla Firefox

3. Microsoft Edge

4. Safari

5. Whale

1. Google Chrome에서 HAR 파일 기록하기

1. 개발자 도구 열기

   • 브라우저 우측 상단의 세 점 메뉴 > 도구 더보기 > 개발자 도구를 클릭하거나,
   • F12 키를 눌러 개발자 도구를 엽니다.
     
     

2. Network 탭 선택
   

   개발자 도구에서 Network 탭을 클릭합니다.
   • 녹화 버튼이 빨간색으로 표시되어있는지 확인합니다.
   • Preserve log 체크박스에 체크가 되어있는지 확인합니다.
     
     
     
     

3. 네트워크 항목 지우기 및 새로고침
   

   깨끗한 네트워크 로그 캡처를 위해 기록된 로그 항목들을 지우고 페이지를 새로고침 합니다.
   
   • ⊘ 버튼을 클릭하거나, Ctrl + L (Windows) 또는 Cmd + K (Mac)를 클릭합니다.
   • Ctrl + R (Windows) 또는 Cmd + R (Mac)을 눌러 페이지를 새로 고침합니다.
     
     
     

4. HAR 파일 저장

   오류가 발생하는 부분을 재현한 뒤 네트워크 요청이 기록되면, Network 탭 안에서 우측 상단의 📥 아이콘을 클릭하여 HAR 파일을 저장합니다.
   
   

2. Mozilla Firefox에서 HAR 파일 기록하기

1. 개발자 도구 열기

   • 브라우저 우측 상단의 세 점 메뉴 > 도구 더보기 > 개발자 도구를 클릭하거나,
   • F12 키를 눌러 개발자 도구를 엽니다.
     
     

2. Network 탭 선택
   

   개발자 도구에서 Network 탭을 클릭합니다.
   
   
   
   

3. 네트워크 항목 지우기 및 새로고침
   

   깨끗한 네트워크 로그 캡처를 위해 기록된 로그 항목들을 지운 후 페이지를 새로고침 합니다.
   
   • 🗑️ 버튼을 클릭하거나, Ctrl + L (Windows) 또는 Cmd + K (Mac)를 클릭합니다.
   • Ctrl + R (Windows) 또는 Cmd + R (Mac)을 눌러 페이지를 새로 고침합니다.
     
     
     
     

4. HAR 파일 저장

   오류가 발생하는 부분을 재현한 뒤 네트워크 요청이 기록되면, Network 탭 안에서 마우스 우측을 클릭하여 "Save All As HAR" 선택하여 파일을 저장합니다.
   
   

3. Microsoft Edge에서 HAR 파일 기록하기

1. 개발자 도구 열기

   • 브라우저 우측 상단의 세 점 메뉴 > 도구 더보기 > 개발자 도구를 클릭하거나,
   • F12 키를 눌러 개발자 도구를 엽니다.
     
     

2. Network 탭 선택
   

   개발자 도구에서 Network 탭을 클릭합니다.
   • 녹화 버튼이 빨간색으로 표시되어있는지 확인합니다.
   • Preserve log 체크박스에 체크가 되어있는지 확인합니다.
     
     
     
     

3. 네트워크 항목 지우기 및 새로고침
   

   깨끗한 네트워크 로그 캡처를 위해 기록된 로그 항목들을 지운 후 페이지를 새로고침 합니다.
   
   • ⊘ 버튼을 클릭하거나, Ctrl + L (Windows) 또는 Cmd + K (Mac)를 클릭합니다.
   • Ctrl + R (Windows) 또는 Cmd + R (Mac)을 눌러 페이지를 새로 고침합니다.
     
     
     
     

4. HAR 파일 저장

   오류가 발생하는 부분을 재현한 뒤 네트워크 요청이 기록되면, Network 탭 안에서 우측 상단의 📥 아이콘을 클릭하여 HAR 파일을 저장합니다.
   
   
   
   
   

4. Safari에서 HAR 파일 기록하기

1. 개발자 도구 열기

   • Safari 메뉴 > 개발 > 웹 인스펙터 열기를 클릭합니다.
     (개발자 도구가 보이지 않으면, Safari 설정에서 개발자 도구 활성화 옵션을 체크해야 합니다.)
     
     

2. Network 탭 선택

   개발자 도구에서 Network 탭을 선택합니다.
   
   
   
   

3. 네트워크 항목 지우기 및 새로고침

   깨끗한 네트워크 로그 캡처를 위해 기록된 로그 항목들을 지운 후 페이지를 새로고침 합니다.
   
   • 🗑️ 버튼을 클릭하거나, Ctrl + L (Windows) 또는 Cmd + K (Mac)를 클릭합니다.
   • Ctrl + R (Windows) 또는 Cmd + R (Mac)을 눌러 페이지를 새로 고침합니다.
     
     
     
     

4. HAR 파일 저장

   오류가 발생하는 부분을 재현한 뒤 네트워크 요청이 기록되면, Network 탭 안에서 우측 상단의 Export 버튼을 클릭하여 HAR 파일을 저장합니다.
   
   
   
   
   

4. Whale에서 HAR 파일 기록하기

1. 개발자 도구 열기

   • 브라우저 우측 상단의 세 점 메뉴 > 도구 더보기 > 개발자 도구를 클릭하거나,
   • F12 키를 눌러 개발자 도구를 엽니다.
     
     

2. Network 탭 선택

   개발자 도구에서 Network 탭을 클릭합니다.
   • 녹화 버튼이 빨간색으로 표시되어있는지 확인합니다.
   • Preserve log 체크박스에 체크가 되어있는지 확인합니다.
     
     

3. 네트워크 항목 지우기 및 새로고침
   

   깨끗한 네트워크 로그 캡처를 위해 기록된 로그 항목들을 지운 후 페이지를 새로고침 합니다.
   
   • ⊘ 버튼을 클릭하거나, Ctrl + L (Windows) 또는 Cmd + K (Mac)를 클릭합니다.
   • Ctrl + R (Windows) 또는 Cmd + R (Mac)을 눌러 페이지를 새로 고침합니다.
     
     

4. HAR 파일 저장
   
   오류가 발생하는 부분을 재현한 뒤 네트워크 요청이 기록되면, Network 탭 안에서 우측 상단의 📥 아이콘을 클릭하여 HAR 파일을 저장합니다.