31장 Console과 Sources로 오류 읽기

Console은 페이지의 JavaScript 오류, 경고, 로그를 시간 순서로 보여 준다. 빨간 줄이 있다고 모두 사용자가 고쳐야 할 치명적 오류는 아니다. 먼저 문제 행동을 한 직후 새로 나타난 메시지, 파일 이름, 줄 번호, 반복 여부를 본다. 필터로 오류 수준이나 낱말을 좁히고, 페이지를 새로고침해 재현한다.

인터넷에서 ‘이 코드를 Console에 붙이면 기능이 열린다’는 말을 보면 멈춘다. 붙여 넣는 순간 현재 로그인 권한으로 계정 정보나 페이지 데이터를 전송할 수 있다. Chrome이 붙여 넣기를 경고하는 이유다. 내용을 한 줄씩 설명할 수 없고 출처를 검증하지 못했다면 실행하지 않는다.

Sources 패널에서는 내려받은 HTML, CSS, JavaScript 파일과 소스맵을 보고, 중단점을 걸어 코드가 멈춘 순간의 값을 살필 수 있다. `{}` 버튼으로 압축된 코드를 보기 좋게 펼칠 수 있지만 원본 이름과 구조가 돌아오는 것은 아니다. Workspace나 Overrides 같은 기능은 로컬 변경을 오래 유지할 수 있으므로 사용 여부를 기억한다.

지원 담당자에게 Console 내용을 보낼 때는 전체를 무작정 복사하지 않는다. 오류가 난 시각과 동작, 관련 메시지 몇 줄, Chrome 버전, 재현 조건을 적는다. URL 매개변수, 요청 헤더, 이메일, 내부 파일 경로가 섞일 수 있으므로 가린다. 오류 메시지는 단서이지 판결문이 아니다.