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

Dale St. Marthe
Dale St. Marthe
GitHub LinkedIn

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

概要

[Application] パネルは、サブメニューを含む 4 つのセクションに分かれています。以下のセクションとサブメニューがあります。

アプリケーション: マニフェスト、Service Worker、ストレージなど、アプリに関する全般的な情報が含まれます。

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

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

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

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

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

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

[Application] パネルを開く

[Application] パネルを開くには:

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

または、次の方法で [Application] パネルを開くこともできます。

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