アプリケーション パネルの概要

Dale St. Marthe
Dale St. Marthe
LinkedIn

[アプリケーション] パネルを使用すると、ウェブアプリのさまざまな要素（マニフェスト、サービス ワーカー、ストレージ、キャッシュデータなど）を検査、変更、デバッグできます。

概要

[アプリケーション] パネルは、サブメニューを含む 4 つのセクションに分かれています。これらのセクションとサブメニューは次のとおりです。

Application: アプリに関する包括的な情報（マニフェスト、サービス ワーカー、ストレージなど）が含まれています。

  • [マニフェスト] タブには、manifest.json の情報がユーザー フレンドリーな方法で表示されます。エラーや警告がある場合は、対応するセクションに表示されます。
  • [サービス ワーカー] タブでは、プッシュ イベントのエミュレートやサービスの更新などを行うことで、サービス ワーカーを検査してデバッグできます。
  • [ストレージ] タブには、キャッシュ ストレージ、IndexedDB、サービス ワーカーで使用されるメモリの分布を示す円グラフが表示されます。サイトデータを消去したり、カスタムの保存容量をシミュレートしたりすることもできます。

ストレージ: ウェブアプリで使用されているさまざまなストレージ メソッドを表示、編集します。

  • [ローカル] リストと [セッション ストレージ] リストでは、オリジンを選択して、関連するストレージ方法の Key-Value ペアを編集できます。
  • [IndexedDBIndexedDB] リストにはデータベースが含まれており、ブラウザからオブジェクト ストアを検査できます。
  • [Cookie] リストでは、オリジンを選択して Key-Value ペアを編集できます。
  • 非公開状態トークンとインタレスト グループを使用すると、対応するトークンとグループ（存在する場合）を検査できます。
  • [共有ストレージ] リストでは、オリジンを選択して、関連する Key-Value ペアを検査、編集できます。
  • [キャッシュ ストレージ] リストには、使用可能なキャッシュが表示されます。このリストで、キャッシュのリソースを検査、フィルタ、削除できます。

バックグラウンド サービス: バックグラウンド サービスの検査、テスト、デバッグを行います。

  • [バックフォワード キャッシュ] タブでは、ブラウザでバックフォワード キャッシュのテストを行うことができます。また、バック/フォワード キャッシュを妨げている可能性のある問題も報告します。
  • [バックグラウンド フェッチ] タブでは、Background Fetch API からのアクティビティを最長 3 日間記録できます。
  • [バックグラウンド同期] タブでは、Background Sync API からのアクティビティを最長 3 日間記録できます。
  • [バウンス トラッキング対策] タブでは、バウンス トラッキング手法を使用してサイト間トラッキングを行っていると思われるサイトの状態を特定して削除できます。
  • [通知] タブでは、最大 3 日間プッシュ メッセージを記録できます。
  • [Payment handler] タブでは、Payment Handler イベントを最大 3 日間記録できます。
  • [定期的なバックグラウンド同期] タブでは、定期的なバックグラウンド同期のライフサイクルで発生したキーイベント（同期の登録、バックグラウンド同期の実行、登録解除など）を最大 3 日間記録できます。
  • [投機的読み込み] タブでは、投機的読み込みをデバッグできます。投機的読み込みのステータス、ルールセット、投機的読み込みの試行が表示されます。
  • [プッシュ メッセージ] タブでは、プッシュ メッセージを最大 3 日間記録してログに記録できます。
  • [Reporting API] タブでは、サイトをモニタリングし、非推奨の API 呼び出しとセキュリティ違反を報告します。

フレーム: ページとリソースを複数のビューに分割し、セキュリティと分離、コンテンツ セキュリティ ポリシー、API の可用性などの関連情報を表示します。

[アプリケーション] パネルを開く

[アプリケーション] パネルを開くには:

  1. DevTools を開きます。
  2. 次のキーを押してコマンド メニューを開きます。
    • macOS: Command+Shift+P
    • Windows、Linux、ChromeOS: Ctrl+Shift+P コマンド メニュー（
  3. 「application」と入力し、[Show Application] を選択して Enter キーを押します。DevTools ウィンドウの上部に [Application] パネルが表示されます。

または、次の方法で [アプリケーション] パネルを開くこともできます。

  • 上部にあるアクションバーで、 [その他のパネル] をクリックし、プルダウン リストから [アプリケーション] を選択します。
  • 右上の [その他のオプション] > [その他のツール] > [アプリ] を選択します。