4.4 Application・その他

Application Panel, Lighthouse & Recorder

Applicationパネル

Webアプリケーションのストレージ、キャッシュ、Service Workerなどを管理・確認するツール。拡張機能開発でもchrome.storageのデバッグに活用できる。

Storage（ストレージ）

Local Storage

  • キーと値のペアを確認・編集・削除
  • ダブルクリックで値を編集
  • 右クリックで削除
  • フィルタボックスでキーを検索

Session Storage

Local Storageと同様の操作が可能。タブを閉じると消える一時データ。

IndexedDB

  • データベース、オブジェクトストア、インデックスを階層表示
  • レコードの閲覧・編集・削除
  • データベースの削除

Cookies

カラム 説明
Name Cookie名
Value Cookie値
Domain 適用ドメイン
Path 適用パス
Expires 有効期限
Size サイズ
HttpOnly JSからアクセス不可
Secure HTTPS接続のみ
SameSite クロスサイト送信制限
拡張機能でのストレージ確認 chrome.storage.localの内容はApplicationパネルには直接表示されない。Content ScriptのDevToolsでは、そのページのlocalStorageが表示される。拡張機能のストレージはchrome://extensionsまたはPopupのDevToolsで確認する。

Cache Storage

Service Workerによってキャッシュされたリソースを確認できる。

  • キャッシュ名ごとにグループ化
  • キャッシュされたURL一覧
  • レスポンスヘッダー、プレビュー
  • 個別またはキャッシュ全体の削除

Clear storage

「Clear site data」ボタンで以下を一括クリア可能。

  • Cookies
  • Local / Session Storage
  • IndexedDB
  • Cache Storage
  • Service Worker登録

Service Workers

ページに登録されたService Workerの状態を確認・操作できる。

操作項目

操作 説明
Update Service Workerを更新
Unregister 登録解除
Update on reload リロード時に強制更新
Bypass for network Service Workerをバイパス
Offline オフライン状態をシミュレート

Manifest

PWA（Progressive Web App）のWeb App Manifestを確認できる。アイコン、テーマカラー、表示モードなどの設定を可視化。

Lighthouseパネル

Webページの品質を自動監査するツール。Googleが推奨するベストプラクティスに基づいてスコアリングする。

監査カテゴリ

カテゴリ 内容
Performance 読み込み速度、レンダリング性能
Accessibility アクセシビリティ対応
Best Practices セキュリティ、API使用法
SEO 検索エンジン最適化
PWA Progressive Web App対応

実行方法

  1. 監査するカテゴリを選択
  2. デバイス（Mobile/Desktop）を選択
  3. 「Analyze page load」をクリック
  4. 結果を確認（スコア0-100）

Performanceの主要指標

  • First Contentful Paint (FCP): 最初のコンテンツ描画
  • Largest Contentful Paint (LCP): 最大コンテンツ描画
  • Total Blocking Time (TBT): ブロック時間合計
  • Cumulative Layout Shift (CLS): レイアウトシフト
  • Speed Index: コンテンツの表示速度
改善のヒント 各指標の下に改善提案が表示される。「Learn more」リンクで詳細な改善方法を確認可能。「View Treemap」でJavaScriptバンドルの構成を可視化できる。

Recorderパネル

ユーザー操作を記録し、再生・エクスポートできるツール。E2Eテストの自動化に活用可能。

基本操作

  1. 「Create a new recording」をクリック
  2. Recording名を入力
  3. 「Start recording」で記録開始
  4. ページ上で操作を実行
  5. 「End recording」で記録終了

記録される操作

  • クリック
  • テキスト入力
  • ナビゲーション
  • スクロール
  • キーボード操作
  • ホバー（設定で有効化）

エクスポート形式

形式 用途
JSON Recorderで再利用
Puppeteer Node.jsでの自動化
Puppeteer Replay @puppeteer/replayライブラリ用
Lighthouse user flow ユーザーフローの監査

拡張機能での活用

  • 拡張機能のPopup操作を記録
  • Content Scriptの動作テスト用シナリオ作成
  • リグレッションテストの自動化

Privacy and securityパネル

サードパーティCookie、プライバシー関連の問題を確認できる。

  • Third-party cookies: ブロックされるサードパーティCookie
  • Privacy Sandbox: Topics API、Attribution Reportingの状態

その他の便利機能

More tools メニュー

⋮メニュー → More toolsから追加パネルを開ける。

  • Animations: CSSアニメーションの検査・編集
  • Changes: DevToolsでの変更履歴
  • Coverage: 未使用CSS/JSの検出
  • CSS Overview: ページ全体のCSS分析
  • Issues: 問題点のレポート
  • Layers: レンダリングレイヤーの可視化
  • Network conditions: UA、オフラインの詳細設定
  • Rendering: リペイント、レイヤー境界の表示
  • Search: 全ソースの横断検索
  • Sensors: 位置情報、加速度センサーのエミュレート

Command Menu

Ctrl+Shift+Pで開く。コマンドパレット形式で機能にアクセス。

// よく使うコマンド例
> screenshot    // スクリーンショット撮影
> dark          // ダークモード切替
> dock          // DevToolsの位置変更
> disable js    // JavaScript無効化
> coverage      // Coverageパネルを開く
参考文献
[1] Chrome DevTools - Application panel
[2] Chrome DevTools - Lighthouse
[3] Chrome DevTools - Record, replay, and measure user flows