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

Dale St. Marthe
Dale St. Marthe
LinkedIn

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

概要

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

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

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

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

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

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

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

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

[Application] パネルを開く

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

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

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

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