「Chrome DeveloperTools入門」を読む。

デベロッパーツールの開き方が何種類もあるの知らなかった。

ショートカットキー	デベロッパーツール
Ctrl + Shift + i	右クリック→検証と同じ通常の開く動作
F12	Ctrl + Shift + iと同様
Ctrl + Shift + c	Elementsパネルをアクティブにして開く
Ctrl + Shift + j	Consoleパネルをアクティブにして開く

ymgn

デベロッパーツールの機能一覧

アイコン	操作例
Inspect	要素の検証
Device	デバイスモードの切り替え

パネル名	操作例
Elements	DOM要素の確認、レイアウト/デザインの変更
Console	Error/Warningなどのメッセージ表示、コンソール/コマンドライン操作
Source	ブレークポイントを使用したJSのデバッグ
Network	レスポンスやリソースの確認
Performance	パフォーマンスの最適化
Memory	メモリ量、メモリリークの追跡
Application	データの管理
Security	セキュリティの確認
Audits	ページの最適化診断、PWA対応

AuditsはLighthouseのことかな？

ymgn

Consoleパネルは任意のパネルでESCを押すことでツール下部に表示することもできる。

ymgn

Applicationパネル

p.49

かつてはResourcesでしたが、Applicationパネルに名前が変わりました。ローカルストレージ、セッションストレージ、IndexedDB、Web SQL、Cookies、キャッシュ、Service Workerなど、読み込まれたすべてのデータをこのパネル上から管理できます。また、このパネルでProgressive WebApp（以降、PWA）のデバッグを行うことができます。この章ではPWAへの対応についても解説します。