[프로그램] HAR 로그 수집 방법

안녕하세요 레고팬더 입니다.

오늘은 HAR 로그 수집과 관련한 포스팅입니다.

 

365와 관련됬다고 해야할지? 좀 애매하긴 하지만 방법을 알면 문제 해결에 도움이 됩니다.

 

HAR 로그는 웹 브라우저와 웹 서버 간의 모든 상호작용을 기록한 파일로 아래 같은 이유로 수집이 필요합니다.

웹사이트 성능 분석: 페이지 로딩 시간, 리소스 로딩 시간 등을 분석하여 성능 문제를 파악
디버깅: 웹 요청 및 응답의 세부 정보를 확인하여 오류를 찾아내는 역할
네트워크 문제 해결: 네트워크 지연이나 시간 초과 오류 등을 분석하여 문제의 원인 식별.
보안 분석: 요청 및 응답 헤더를 통해 보안 관련 문제를 식별

 

[HAR 로그 수집 방법]

아주 간단합니다.

Devloper Tools (개발자 도구)를 열고 녹화 버튼을 누르면 됩니다.

크롬/엣지 브라우저에서 키보드 F12 키를 누르고 네트워크 탭을 누르면 됩니다.

 

순서는

1) F12 눌러서 DevTools 열고

 

2) 네트워크 탭 선택 

 

3) 녹화버튼(아래 이미지의 2번) 누르고

(필요 없는 웹서핑을 하셨다면 녹화 버튼 누르기 전에 금지표시🚫 버튼 눌러서 기존 로그를 모두 제거 합니다.)

 

4) 증상재현 (분석해야 하는 동작을 하는 것) 

*이게 제일 중요합니다.

분석을 요청할 때 어떤 동작을 했을때 오류가 나오는지 녹화하는건데 이걸 안하고 다운로드 하시면 ㅎㅎㅎ

 

5) 다운로드 하시면 됩니다.

 

 

[HAR 로그 수집 전 설정]
증상 재현하여 로그 수집할 브라우저 실행 > 우측 상단 ''' 버튼 > 기타 도구 - 개발자 도구에 접속합니다.
점 3개 > 설정 > 기본 설정 > '팝업용 DevTools 자동 열기'를 활성화 진행합니다.

 

*중요

이 설정이 안되어 있으면 새 창이 열릴 때 DevTools가 열리지 않은 상태가 되어 수집이 번거로워 집니다.

간단하게 확인만 할 목적이라면 이 옵션이 필요하지 않을 수 있습니다.

새 팝업에 띄워지는 걸 수집해야 하는 경우 등에서 필요한 옵션입니다.

 

'네트워크'툴과 '콘솔'툴에서 각각 로그 보존을 체크한 상태에서 증상을 재현합니다.

 

증상 재현 후, 네트워크의 경우 화살표 모양의 내보내기 버튼을 통해 HAR로그를 저장합니다.

 

증상 재현 후, 콘솔의 경우 하단 수집된 영역에서 마우스 우클릭하여 다른 이름으로 저장합니다.

 

로그 수집 참 쉽죠?

 

이제 분석 능력이 있는 사람에게 취합된 로그를 보내주시면 됩니다.