로그 뷰어

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

여는 법

로그 뷰어 화면

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

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

타임라인 마커

화면에는 영상과 함께 타임라인이 있고, 그 위에 로그가 마커로 찍혀 있습니다. 어느 로그 탭을 보고 있든 아래 세 종류가 한 타임라인에 함께 표시되어, 그 시점에 무슨 일이 있었는지 한눈에 들어옵니다.

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

뒤로가기·새로고침도 구분되나요

네. 페이지 이동은 어떻게 이동했는지까지 기록됩니다 — 브라우저 뒤로가기·앞으로가기, 새로고침, 그리고 방향을 알 수 없는 히스토리 이동이 일반 이동과 다른 문구·다른 아이콘으로 뜹니다.

브라우저 뒤로가기 버튼은 크롬 UI라 페이지에 클릭이 남지 않습니다. 그래서 이 구분이 없으면 리포트를 읽는 사람에게는 주소가 갑자기 이전 페이지로 되돌아간 것으로만 보여요. "뒤로가기를 눌렀더니 폼 값이 날아간다", "새로고침하면 재현된다" 같은 버그는 이동 방식 자체가 재현 단계라, 그게 빠지면 받는 쪽이 재현하지 못합니다.

새로고침은 특히 유용합니다. 캡처 전 상태에서 새로고침하면 그때까지의 로그가 초기화되는데, 새 로그의 첫 줄에 새로고침이 남아서 왜 비었는지가 로그 자신으로 설명됩니다.

같은 문서 안에서 오가는 이동(SPA 라우팅)은 뒤로/앞으로 방향까지 나오지만, 페이지가 통째로 다시 열리는 이동은 브라우저가 방향을 알려주지 않아 "히스토리 이동"으로만 남습니다. 링크 클릭과 주소창 입력은 서로 구분되지 않고 둘 다 일반 이동입니다.

입력값은 어디까지 담기나요

액션 로그는 어떤 값을 입력했는지까지 담습니다. "수량에 -1을 넣었더니 깨졌다" 같은 건 값이 있어야 재현되니까요. 그래서 입력 필드에 넣은 값과 드롭다운에서 고른 값은, 아래 기준에 걸리지 않는 한 원문 그대로(최대 500자) 기록되어 이슈에 함께 첨부됩니다.

민감한 값은 두 가지 방식으로 자동으로 가려집니다(***).

필드를 보고 판단 — 비밀번호 입력란, 자동완성 힌트, 그리고 필드 이름·라벨·placeholder에 담긴 민감 키워드(비밀번호·주민·카드·계좌·전화·주소 등).
값의 모양을 보고 판단 — 라벨에 아무 단서가 없어도, 값이 이메일 형태이거나 9자리 이상의 숫자(전화번호·카드번호·주민등록번호·계좌번호 등)면 가립니다.

메일 본문·문서·메시지 입력창처럼 글을 길게 쓰는 편집기에 입력한 내용은 값을 아예 담지 않고, 입력했다는 사실만 남깁니다.

다만 라벨에도 값의 모양에도 단서가 없는 값(검색어, 일반 텍스트 등)은 원문이 그대로 남습니다. 민감한 내용을 입력하는 화면이라면, 이슈를 등록하기 전에 로그 첨부 토글을 꺼 주세요. 어떤 값이 담겼는지는 등록 전에 로그 카드를 열어 직접 확인하실 수 있습니다.

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

영상과 로그 동기

마커 클릭으로 영상 점프

영상 플레이어로 재생하면서 그 시점의 로그를 따라갑니다.
마커를 클릭하면 영상이 그 순간으로 점프하고, 그 마커에 해당하는 로그 탭(콘솔·네트워크·액션)으로 전환됩니다 — "이 에러가 났을 때 화면이 어땠는지"를 바로 확인할 수 있어요.
로그 목록에서 항목을 클릭해도 영상이 그 로그 시각으로 이동합니다 — 로그를 훑다가 궁금한 지점을 바로 영상으로 확인할 수 있어요. (항목 왼쪽의 시간 표시만 눌러도 같은 지점으로 이동합니다.)
로그와 영상이 같은 시간축으로 연결되어, 재현 과정을 처음부터 끝까지 따라가기 쉽습니다.

통합 타임라인

통합 타임라인 패널 — 영상 아래에 콘솔·네트워크·액션 로그가 시간순으로 한 줄씩 쌓인 목록, 위에 전체·콘솔·네트워크·액션 필터 탭과 검색창

영상 바로 아래에는 콘솔·네트워크·액션 로그를 시간순으로 한 줄씩 합쳐 놓은 타임라인이 있습니다. 오른쪽 로그 탭을 하나씩 오가지 않아도, 그 순간 무슨 일이 있었는지를 위에서 아래로 쭉 따라 읽을 수 있어요.

한 줄에 한 이벤트 — 왼쪽 시간 표시, 종류 아이콘, 내용이 나란히 놓입니다. 네트워크 요청은 "/api/order 전송"처럼 어떤 요청이었는지 문장으로 풀어서 보여줍니다.
종류로 걸러 보기 — 목록 위 전체 · 콘솔 · 네트워크 · 액션 탭으로 한 종류만 추립니다(각 탭에 개수도 함께 표시됩니다).
검색 — 검색창(타임라인 검색…)에 단어를 넣으면 그 단어가 담긴 줄만 남습니다. 콘솔 메시지뿐 아니라 네트워크 요청 주소·응답 본문까지 훑어 찾습니다.
눌러서 영상으로 — 아무 줄이나 누르면 영상이 그 로그 시각으로 이동하고, 오른쪽이 그 종류의 로그 탭으로 함께 전환되어 상세까지 바로 이어집니다. (줄 왼쪽의 시간 표시만 눌러도 같은 지점으로 이동합니다.)
재생을 따라 현재 줄 강조 — 영상을 재생하면 지금 재생 위치에 해당하는 줄이 자동으로 강조되어, "이 화면일 때 어떤 로그가 찍혔는지"가 한눈에 들어옵니다.

영상이 없는 스크린샷 모드 리포트에는 이 타임라인이 표시되지 않습니다 — 대신 왼쪽에 캡처한 화면이, 오른쪽에 로그 탭이 놓입니다.

리포트 탭

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

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

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