6.1 Applicationパネル概要

Application Panel Overview

Applicationパネルは、Webアプリケーションが使用するリソースを管理・検査するツール。ストレージ（localStorage、IndexedDB等）、キャッシュ、Cookie、Service Worker、マニフェストなど、クライアントサイドのデータとPWA関連機能を一元管理できる。

Applicationパネルの概要

パネルを開く

F12 → Applicationタブ

パネルの構成

左サイドバーにカテゴリが階層表示され、選択した項目の詳細が右側に表示される。

カテゴリ 内容
Application Manifest、Service Workers、Storage
Storage localStorage、sessionStorage、IndexedDB、Cookies、Trust Tokens、Interest Groups
Cache Cache Storage、Back/forward cache
Background Services Background Fetch、Sync、Notifications、Push等
Frames ページ内のフレーム構造

Manifest（マニフェスト）

PWA（Progressive Web App）の設定ファイル（manifest.json）を確認。

確認できる情報

項目 説明
Identity アプリ名（name、short_name）
Presentation 表示モード、向き、テーマカラー、背景色
Icons 各サイズのアイコン画像
Protocol Handlers カスタムプロトコルハンドラ

Installability（インストール可能性）

PWAとしてインストール可能かどうかを判定。不足している要件があれば警告が表示される。

PWAのインストール要件 有効なmanifest.json、登録されたService Worker、HTTPS接続（localhostは例外）が必要。

Service Workers

Service Workerの登録状況、状態、操作を管理。

表示される情報

  • ソースファイル
  • ステータス（installing、waiting、activated等）
  • クライアント（制御下のページ）
  • 最終更新日時

操作

ボタン 機能
Update Service Workerの更新をチェック
Unregister 登録を解除
skipWaiting 待機中のWorkerを即座にアクティブ化

開発用オプション

  • Offline: オフライン状態をシミュレート
  • Update on reload: リロード時に常に更新
  • Bypass for network: Service Workerをバイパス

詳細は6.3 Cache・Service Workerを参照。

Storage（ストレージ概要）

サイトが使用しているストレージの概要と管理機能。

ストレージ使用量

各ストレージタイプの使用量が円グラフで視覚化される。

  • IndexedDB
  • Cache Storage
  • Service Worker registrations
  • localStorage
  • sessionStorage

Clear site data

選択したストレージを一括クリア。以下から選択可能：

  • Unregister service workers
  • Local and session storage
  • IndexedDB
  • Cookies
  • Cache storage
開発時のリセット キャッシュやストレージの問題でページが正常に動作しない場合、「Clear site data」で完全にリセットできる。

ストレージの種類

localStorage / sessionStorage

キーバリュー形式の簡易ストレージ。文字列のみ保存可能。

種類 有効期限 スコープ
localStorage 永続（明示的に削除するまで） オリジン単位
sessionStorage タブ/ウィンドウを閉じるまで タブ単位

詳細は6.2 localStorage・sessionStorageを参照。

IndexedDB

ブラウザ内のNoSQLデータベース。構造化データ、バイナリデータを大量に保存可能。

  • データベース、オブジェクトストア、インデックスの階層構造
  • トランザクションベースの操作
  • 非同期API

Cookies

サーバーとの通信に使用される小さなデータ。

属性 説明
Name / Value Cookieの名前と値
Domain / Path 有効なドメインとパス
Expires 有効期限
Size サイズ（バイト）
HttpOnly JavaScriptからアクセス不可
Secure HTTPS接続でのみ送信
SameSite クロスサイトリクエストでの送信制限

Cache Storage

Service Workerが使用するキャッシュ。HTTPリクエスト/レスポンスのペアを保存。

詳細は6.3 Cache・Service Workerを参照。

IndexedDBの操作

データベースの確認

操作手順

  1. 左サイドバーで「IndexedDB」を展開
  2. データベース名をクリック
  3. オブジェクトストアを選択
  4. 保存されているデータが一覧表示される

操作

  • リフレッシュ: 右上のリフレッシュボタン
  • データの削除: エントリを選択して Delete キー
  • データベースの削除: データベース名を右クリック → Delete database

Cookiesの操作

Cookieの確認

操作手順

  1. 左サイドバーで「Cookies」を展開
  2. ドメインを選択
  3. Cookieの一覧が表示される

操作

  • 値の編集: セルをダブルクリック
  • 削除: 選択して Delete キー、または右クリック → Delete
  • 全削除: 「Clear all」ボタン
  • フィルタ: 検索ボックスで名前や値を絞り込み

Cookieの問題検出

問題のあるCookieには警告アイコンが表示される。例:

  • SameSite属性なし
  • Secure属性なしでHTTPSサイト
  • サイズ超過

Frames（フレーム）

ページ内のフレーム構造とそれぞれのリソースを確認。

確認できる情報

  • フレームのURL
  • セキュリティ情報（オリジン、ポリシー）
  • 各フレームが使用するリソース
  • Permissions Policy

用途

  • iframe内のリソース確認
  • クロスオリジンの問題調査
  • 広告フレームの分析

Background Services

Service Workerが処理するバックグラウンドイベントを記録・確認。

利用可能なサービス

サービス 説明
Background Fetch バックグラウンドでのファイルダウンロード
Background Sync オフライン時のデータ同期予約
Notifications プッシュ通知
Payment Handler 決済処理
Periodic Background Sync 定期的なバックグラウンド同期
Push Messaging プッシュメッセージ受信

イベントの記録

サービスを選択し「Record」ボタンをクリックすると、最大3日間イベントが記録される。

よくある作業

キャッシュ問題のデバッグ

  1. Storage → Clear site dataで全クリア
  2. ページをリロード
  3. 問題が解消すればキャッシュが原因

ログイン状態のリセット

  1. Cookies で認証関連のCookieを削除
  2. または localStorage/sessionStorage のトークンを削除

PWAの動作確認

  1. Manifest でインストール要件を確認
  2. Service Workers で登録状態を確認
  3. Cache Storage でキャッシュ内容を確認
  4. Offlineモードでオフライン動作をテスト
参考文献
[1] Application panel overview - Chrome DevTools. developer.chrome.com
[2] View and edit local storage - Chrome DevTools. developer.chrome.com
[3] View, add, edit, and delete cookies - Chrome DevTools. developer.chrome.com