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

Dale St. Marthe
Dale St. Marthe
LinkedIn

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

概要

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

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

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

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

  • [Local] リストと [Session storage] リストでは、オリジンを選択して、関連するストレージ メソッドの Key-Value ペアを編集できます。
  • The [IndexedDB] list contains databases and lets you inspect object stores from the browser.
  • [Cookies] リストでは、オリジンを選択して Key-Value ペアを編集できます。
  • [Private state tokens] と [Interest groups] では、対応する [tokens] と [groups] を検査できます（存在する場合）。
  • [共有ストレージ] リストでは、オリジンを選択して、関連する Key-Value ペアを検査、編集できます。
  • The [Cache storage] list contains available caches and lets you inspect, filter, and delete their resources.

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

  • [**Back/forward cache**] タブでは、ブラウザでバックフォワード キャッシュのテストを実行できます。また、バックフォワード キャッシュを妨げている可能性のある問題も報告されます。
  • [**Background fetch**] タブでは、Background Fetch API のアクティビティを最長 3 日間記録できます。
  • [**Background sync**] タブでは、Background Sync API のアクティビティを最長 3 日間記録できます。
  • [**バウンス トラッキングの緩和策**] タブでは、バウンス トラッキング手法を使用してクロスサイト トラッキングを行っていると思われるサイトの状態を特定して削除できます。
  • [Notifications] タブでは、プッシュ メッセージを最長 3 日間記録できます。
  • [Payment handler] タブでは、Payment Handler イベントを最長 3 日間記録できます。
  • [Periodic background sync] タブでは、同期の登録、バックグラウンド同期の実行、登録解除など、定期的なバックグラウンド同期のライフサイクルにおける重要なイベントを最長 3 日間記録できます。
  • [Speculative loads] タブでは、投機的読み込みをデバッグできます。投機的ステータス、ルールセット、投機的読み込みの試行が表示されます。
  • [Push messaging] タブでは、プッシュ メッセージを最長 3 日間記録してログに記録できます。
  • [Reporting API] タブでは、サイトをモニタリングし、非推奨の API 呼び出しとセキュリティ違反を報告します。
  • [Device bound sessions] タブでは、デバイスにバインドされたセッションに関する情報を表示し、関連するイベントを検査できます。

Frames: ページとリソースを複数のビューに分割し、Security & Isolation 、コンテンツ セキュリティ ポリシー 、API availability など、関連情報を表示します。

[Application] パネルを開く

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

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

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

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