Google Chrome, Firefox에서 HAR 파일을 만들고 분석하는 방법은 무엇입니까?

HAR 파일이란 무엇이며, 왜 필요할까요?

웹사이트 사용 중 발생하는 다양한 문제들, 예를 들어 페이지 로딩 시간 지연이나 시간 초과 오류 등을 해결하는 데 HAR 파일이 활용됩니다.

특히 웹사이트나 기업의 고객 지원팀은 HAR 파일을 통해 페이지 로딩 속도 저하나 페이지 렌더링 문제를 파악하고, 그로 인해 발생할 수 있는 오류 코드를 찾아 해결하는 데 도움을 받습니다.

HAR 파일 상세 분석

HTTP Archive 형식, 즉 HAR 파일은 웹 브라우저가 기록한 최근의 네트워크 활동을 JSON 형식으로 담은 아카이브 파일입니다. 이는 웹 브라우저와 웹 사이트 간의 모든 상호작용, 즉 웹 요청 및 응답 과정을 추적합니다.

HAR 파일은 브라우저가 로드하는 각 리소스와 해당 리소스를 로드하는 데 걸린 시간을 기록하며, HTTP 클라이언트-서버 연결에 대한 일반 텍스트 로그를 포함합니다. .har는 이러한 아카이브 파일의 확장자입니다.

HAR 파일이 필요한 이유

사용자가 웹사이트 문제 해결을 위해 지원팀에 문의할 때, 지원팀은 종종 HAR 파일을 요청하여 문제 분석에 활용합니다.

HAR 파일은 디버깅에 유용한 광범위한 정보를 제공합니다. 예를 들어, 브라우저 설정, 쿠키, 응답 데이터 수신 시간, 특정 이미지 로딩 시간, 서버 연결 설정 시간, 요청 전송 및 응답 수신 시간 등 HTTP 클라이언트-서버 요청 및 응답에 대한 세부 정보를 포함합니다.

HAR 파일 생성 절차

먼저 문제가 발생하는 웹 페이지로 이동하여 웹 요청 및 상호작용 기록을 시작합니다.
문제가 재현될 때까지 필요한 단계를 반복합니다.
캡처가 완료되면 HAR 파일을 저장합니다.
HAR 파일을 직접 분석하거나 지원팀에 전달하여 성능 및 페이지 렌더링 문제를 해결합니다.

주요 브라우저에서 HAR 파일 생성 방법

HAR 파일 생성 방법은 브라우저마다 다소 차이가 있습니다.

크롬 (Chrome)

크롬에서는 개발자 도구의 '네트워크' 탭을 이용해 HTTP 세션을 기록할 수 있습니다.

문제가 발생하는 페이지로 이동합니다.
메뉴 > 추가 도구 > 개발자 도구에서 개발자 도구를 실행하고, '네트워크' 탭을 선택합니다.
'네트워크' 탭 왼쪽 상단에 있는 원형 버튼이 빨간색인지 확인합니다. 회색이면 클릭하여 기록을 시작합니다.
웹 요청 및 응답을 모두 기록하기 위해 '로그 보존' 옵션을 활성화합니다.
'네트워크' 탭에서 아래쪽 화살표 버튼을 클릭하여 HAR 파일을 내보냅니다.
저장할 위치를 선택하여 HAR 파일을 저장합니다.

파이어폭스 (Firefox)

파이어폭스 메뉴 (가로 세 줄)를 클릭합니다.
추가 도구 > 웹 개발자 > 네트워크를 선택합니다.
설정 버튼을 누르고 '로그 지속' 옵션을 켭니다.
페이지를 새로 고치고 문제를 재현합니다.
활동 패널의 아무 행이나 마우스 오른쪽 버튼으로 클릭 후 '모두 HAR로 저장'을 선택합니다.
필요하다면 콘솔 탭으로 이동하여 모든 행을 선택, 복사 후 텍스트 파일에 붙여 넣어 지원팀에 공유합니다.

마이크로소프트 엣지 (Microsoft Edge)

오른쪽 상단 '…' (점 3개 아이콘)을 클릭하고 추가 도구 > 개발자 도구를 선택합니다.
'네트워크' 탭으로 이동하여 프로파일링 세션을 시작합니다.
웹페이지를 방문하여 문제 재현 단계를 따릅니다.
'HAR로 내보내기'를 선택하여 파일을 저장합니다.

인터넷 익스플로러 (Internet Explorer)

인터넷 익스플로러를 실행하고 문제 페이지로 이동합니다.
오른쪽 상단 톱니바퀴 기호를 클릭합니다.
개발자 도구 > 네트워크 탭으로 이동합니다.
페이지를 새로 고치고 문제를 재현합니다.
'HAR로 내보내기' 아이콘 (플로피 디스크 모양)을 클릭하여 저장합니다.

HTTP 감시 도구

크롬, 인터넷 익스플로러, 엣지에서는 HTTPWatch 같은 HTTP 스니퍼를 사용하여 웹 요청과 응답을 캡처할 수도 있습니다.

HTTPWatch를 다운로드하여 설치합니다.
HTTPWatch 캡처를 시작하고 문제 페이지를 로드한 후 문제를 재현하고 캡처를 중지합니다.
캡처된 내용을 HAR 형식으로 저장합니다.

HAR 파일 분석 웹사이트

다음 도구들은 HAR 파일을 시각화하고 분석하는 데 효과적입니다.

구글 HAR 분석기 - '파일 선택' 버튼으로 HAR 파일을 선택하면 자동으로 분석 화면이 나타납니다. HTTP 상태 코드로 필터링할 수 있습니다.
Softwareishhard.com - 모든 요청에 대한 워터폴 그래프를 보여주고 특정 요청을 자세히 살펴볼 수 있는 무료 웹 기반 도구입니다. 텍스트 상자에 HAR 로그를 삽입하거나 파일을 드래그 앤 드롭하여 분석을 시작합니다.
Site24x7 - HTTP 아카이브 파일을 시각화하는 무료 웹사이트 도구입니다. 파일을 찾아 선택하거나 내용을 입력 상자에 붙여넣어 사용합니다.

결론

HAR 파일은 텍스트 편집기로 열어보면 웹 요청과 응답이 담긴 JSON 문서임을 알 수 있습니다. 민감한 정보가 포함될 수 있으므로 주의해야 합니다.

요청 및 응답 헤더
요청 및 응답 내용
인증 토큰, 쿠키, 세션 토큰, 비밀번호, API 자격 증명

분석을 위해 지원팀에 제출하기 전, HAR 파일에서 민감한 정보는 삭제해야 합니다. 특히 기술 지원팀에서 제3자와의 상호작용이 포함된 HAR 파일을 요청할 경우 중요 정보가 노출될 위험이 있습니다.

이 글이 HAR 분석 도구와 다양한 브라우저에서의 HAR 파일 생성법을 배우는 데 도움이 되었기를 바랍니다.

네트워크 지연 문제 해결에 도움이 되는 Wireshark 사용법에도 관심을 가져보세요.

이 글이 유익했기를 바라며, 다른 사람들과도 공유해보세요!