Chrome DevTools の使用チップスとテクニック

このページでは、Chrome 開発者ツール（DevTools）の使用に関するチップスとテクニックの速查表（チートシート）を提供します。これには、さまざまなデバッグ操作、ネットワーク監視、パフォーマンス分析などの機能が含まれています。

Elements パネル

操作	ショートカット
DevTools を開く	`F12` または `Ctrl` + `Shift` + `I`
デバイスツールバーを切り替える	`Ctrl` + `Shift` + `M`
更新してキャッシュをクリアする	`Ctrl` + `Shift` + `R`
要素のコンテキストメニューを表示する	`右クリック`
要素を編集する	`Enter`
要素を削除する	`Delete`
要素をコピーする	`Ctrl` + `C`
要素を貼り付ける	`Ctrl` + `V`
要素の CSS ルールを表示する	`Ctrl` + `Shift` + `C`

Console パネル

操作	ショートカット
コンソールを開く	`Esc`
コンソールをクリアする	`Ctrl` + `L`
選択したテキストをコピーする	`Ctrl` + `C`
テキストを貼り付ける	`Ctrl` + `V`
コマンド履歴を表示する	`上矢印` と `下矢印`
オブジェクトの詳細情報を表示する	`Ctrl` + `Shift` + `C`

Network パネル

操作	ショートカット
ネットワーク活動の記録を開始/停止する	`Ctrl` + `E`
ネットワークログをクリアする	`Ctrl` + `R`
リクエストをフィルタリングする	`Ctrl` + `F`
リクエストの詳細情報を表示する	`Ctrl` + `Shift` + `C`

Performance パネル

操作	ショートカット
パフォーマンスの録画を開始/停止する	`Ctrl` + `E`
録画されたパフォーマンスをエクスポートする	`Ctrl` + `S`
イベントをフィルタリングする	`Ctrl` + `F`

Memory パネル

操作	ショートカット
スナップショットを撮る	`Ctrl` + `S`
スナップショットをエクスポートする	`Ctrl` + `Shift` + `S`
スナップショットをフィルタリングする	`Ctrl` + `F`

Application パネル

操作	ショートカット
アプリケーションをリフレッシュする	`Ctrl` + `R`
ストレージをクリアする	`Ctrl` + `Shift` + `R`
データをフィルタリングする	`Ctrl` + `F`

Security パネル

操作	ショートカット
証明書を表示する	`Ctrl` + `Shift` + `C`
ページを再読み込みしてキャッシュをバイパスする	`Ctrl` + `Shift` + `R`

その他 (Misc)

操作	ショートカット
設定を開く	`F1`
テーマを切り替える	`Ctrl` + `Shift` + `P` の後に `theme` と入力
ショートカットを表示する	`Ctrl` + `Shift` + `P` の後に `shortcuts` と入力