39장 DevTools의 Application과 저장소

Application 패널은 쿠키, 로컬 저장소, IndexedDB, 캐시 저장소, 서비스 워커처럼 사이트가 브라우저에 남긴 상태를 살펴보는 곳이다. 일반 사용자는 설정의 사이트 데이터 화면이 더 안전하고 간단하다. 개발자 도구에서는 값을 직접 지우거나 바꿀 수 있으므로 자신이 관리하는 사이트나 시험 환경에서 사용한다.

로그인이 반복해서 풀리거나 오프라인 웹 앱이 오래된 화면을 보일 때 저장소별 상태가 단서가 된다. 그러나 쿠키 하나만 복사해 다른 사람에게 보내면 세션 탈취로 이어질 수 있다. 스크린샷에도 쿠키 값, 사용자 ID, 내부 URL이 찍힐 수 있으므로 이름과 값 열을 가린다.

서비스 워커는 페이지가 닫힌 뒤에도 캐시와 알림 같은 기능을 돕는다. 업데이트가 꼬인 것 같다면 먼저 일반 새로고침과 사이트 데이터 삭제를 시도하고, 개발 환경에서는 서비스 워커 업데이트와 등록 해제를 비교한다. 운영 중인 사용자의 브라우저에서 무작정 등록을 해제하도록 안내하기 전에 영향 범위를 시험한다.

Clear site data는 해당 출처의 여러 저장소를 한 번에 지울 수 있다. 장바구니, 오프라인 문서, 로그인 상태가 함께 사라질 수 있다. 작업 전 필요한 자료가 서버와 동기화됐는지 확인하고, 문제 재현 절차를 기록한다. 저장소를 비운 뒤 정상화됐다면 어느 데이터가 원인이었는지 별도 시험 환경에서 더 좁힌다.