ストレージ、データベース、およびキャッシュの調査と管理

ストレージ、データベース、およびキャッシュを [Application] パネルから調査および管理します。

TL;DR

  • ローカル ストレージとセッション ストレージを表示および編集します。
  • IndexedDB データベースを調査および変更します。
  • ウェブ SQL データベースに対して文を実行します。
  • アプリケーションと Service Worker のキャッシュを表示します。
  • すべてのストレージ、データベース、キャッシュ、および Service Worker を、1 回のボタンクリックで消去します。

ローカル ストレージ

キー値ペア(KVP)の格納にローカル ストレージを使用している場合は、これらの KVP を [Local Storage] ペインから調査、変更、および削除できます。

[Local Storage] ペイン

  • 値を編集するには、キーまたは値をダブルクリックします。
  • 新しい KVP を追加するには、空のセルをダブルクリックします。
  • KVP を削除するには、その KVP をクリックしてから削除ボタン(削除ボタン)をクリックします。 1 回のボタンクリックで、[Clear storage] ペインからすべてのローカル ストレージ データを消去できます。
  • ページで KVP の作成、削除、または変更操作をしている場合、それらの変更がリアルタイムでアップデートされることはありません。 変更を表示するには、更新ボタン(更新ボタン)をクリックします。

セッション ストレージ

[Session Storage] ペインの機能は [Local Storage] ペインと同じです。 セッション ストレージを表示および編集する方法については、前述のローカル ストレージセクションを参照してください。

IndexedDB

[IndexedDB] ペインは、IndexedDB データを調査、変更、および削除するために使用します。

[IndexedDB] ペインを展開してその下に表示される最初のレベルはデータベースです。 複数のデータベースがアクティブの場合は、複数のエントリが表示されます。 次のスクリーンショットでは、ページに対してアクティブになっているのは 1 つのデータベースのみです。

[IndexedDB] タブ

データベースの名前をクリックすると、そのデータベースのセキュリティ オリジン、名前、およびバージョンが表示されます。

IndexedDB データベース

データベースを展開すると、そのキー値ペア(KVP)が表示されます。

IndexedDB のキー値ペア

KVP のページ間を移動するには、[Start from key] テキスト項目の横にある矢印ボタンを使用します。

値を編集するには、その値を展開してダブルクリックします。値を追加、変更、または削除する場合、それらの変更がリアルタイムでアップデートされるわけではありません。更新ボタンをクリックしてデータベースをアップデートします。 IndexedDB の KVP の編集

[Start from key] テキスト項目にキーを入力し、そのキーよりも小さい値を持つすべてのキーを除外します。

除外された KVP

値を追加、変更、または削除しても、これらの変更がリアルタイムでアップデートされるわけではありません。 更新ボタン(更新ボタン)をクリックしてデータベースをアップデートします。

データベースからすべてのデータを削除するには、オブジェクト ストアの消去ボタン(オブジェクト ストアの消去)をクリックします。 これは、Service Worker の登録を解除して [Clear storage] ペインから 1 回のクリックで他のストレージとキャッシュを削除しても実現できます。

ウェブ SQL

[Web SQL] ペインは、ウェブ SQL データベースをクエリおよび変更するために使用します。

データベース名をクリックすると、そのデータベースのコンソールが開きます。ここでデータベースに対して文を実行できます。

ウェブ SQL コンソール

データベース テーブルをクリックすると、そのテーブルのデータが表示されます。

ウェブ SQL テーブル

  • ここでは値を更新できませんが、データベース コンソールからアップデートできます(上記を参照)。
  • 列の見出しをクリックすると、テーブルがその列で並べ替えられます。
  • テーブルに加えた変更がリアルタイムでアップデートされるわけではありません。更新ボタン(更新ボタン)をクリックするとアップデートが表示されます。
  • [Visibile columns] テキスト項目にスペースまたはコンマ区切りの列名のリストを入力すると、その列のみが表示されます。

アプリケーション キャッシュ

[Application Cache] ペインは、Application Cache API を使用して作成されたリソースやルールを調査するために使用します。

[Application Cache] ペイン

各行はリソースを表しています。

[Type] 列の値は次のいずれかになります。

  • Master。リソースの manifest 属性で、このキャッシュがそのリソースのマスターであることが示されています。
  • Explicit。このリソースはマニフェストに明示的にリストされています。
  • Network。マニフェストで、このリソースをネットワークから取得する必要があることが示されています。
  • Fallback。[Resource] 列の URL が(DevTools では表示されない)別の URL の代わりとしてリストされています。

テーブルの一番下に、ネットワーク接続とアプリケーション キャッシュのステータスを示すステータス アイコンがあります。 アプリケーション キャッシュのステータスは次のいずれかです。

  • IDLE。キャッシュに新しい変更はありません。
  • CHECKING。マニフェストが取得され、アップデートがないか確認中です。
  • DOWNLOADING。リソースがキャッシュに追加されています。
  • UPDATEREADY。新しいバージョンのキャッシュが利用可能です。
  • OBSOLETE。キャッシュが削除されています。

Service Worker のキャッシュ

[Application] パネルの [Cache Storage] ペインでは、(Service Worker)Cache API を使用して作成されたキャッシュを調査、変更、およびデバッグできます。 詳しくは、次のガイドをご覧ください。

Service Worker、ストレージ、データベース、およびキャッシュの消去

特定のオリジンのデータをすべて消去することが必要になる場合があります。[Application] パネルの [Clear Storage] ペインでは、Service Worker、ストレージ、およびキャッシュを選択的に登録解除できます。 データを消去するには、消去するコンポーネントの横にあるチェックボックスをオンにし、[Clear site data] をクリックします。 [Clear storage] ラベルの下に表示されているオリジンのデータがすべて消去されます。

Clear storage