Local Storage Editor는 현재 사이트의 localStorage와 sessionStorage 항목을 깔끔한 테이블 인터페이스로 관리할 수 있게 해줍니다. 모든 키-값 쌍을 둘러보고, 값을 인라인으로 편집하며, 새 항목을 추가하고, 불필요한 항목을 삭제할 수 있습니다. JSON 값은 자동으로 감지되어 읽기 쉽게 포맷팅됩니다. localStorage와 sessionStorage 탭을 전환하여 두 저장소 유형을 모두 관리할 수 있습니다.
웹 애플리케이션은 사용자 환경 설정, 인증 토큰, 기능 플래그, A/B 테스트 할당, 장바구니 내용, 폼 초안, 캐시된 API 응답, UI 상태 등 엄청난 양의 상태를 localStorage와 sessionStorage에 저장합니다. Chrome DevTools에서 이 값을 디버깅하려면 Application 탭으로 이동해 Storage 섹션을 찾아 기본적인 키-값 뷰어를 사용해야 하며 편집 기능이 제한적입니다. Local Storage Editor는 탭 전환, 인라인 편집, JSON 자동 포맷팅, 벌크 작업이 가능한 전용 패널로 이를 제공합니다. 테이블에는 키 이름과 값이 표시됩니다. JSON 값(객체를 JSON.stringify로 직렬화한 경우가 매우 흔함)은 자동으로 감지되어 제대로 포맷팅되고 구문 강조되어 표시됩니다. 값을 클릭하면 인라인으로 편집할 수 있으며, 변경 사항이 저장소 API에 즉시 기록됩니다. 깔끔한 양식으로 새 항목을 추가하거나, 개별/벌크로 삭제할 수 있습니다.
패널 상단의 탭 버튼으로 localStorage와 sessionStorage를 전환할 수 있습니다. 각 탭에 항목 개수가 표시됩니다(예: "localStorage (12)" / "sessionStorage (3)"). 하나의 인터페이스에서 두 저장소 유형을 모두 관리할 수 있습니다.
값 셀을 클릭하면 인라인으로 편집할 수 있습니다. 단순 값은 새 문자열을 입력하고, JSON 값은 구문 강조가 적용된 포맷팅된 textarea로 확장됩니다. 변경 사항은 저장소 API에 즉시 저장됩니다.
JSON 값(객체와 배열을 JSON.stringify로 직렬화한 경우)이 자동으로 감지되어 적절한 들여쓰기와 구문 강조로 표시됩니다. 포맷팅된 JSON을 직접 편집할 수 있으며 저장 시 다시 직렬화됩니다.
"Add Entry"를 클릭하여 새 키-값 쌍을 생성할 수 있습니다. 키 이름과 값(문자열 또는 JSON)을 입력하세요. 항목이 현재 도메인의 localStorage 또는 sessionStorage에 즉시 기록됩니다.
행의 삭제 버튼으로 개별 항목을 삭제하거나 "Clear All"로 현재 저장소 유형의 모든 항목을 제거할 수 있습니다. 애플리케이션 상태를 초기화하는 테스트에 유용합니다.
에디터에서 변경한 내용은 애플리케이션에 즉시 반영됩니다. 앱이 사용자 상호작용 시 localStorage에서 값을 읽는다면, 패널에서 해당 값을 편집하면 다음에 앱이 읽을 값이 변경됩니다. 대부분의 경우 페이지 새로고침이 필요 없습니다.
애플리케이션이 localStorage에 어떤 값을 저장했는지 검사하세요. 인증 토큰이 있는가? 사용자 환경 설정 객체가 올바르게 구성되었는가? 오래된 캐시 값이 예상치 못한 동작을 일으키고 있는가?
모든 localStorage를 지워 애플리케이션을 초기 상태로 되돌리세요. 다른 사이트의 브라우징 데이터를 지우지 않고 첫 실행 경험, 온보딩 흐름, 기본 설정을 테스트할 때 유용합니다.
많은 애플리케이션이 기능 플래그 값을 localStorage에 저장합니다. 이를 직접 편집하여 기능을 활성화하거나 비활성화할 수 있으며, 플래그 관리 UI를 거치거나 재배포할 필요가 없습니다.
저장된 사용자 환경 설정, 테마 설정, 언어 선택, 온보딩 완료 플래그 등을 편집하여 다양한 사용자 상태를 시뮬레이션하고 애플리케이션이 각 상태를 어떻게 처리하는지 테스트할 수 있습니다.
분석, 채팅, 광고 같은 서드파티 스크립트가 도메인의 localStorage에 어떤 데이터를 저장하는지 확인하세요. 프라이버시 준수와 예상치 못한 저장소 사용을 감사할 수 있습니다.
DevSuite Pro 플로팅 독을 열고 Local Storage Editor 아이콘을 클릭하세요. 현재 도메인의 모든 localStorage 항목이 표시된 패널이 열립니다.
키-값 테이블을 스크롤하세요. JSON 값은 자동으로 포맷팅됩니다. 탭을 전환하면 sessionStorage를 볼 수 있습니다.
값을 클릭하여 인라인으로 편집하세요. JSON 값의 경우 포맷팅된 에디터가 나타납니다. 변경 사항은 저장소 API에 즉시 저장됩니다.
"Add Entry"를 클릭하여 새 키-값 쌍을 만드세요. 행의 삭제 아이콘을 클릭하여 제거하세요. "Clear All"로 전체를 지울 수 있습니다.
저장소 값을 편집한 후 페이지와 상호작용하여 애플리케이션이 변경된 데이터에 어떻게 반응하는지 확인하세요.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
