소개
이 문서에서는 클라이언트 측에서 GUI 관련 문제를 해결하고 범위를 좁히기 위해 HTTP ARchive 형식(HAR) 로그를 수집하기 위한 프로세스에 대해 설명합니다.또한 유용한 이유와 다른 브라우저에서 파일을 수집하는 방법에 대해서도 설명합니다.
HTTP ARchive 형식
왜 HAR인가?
인터넷을 통해 SaaS(Software as Service)에 연결하거나 사용할 경우 서비스에 액세스할 때 다양한 문제가 발생할 수 있습니다.문제를 좁히고 격리하려면 클라이언트측 및 서버/서비스 측 상호 작용을 이해해야 합니다.HAR 로그는 클라이언트 측에서 상호 작용을 제공합니다.HAR 로그는 로그와 사이트와의 브라우저 상호 작용을 추적하는 고유한 캡처 집합입니다.이 로그 세트는 클라이언트측에서 어떤 일이 일어나고 있는지 잘 파악하고 이를 통해 문제 해결 프로세스를 가속화합니다.
몇 가지 일반적인 시나리오에서 HAR 로그를 살펴보겠습니다.
- 웹 페이지 렌더링 문제 해결(예: 웹 페이지의 일부가 로드되지 않거나 페이지 서식이 잘못되었거나 웹 페이지의 일부가 누락됨)
- 성능 문제 해결(예: 이벤트가 트리거될 때 로드 또는 시간 초과에 오랜 시간이 걸리는 페이지)
HAR에는 무엇이 있으며, 이 기능은 어떻게 유용합니까?
HAR 파일은 JSON 형식으로 정보를 저장합니다.따라서 시각 보조 도구를 사용하여 데이터를 보다 쉽게 볼 수 있습니다.HAR 파일에는 여러 구성 요소의 타이밍 정보가 들어 있습니다.Google의 Understanding Resource Timing(리소스 타이밍 이해)에 따르면 로그에 몇 개의 타이머가 있습니다.
중단/차단:요청이 전송되기 전에 대기하는 데 걸린 시간입니다.큐잉에 대해 설명하는 모든 이유를 기다리는 것일 수 있습니다.또한 이 시간은 프록시 협상에 소요된 모든 시간을 포함합니다.
프록시 협상:프록시 서버 연결과 협상하는 데 걸린 시간입니다.
DNS 조회:DNS 조회를 수행하는 데 걸린 시간입니다.페이지의 모든 새 도메인에는 DNS 조회를 수행하려면 전체 라운드트립이 필요합니다.
초기 연결/연결:TCP 핸드셰이크/재시도, SSL 협상 등 연결을 설정하는 데 걸린 시간입니다.
SSL:SSL 핸드셰이크를 완료하는 데 걸린 시간입니다.
요청 전송/전송:네트워크 요청을 실행하는 데 걸린 시간입니다.일반적으로 밀리초 미만의 수준입니다.
대기 중(TTFB):첫 번째 바이트까지의 시간이라고도 하는 초기 응답을 기다리는 데 소요된 시간입니다.이 시간은 서버가 응답을 전달하기를 기다리는 데 소요된 시간 외에 서버로의 왕복 지연 시간을 캡처합니다.
콘텐츠 다운로드/다운로드:응답 데이터를 받는 데 걸린 시간입니다.
추론
HAR 로그의 이 타이밍 정보를 사용하면 네트워크의 어느 부분을 먼저 살펴보아야 할지 좁힐 수 있습니다.
- 네트워크에서 지연이 발생하면 트러블슈팅을 위해 어떤 네트워크 측면을 대상으로 해야 하는지 알 수 있습니다.
- 웹 페이지 렌더링 문제인 경우, 각 콘텐츠에 대한 요청 및 응답을 확인하고 오류나 문제가 있는지 확인하기 위해 콘텐츠 다운로드/다운로드 섹션을 볼 수 있습니다.
메모장에서 HAR 로그 파일이 활성화됩니다.다음은 이 기능의 모양에 대한 작은 조각입니다.
다음은 온라인 툴 소프트웨어에 로드된 파일의 미리 보기입니다.
이 이미지에서, 많은 시간을 어디에 보내고 어떤 구성 요소가 가장 오랜 시간을 소요하는지에 대한 올바른 아이디어를 얻을 수 있습니다.
다음은 온라인 툴 G-Suite에 로드된 파일의 미리 보기입니다.
각 요청에 대한 타이머 정보를 확인할 수 있습니다.
HAR 로그 수집
비교를 위해 작동 중인 HAR 로그와 비작동 HAR 로그를 수집할 수 있는 경우 문제를 해결하는 데 큰 도움이 됩니다.작동하지 않는 페이지의 경우 모든 구성 요소에 대해 평균 시간을 얻고 유사한 구성 요소에 문제가 지속적으로 있는지 확인할 수 있도록 여러 HAR 파일을 수집할 수 있는 것이 좋습니다.
HAR을 수집하기 전에 브라우저에서 모든 정보를 다운로드하도록 하고 이미 있는 캐시된 데이터를 사용하지 않도록 하려면 단일 개인 브라우징 세션을 사용하는 것이 좋습니다.
모든 브라우저에 대한 프로세스는 다음과 같습니다.
- 개발자 옵션을 엽니다.
- 온네트워크 옵션을 갖추고 상호 작용을 캡처할 준비가 되었는지 확인합니다.
- 웹 페이지에서 문제를 다시 만듭니다.
- 캡처를 저장합니다.
- 추가 분석을 위해 저장된 파일을 전송합니다.
다음 브라우저에서 HRA 로그를 수집하는 프로세스는 다음과 같습니다.
구글 크롬
1. F12를 누르면 이미지에 표시된 대로 개발자 탭이 열립니다.
2. 이미지에 표시된 대로 네트워크 탭을 클릭합니다.
3. 이미지에 표시된 대로 보존 로그를 선택합니다.
4. Network(네트워크) 탭의 왼쪽 상단에 있는 기록 버튼을 확인합니다.색상이 빨간색이면 캡처가 시작되었음을 의미합니다.단추가 검은색인 경우 검은색 원을 클릭하여 색상을 빨간색으로 변경하고 브라우저에서 활동 기록을 시작합니다.
5. 이미지에 표시된 대로 캡처가 실행되는 동안 문제를 다시 생성합니다.
6. 문제가 다시 생성되면 활동 창의 행을 마우스 오른쪽 버튼으로 클릭하고 이미지에 표시된 내용과 함께 모두 HAR로 저장을 선택합니다.
7. 파일을 저장하고 분석을 위해 파일을 전송합니다.
Firefox
1. F12를 누르고 개발자 탭을 엽니다.Developer Tools 창이 Firefox의 옆이나 아래쪽에 도킹된 패널로 열립니다.
2. 이미지에 표시된 대로 네트워크 탭을 클릭합니다.
3. 영구 로그가 선택되어 있는지 확인합니다.
4. 문제를 다시 생성합니다.
5. 문제가 다시 생성되면 활동 패널을 마우스 오른쪽 버튼으로 클릭하고 이미지에 표시된 대로 모두 HAR로 저장을 선택합니다.
6. 파일을 저장하고 분석을 위해 전송합니다.
Internet Explorer
1. F12를 누릅니다.
2. 네트워크 탭에 있는지 확인합니다.
3. "프로파일 세션 시작"이 회색으로 표시됩니다(기본 상태이면 캡처가 실행 중임을 의미함).
4. 문제를 다시 생성합니다.
5. 문제가 다시 생성되면 저장 아이콘을 클릭하여 로그를 저장합니다.
6. 파일을 저장하고 분석을 위해 전송합니다.