HAR 파일은 일반적으로 웹 사이트에서 특정 작업을 수행할 때 잘못된 페이지 로드 시간 및 시간 초과를 포함하여 네트워킹 또는 성능 문제를 해결하는 데 사용됩니다.

모든 회사 또는 웹 사이트의 지원 팀은 이 HAR 파일을 사용하여 더 길거나 느린 로딩 시간, 페이지 렌더링 문제 및 이러한 문제로 인해 발생할 수 있는 오류 코드와 같은 성능 문제를 식별하고 해결합니다.

.HAR 파일이란?

HAR 파일이라고도 하는 HTTP 아카이브 형식은 웹 브라우저에서 기록된 가장 최근의 네트워크 활동으로 구성된 JSON 형식의 아카이브 파일입니다. 웹 브라우저와 웹 사이트 간의 웹 요청 및 응답과 같은 모든 상호 작용을 추적합니다.

HAR 파일은 브라우저에서 로드한 각 리소스와 각 리소스를 로드하는 데 걸린 시간을 기록합니다. 이러한 파일에는 HTTP 클라이언트-서버 연결의 일반 텍스트 로그가 포함되어 있습니다.

.har는 이러한 아카이브 파일의 확장자입니다.

HAR 파일을 생성하는 이유는 무엇입니까?

회사 또는 비즈니스 지원팀은 사용자가 문제 해결을 위해 티켓을 제출할 때 분석을 위해 HAR 파일을 요청할 수 있습니다.

HAR 파일은 브라우저 설정 및 쿠키, 응답 데이터를 가져오는 데 소요된 시간, 웹사이트에서 특정 사진을 로드하는 데 걸린 시간과 같이 디버깅에 도움이 되는 HTTP 클라이언트-서버 요청 및 응답에 대한 광범위한 정보를 제공합니다. , 서버 연결을 설정하는 데 걸린 시간, 요청을 보내고 응답을 받는 데 걸린 시간.

프로세스 개요

  • 먼저 문제가 있는 웹 페이지로 이동하여 모든 웹 요청 및 상호 작용을 기록하기 시작합니다.
  • 단계를 반복하여 문제를 재현합니다.
  • 캡처를 완료하고 HAR 파일을 저장합니다.
  • 성능 및 페이지 렌더링 문제를 해결하려면 HAR 파일을 직접 분석하거나 지원 팀에 파일을 보내십시오.

다른 브라우저에서 HAR 파일을 생성하는 방법은 무엇입니까?

HTTP 세션 캡처를 위한 HAR 파일 생성은 브라우저마다 다릅니다.

크롬

모든 브라우저의 개발자 도구에 있는 네트워크 탭을 사용하여 HTTP 세션을 기록할 수 있습니다.

  • Chrome에서 문제가 발생한 페이지로 이동합니다.
  • 개발자 도구는 메뉴(메뉴 > 추가 도구 > 개발자 도구)를 통해 액세스할 수 있습니다. 새로 열린 패널에서 네트워크 탭을 선택하십시오.
  • 네트워크 탭에서 왼쪽 상단 모서리에 있는 둥근 버튼이 빨간색인지 확인합니다. 회색인 경우 두 번 클릭하여 상호 작용 기록을 시작합니다.
  • 모든 웹 요청 및 응답을 기록하려면 로그 보존을 활성화하십시오.
  • HAR 파일을 내보내려면 네트워크 탭 자체에서 아래쪽 화살표 버튼을 클릭합니다.
  • HAR 파일을 컴퓨터에 저장합니다.

파이어폭스

  • 브라우저 창의 오른쪽 상단에서 Firefox 메뉴(가로 평행선 3개)를 클릭합니다.
  • 드롭다운 메뉴에서 추가 도구 > 웹 개발자 > 네트워크를 선택합니다.
  • 설정 버튼을 클릭하고 로그 지속 옵션을 켭니다.
  • 캡처가 진행되는 동안 페이지를 새로 고치고 문제를 반복하십시오.
  • 문제를 성공적으로 복제했다면 활동 패널의 아무 행이나 마우스 오른쪽 버튼으로 클릭하고 모두 HAR로 저장을 선택합니다.
  • 마지막으로, 문제 해결을 위해 콘솔 로그 파일도 필요한 경우 콘솔 탭으로 이동하고 행을 마우스 오른쪽 버튼으로 클릭하여 모두 선택하고 일부 텍스트 파일에 내용을 붙여넣고 지원 센터에 공유합니다.

