ローカルストレージエディターは、現在のサイトの localStorage と sessionStorage のエントリを管理するためのクリーンなテーブルインターフェースを提供します。すべてのキーと値のペアを閲覧し、値をインラインで編集し、新しいエントリを追加し、不要なものを削除できます。JSON 値は自動的に検出されてフォーマットされ、読みやすく表示されます。localStorage と sessionStorage のタブを切り替えて、両方のストレージタイプを管理できます。
ウェブアプリケーションは localStorage と sessionStorage に大量の状態を保存しています。ユーザー設定、認証トークン、機能フラグ、A/B テストの割り当て、ショッピングカートの中身、フォームの下書き、キャッシュされた API レスポンス、UI の状態などが含まれます。Chrome DevTools でこれらの値をデバッグするには、Application タブに移動し、Storage セクションを見つけ、編集機能が限られた基本的なキーと値のビューアーを使用する必要があります。ローカルストレージエディターは、ストレージのタブ切り替え、インライン編集、JSON の自動フォーマット、一括操作を備えた専用パネルでこれを実現します。テーブルにはすべてのキーと値のペアが表示されます。JSON 値（JSON.stringify でシリアライズされたオブジェクトは非常に一般的です）は自動的に検出され、適切なフォーマットとシンタックスハイライトで表示されます。任意の値をクリックするとインラインで編集でき、変更は即座にストレージ API に書き込まれます。クリーンなフォームで新しいエントリを追加したり、個別または一括でエントリを削除したりできます。
パネル上部のタブボタンで localStorage と sessionStorage を切り替えます。各タブにはエントリ数が表示されます（例:「localStorage (12)」/「sessionStorage (3)」）。両方のストレージタイプを1つのインターフェースから管理できます。
任意の値セルをクリックするとインプレース編集ができます。シンプルな値の場合は新しい文字列を入力します。JSON 値の場合は、シンタックスハイライト付きのフォーマットされたテキストエリアに展開されます。変更は即座にストレージ API に保存されます。
JSON 値（JSON.stringify でシリアライズされたオブジェクトと配列）は自動的に検出され、適切なインデントとシンタックスハイライトで表示されます。フォーマットされた JSON を直接編集でき、保存時に再シリアライズされます。
「エントリを追加」をクリックして新しいキーと値のペアを作成します。キー名と値（文字列または JSON）を入力すると、現在のドメインの localStorage または sessionStorage に即座に書き込まれます。
行の削除ボタンで個別エントリを削除するか、「すべてクリア」で現在のストレージタイプのすべてのエントリを削除します。テスト中にアプリケーションの状態をリセットするのに便利です。
エディターで行った変更はアプリケーションに即座に反映されます。アプリがユーザー操作時に localStorage から値を読み取る場合、パネルでその値を編集するとアプリが次回読み取る値が変わります。ほとんどのケースでページのリロードは不要です。
アプリケーションが localStorage に保存している値を検査します。認証トークンは存在しますか？ユーザー設定オブジェクトは正しく構成されていますか？古いキャッシュ値が予期しない動作を引き起こしていませんか？
すべての localStorage をクリアしてアプリケーションを初期状態にリセットします。他のサイトのブラウザデータを消去せずに、初回起動時の体験、オンボーディングフロー、デフォルト設定をテストするのに便利です。
多くのアプリケーションは機能フラグの値を localStorage に保存しています。フラグ管理 UI を使わず、再デプロイもせずに、これらを直接編集して機能の有効/無効を切り替えられます。
保存されているユーザー設定、テーマ設定、言語選択、オンボーディング完了フラグを編集して、さまざまなユーザー状態をシミュレートし、アプリケーションがそれぞれをどう処理するかテストできます。
アナリティクス、チャット、広告などのサードパーティスクリプトがドメインの localStorage に何を保存しているかを確認します。プライバシーコンプライアンスと予期しないストレージ使用状況のデータを監査できます。
DevSuite Pro のフローティングドックを開き、ローカルストレージエディターのアイコンをクリックします。パネルが開き、現在のドメインのすべての localStorage エントリが表示されます。
キーと値のテーブルをスクロールします。JSON 値は自動的にフォーマットされます。タブを切り替えると sessionStorage を表示できます。
任意の値をクリックするとインラインで編集できます。JSON 値の場合はフォーマットされたエディターが表示されます。変更は即座にストレージ API に保存されます。
「エントリを追加」をクリックして新しいキーと値のペアを作成します。任意の行の削除アイコンをクリックして削除します。「すべてクリア」ですべてを削除できます。
ストレージの値を編集した後、ページを操作してアプリケーションが変更されたデータにどう応答するかを確認します。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
