로그 뷰어

이 페이지는 버그를 받아 처리하는 개발자 관점입니다. BugShot으로 등록된 이슈에는 로그 리포트 파일(logs.html)이 첨부될 수 있습니다. 이 파일을 열면 영상과 로그를 시간으로 맞춰 한 화면에서 볼 수 있어요. 스크린샷 모드로 등록한 이슈라면 영상 대신 캡처한 화면이 왼쪽에 함께 표시됩니다 — 재생·타임라인 없이 정적으로 보여주니, 로그를 보면서 "어떤 화면이었는지" 바로 떠올릴 수 있습니다.

여는 법

로그 뷰어 화면

이슈에 첨부된 logs.html을 내려받아 브라우저로 엽니다. 단일 HTML 파일이라 별도 설치 없이 바로 열리니 어렵지 않습니다.

받는 분은 이슈에 첨부된 파일을 받지만, 버그를 올리는 분도 등록 전에 직접 받아볼 수 있습니다. 이슈 작성·미리보기 화면의 로그 첨부 섹션 오른쪽 다운로드 버튼을 누르면, 첨부되는 것과 똑같은 logs.html이 바로 내려받아집니다 — 올리기 전에 내용을 확인하거나, 이슈로 남기지 않고 파일만 공유하고 싶을 때 좋습니다.

타임라인 마커

화면에는 영상과 함께 타임라인이 있고, 그 위에 로그가 마커로 찍혀 있습니다. 마커는 세 종류입니다.

콘솔 — 콘솔 출력·에러.
네트워크 — 네트워크 요청.
액션 — 클릭·텍스트 입력·페이지 이동에 더해 단축키·특수키 입력, 체크박스·라디오 토글, 드롭다운 선택, 드래그 앤 드롭까지 사용자 동작. (페이지 이동은 액션 마커의 한 종류로 표시됩니다.)

여러 출처(페이지에 끼어 있던 iframe 포함)에서 나온 로그가 한 타임라인에 함께 모입니다. 콘솔·네트워크·액션 목록에서는 목록 위 출처 필터로 출처별로 좁혀 볼 수 있어서, 어느 출처에서 난 로그인지 헷갈리지 않습니다(각 출처 버튼에는 해당 출처의 로그 개수도 함께 표시됩니다).

영상과 로그 동기

마커 클릭으로 영상 점프

영상 플레이어로 재생하면서 그 시점의 로그를 따라갑니다.
마커를 클릭하면 영상이 그 순간으로 점프합니다 — "이 에러가 났을 때 화면이 어땠는지"를 바로 확인할 수 있어요.
로그와 영상이 같은 시간축으로 연결되어, 재현 과정을 처음부터 끝까지 따라가기 쉽습니다.

리포트 탭

로그 뷰어 리포트 탭 — 제목·재현 환경·본문 섹션이 인라인 이미지와 함께 보이고, 우측 상단에 마크다운 복사 버튼

영상·로그만이 아니라, 이슈로 등록된 본문 내용도 이 파일 안에서 바로 볼 수 있습니다. 위쪽 탭에서 리포트를 누르면, 작성자가 적은 제목·재현 환경·발생 현상·재현 과정·기대 결과가 이슈에 올라간 그대로 정리되어 보입니다. 본문에 끼워 넣은 이미지도 인라인으로 함께 표시되니, 원래 이슈 페이지를 굳이 오가지 않아도 "무슨 문제였는지"를 이 한 파일에서 파악할 수 있어요.

화면 내용을 다른 곳에 옮기고 싶다면 마크다운 복사 버튼을 누르시면 됩니다 — 본문이 마크다운으로 클립보드에 담겨, 다른 문서나 메신저에 그대로 붙여넣을 수 있습니다.
리포트가 담기지 않은 파일이라면 이 탭은 비활성으로 표시되니, 신경 쓰지 않으셔도 괜찮습니다.