크롬 브라우저 로그 수집 방법
고객사 대응 시 브라우저의 로그를 추출하기위한 매뉴얼입니다.
이 매뉴얼을 통해서 네트워크 이력 및 콘솔 로그를 수집할 수 있습니다.
원본) https://chequer.atlassian.net/l/cp/GVd9MFjN (쿼리파이 내부에서만 접근가능)
1. 쿼리파이를 접속한다.
2. 접속하자마자 개발자 도구를 킨다.
개발자도구는 아래 사진을 참고하여 활성화 할 수 있습니다.
크롬 주소창의 우측에 위치한 버튼을 눌러 설정메뉴를 활성화 한 뒤, ‘도구 더보기’ > ‘개발자 도구’를 클릭하여 활성화합니다.
3. 이후 이슈를 재현한다.
ex) Login → Connection 접속 > Query 작성 > 이슈 발생
4. 재현 후 다시 개발자 도구로 돌아와 콘솔 로그 및 네트워크 로그를 추출한다.
4-1. 콘솔 로그 추출
개발자 도구의 상단 탭들 중 ‘콘솔’로 이동합니다.
콘솔 로그에 남겨진 모든 로그가 필요하며, 이를 추출하기위해선 콘솔의 빈곳에 두고 우측클릭하여 컨텍스트 메뉴를 활성화합니다. 그 메뉴에서 ‘다른 이름으로 저장’을 통해 로그를 추출합니다.
4-2. 네트워크 로그 추출
개발자 도구의 상단 탭들 중 ‘네트워크’로 이동합니다.
네트워크 로그에 남겨진 모든 로그가 필요하며, 이를 추출하기위해선 먼저 사진 속 좌측의 빨간 상자의 버튼이 빨간색으로 되어있어야합니다. 빨간색으로 활성화된 것은 기록중이라는 의미로, 보통 켜져있지만 꺼져있었다면 킨 후에 이슈 재현을 다시 진행해주셔야합니다.
네트워크 로그 기록까지 활성화되었다면 사진 속 우측의 빨간 상자의 버튼을 클릭하여 모든 로그를 추출합니다.
4-3. 퍼포먼스 로그 추출
개발자 도구의 상단 탭들 중 ‘퍼포먼스’로 이동합니다.
브라우저를 사용하는 동안 브라우저에서 발생하는 다양한 동작 및 정보를 수집하기위한 도구로, 이슈가 발생했을 때 당시의 상황을 보다 자세하게 확인하기위해 사용합니다. 1번째 사진 속 좌측 상단의 빨간 상자의 버튼을 클릭하여 녹화를 시작해주셔야합니다. 누르면 녹화중인 상황이 안내되며, 이후로 이슈를 재현해주시면 됩니다. 이슈 재현을 마치셨다면, 개발자 도구로 돌아와 녹화 버튼을 다시 누르시면, 녹화가 완료되며 2번째 사진과 같은 모습이 나타납니다.
2번째 사진과 같은 모습이 나왔다면 정상적으로 녹화되었으니, 2번째 사진의 빨간 상자를 눌러 로그를 추출합니다.
4-4. 콘솔, 네트워크, 퍼포먼스 로그 파일 예시
콘솔 로그 확장자: *.log
네트워크 로그 확장자: *.har
퍼포먼스 로그 확장자: *.json
5. 추출된 로그를 모두 전송한다.
수집된 로그를 보내주시면, 관련해서 면밀히 살펴보아 조치에 힘쓰겠습니다.
혹시 페이지 전환 등으로 인해 로그 기록이 어려우시다면 아래 설정을 따라해주세요.
개발자 도구의 Console 탭으로 이동합니다.
Console 탭의 우측 상단에 있는 톱니바퀴를 클릭해주세요.
클릭 후 나타나는 옵션들 중 “Preserve Log”를 클릭하여 설정해주세요.
이제 개발자 도구의 Network 탭으로 이동해주세요
Network 탭의 상단 바에서 검색창 옆에 있는 “Preserve Log”를 클릭하여 설정해주세요.
이렇게 설정을 해주시고 이슈 상황을 재현해주시면 필요한 로그를 수집할 수 있습니다.
통신 로그를 보다 구체적으로 확인하기위해 필요한 추가 작업
이슈를 재현하기전에 개발자 도구의 Console 탭에서 아래와 같이 입력하여 설정해주시길 바랍니다.
window.debugLevel=2이렇게 입력 후 엔터를 추가 입력하시면 정상적으로 설정됩니다.