마이크로소프트 엣지

  • 오른쪽 상단 모서리에 있는 …(점 3개 아이콘)을 클릭하여 추가 도구 > 개발자 도구를 선택합니다.
  • 네트워크 탭으로 이동하여 프로파일링 세션을 시작합니다.
  • 웹 페이지를 방문하여 지침에 따라 문제를 해결하십시오.
  • 마지막으로 “HAR로 내보내기”를 선택하여 HAR 파일을 저장합니다.

인터넷 익스플로러

  • Internet Explorer를 열고 문제가 있는 페이지로 이동합니다.
  • 오른쪽 상단 모서리에 있는 톱니바퀴 기호를 클릭합니다.
  • (개발자 도구 > 네트워크 탭)으로 이동합니다.
  • 캡처가 진행되는 동안 페이지를 새로 고치고 문제를 복제하십시오.
  • 문제를 성공적으로 복제한 후 “HAR로 내보내기” 아이콘(플로피 디스크 모양)을 클릭합니다.

HTTP 감시 도구

Google Chrome, Internet Explorer 및 Microsoft Edge의 경우 다음을 사용할 수도 있습니다. HTTPWatch (브라우저 내 HTTP 스니퍼) 웹 요청 및 응답을 캡처합니다.

  • 다운로드 및 설치 HTTPwatch 도구 첫 번째.
  • HTTPwatch 캡처를 시작하고 문제가 있는 페이지를 로드하고 문제를 복제하는 즉시 캡처를 중지합니다.
  • 캡처는 HAR 형식으로 저장해야 합니다.

HAR 파일을 분석하는 웹사이트

이러한 도구는 HAR 파일(HTTP 클라이언트-서버 통신 로그)을 시각화하고 분석하는 데 간단하고 효과적입니다.

  • 구글 HAR 분석기 – “파일 선택” 버튼을 클릭하여 파일을 선택하고 검사하려는 HAR 파일을 선택합니다. 파일을 선택하면 분석 화면이 자동으로 나타납니다. HTTP 상태 코드로 필터링할 수 있습니다.
  • Softwareishhard.com – 모든 요청에 ​​대한 워터폴 그래프를 표시하고 특정 요청을 자세히 살펴볼 수 있는 무료 웹 기반 응용 프로그램 도구입니다. 아래 텍스트 상자에 HAR 로그를 삽입한 후 미리보기 버튼을 누릅니다. 또는 페이지의 아무 곳이나 har 파일을 끌어다 놓아 파일 분석을 시작합니다.
  • 연중무휴 – 이것은 또한 HTTP 아카이브 파일을 시각화하는 무료 웹 사이트 도구입니다. 파일을 찾아보거나 해당 내용을 입력 상자에 붙여넣습니다.

결론

텍스트 편집기에서 HAR 파일을 열면 웹 요청과 응답이 포함된 단순히 JSON 문서임을 알 수 있습니다. 여기에는 다음과 같은 잠재적으로 민감한 정보가 포함될 수 있습니다.

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

분석을 위해 지원 팀에 제출하기 전에 HAR 파일에서 민감한 정보를 삭제했는지 확인하십시오. 주로 기술지원팀에서 제3자와의 상호작용이 포함된 HAR 파일을 요청할 경우 중요한 정보가 노출될 수 있습니다.

이 기사가 HAR 분석 도구와 다양한 브라우저에서 HAR 파일을 생성하는 방법에 대해 배우는 데 매우 도움이 되었기를 바랍니다.

Wireshark를 사용하여 네트워크 지연 문제를 해결하는 방법을 배우는 데 관심이 있을 수도 있습니다.

기사를 재미있게 읽었습니까? 세상과 함께 나누는 건 어떨까요?