ストレージインスペクタはデフォルトで無効です。開発ツールのオプションで有効化できます。
ストレージインスペクタで、Web ページが使用できるさまざまな種類のストレージを調査できます。現在は、以下の種類のストレージの調査に使用できます:
- キャッシュストレージ (Firefox 47 の新機能) - Cache API を使用して作成した DOM キャッシュ
- Cookie - ページ自身およびページ内の iframe が作成したすべての Cookie を確認できます。ネットワーク呼び出しの応答の一部として作成された Cookie も表示しますが、ツールを開いている間に発生した呼び出しによるものだけが対象です。
- ローカルストレージ - ページ自身およびページ内の iframe が作成したすべてのローカルストレージアイテムを確認できます。
- セッションストレージ - ページ自身およびページ内の iframe が作成したすべてのセッションストレージアイテムを確認できます。
- IndexedDB - ページ自身およびページ内の iframe が作成したすべての IndexedDB データベースで、データベースのオブジェクトストアおよびオブジェクトストア内に保存しているアイテムを確認できます。
ストレージインスペクタは当分の間、読み取り専用のビューのみでストレージを表示します。将来のリリースでストレージコンテンツの編集を可能にするよう、作業しています。
ストレージインスペクタを開く
ストレージインスペクタを有効化すると、Firefox メニューパネル (メニューバーを表示している場合や Mac OS X では ツール メニュー) 内の Web 開発サブメニューで "ストレージインスペクタ" を選択して開くことができます。または、キーボードショートカット Shift + F9 も使用できます。
ストレージインスペクタがアクティブな状態で、ツールボックス がブラウザウィンドウの下部に現れます。開発ツールボックスでは "ストレージ" という名称です。
ストレージインスペクタのユーザインターフェイス
ストレージインスペクタの UI は 3 つの主要コンポーネントに分かれます:
ストレージツリー
ストレージツリーは、ストレージインスペクタが調査可能なすべてのストレージタイプを一覧表示します:
ストレージの種類の配下で、オブジェクトは生成元で分類します。Cookie では、生成元の区別にプロトコルを使用しません。Indexed DB やローカルストレージでは、生成元がプロトコルとホスト名の組み合わせになります。例えば "https://mozilla.org" と "https://mozilla.org" は異なる 2 つの生成元になりますので、ローカルストレージのアイテムは双方で共有できません。
"キャッシュストレージ" では、オブジェクトを生成元とキャッシュ名で分類します:
IndexedDB のオブジェクトは生成元、データベース名、さらにオブジェクトストア名で分類します:
Cookie、ローカルストレージ、セッションストレージは階層が 1 つだけであり、保存されているアイテムは各生成元の直下に表示します:
ツリー内の各項目をクリックすると、子項目を展開または折りたたみできます。ツリーは最新の状況を表示しますので、新たな生成元が追加される (例えば iframe を追加するなど) と、自動的に各ストレージタイプに追加されます。
ツリーでアイテムをクリックすると、アイテムの詳細情報を表形式で右側に表示します。例えばストレージタイプ Cookie 配下の生成元をクリックすると、そのドメインに属するすべての Cookie を表示します。
テーブルウィジェット
テーブルウィジェットは、選択したツリー項目 (生成元やデータベース) に関するすべてのアイテムを表示する場所です。ストレージタイプやツリー項目に応じて、テーブルの列の数が変わります。
テーブルのすべての列がリサイズ可能です。テーブルのヘッダーをコンテキストクリックして列名を選択すると、列を隠したり表示したりすることができます:
Firefox 47 より、テーブルウィジェットの上部に検索ボックスがあります:
これは、検索文字列にマッチするアイテムのみテーブルに表示するようフィルタリングします。検索文字列にマッチするアイテムは、いずれかのフィールド (列を非表示にしているフィールドを含む) に検索文字列を含むアイテムです。
キャッシュストレージ
キャッシュストレージの配下で、Cache API を使用して作成した DOM キャッシュの内容を確認できます。キャッシュを選択すると、キャッシュに含まれているリソースの一覧を表示します。各リソースについて、以下の情報を表示します:
- リソースの URL
- リソースを取り出したリクエストに対するステータスコード
Cookie
ストレージツリーで Cookie ストレージ内の生成元を選択すると、テーブルにその生成元向けの Cookie を表示します。テーブルには以下の列があります:
- 名前 - Cookie の名称
- パス - Cookie の path プロパティ
- ドメイン - Cookie のドメイン
- 有効期限 - Cookie の有効期限。セッション Cookie である場合は、この値は "セッション" になります。
- 作成日時 - Cookie が作成された日時
- アクセス日時 - Cookie が最後に読み取られた日時
- 値 - Cookie の値
- isDomain - ドメイン Cookie であるか。ドメイン Cookie である場合は、domain の値が "." から始まります。
- isSecure - セキュア Cookie であるか
- isHttpOnly - HTTP Only の Cookie であるか
ローカルストレージ / セッションストレージ
ローカルストレージおよびセッションストレージの生成元を選択すると、ローカルストレージおよびセッションストレージに関するすべてのアイテムの名称と値をテーブルに表示します。
Storage API のメソッドを使用して、Web コンソールでストレージを操作できます。
IndexedDB
ストレージツリーで IndexedDB ストレージ内の生成元を選択すると、その生成元向けのすべてのデータベースの詳細情報をテーブルに表示します。データベースの詳細情報は以下のとおりです:
- データベース名 - データベースの名称
- オリジン - データベースの生成元
- バージョン - データベースのバージョン
- オブジェクトストア - データベース内にあるオブジェクトストアの数
ストレージツリーで IndexedDB のデータベースを選択すると、保存されているすべてのオブジェクトストアの詳細情報をテーブルに表示します。オブジェクトストアの詳細情報は以下のとおりです:
- オブジェクトストア名 - オブジェクトストアの名称
- キー - オブジェクトストアの keyPath プロパティ
- 自動インクリメント - 自動インクリメントが有効であるか
- インデックス - オブジェクトストアのインデックスの配列を下図のように表示する
ストレージツリーでオブジェクトストアを選択すると、オブジェクトストア内のすべてのアイテムをテーブルに表示します。すべてのアイテムは、キーとキーに関連づけられた値があります。
コンテキストメニューで IndexedDB データベースを削除できます。IndexedDB を削除できない (もっとも多い理由は、データベースへのアクティブな接続が存在するため) 場合は、状況を明らかにするためにストレージインスペクタで警告メッセージを表示します:
サイドバー
テーブルウィジェットで任意の行を選択すると、その行の詳細情報を表示するサイドバーが開きます。Cookie を選択すると、その Cookie に関するすべての詳細情報を表示します。
サイドバーでは Cookie、ローカルストレージ、IndexedDB のアイテムの値を解析して、単なる文字列を有意義なものに変換します。例えば '{"foo": "bar"}' のように stringify 処理が施された JSON を元の JSON である {foo: "bar"} として表示したり、1~2~3~4 のようにキーで区切られた値を配列 [1, 2, 3, 4] として表示したりします。さまざまな値を解釈したときのスクリーンショットを以下に示します:
stringify 処理を施された JSON を元の JSON として、サイドバーのパース済みの値セクションに表示する
キーと値のペアを持つ文字列を JSON として、サイドバーのパース済みの値セクションに表示する
キーで区切られた値を持つ文字列を配列として、サイドバーのパース済みの値セクションに表示する
ストレージ項目を編集する
Firefox 48 より、テーブルウィジェット内のセルをダブルクリックして値を編集することで、ストレージ項目を編集できます:
Cookie、ローカルストレージ、セッションストレージの項目を編集できます。値だけでなく、項目の名前も編集できます。
コンテキストメニューを使用して Cookie、ローカルストレージ、セッションストレージの項目を削除することもできます:
