DevTools (Chrome)
ブラウザ内蔵の強力な開発者ツール群。DOM操作、ネットワーク分析、パフォーマンス測定でWeb開発を革新します
パフォーマンス分析とネットワーク監視で、Webアプリケーションの最適化を支援するショートカット
Ctrl+E
記録を開始/停止
ネットワーク活動の記録を開始または停止します。
💡 覚え方: Ctrl+E = Enable/Disable
🎯 パフォーマンス記録を開始・停止して、アプリケーションの動作を分析できる
Ctrl+R
再読み込みを記録
ページを再読み込みしてネットワーク活動を記録します。
💡 覚え方: Reload（再読み込み）
🎯 ページ再読み込みを記録して、初期読み込みのパフォーマンスを測定できる
Ctrl+F5
ハード再読み込み
キャッシュを無視してページを再読み込みします。
💡 覚え方: Ctrl+F5 = 強制リフレッシュ
🎯 キャッシュを無視して再読み込みし、最新のリソースでパフォーマンスを検証できる
Ctrl+Shift+M
デバイスモードを切り替え
モバイルデバイスのエミュレーションモードを切り替えます。
💡 覚え方: Mobile device
🎯 デバイスモードで様々な端末でのパフォーマンスをシミュレーションできる
Ctrl+Shift+F
すべてのファイルを検索
読み込まれたすべてのリソースでテキストを検索します。
💡 覚え方: Find in all files
🎯 すべてのリソースファイルを検索して、パフォーマンスボトルネックを特定できる
R
XHRをリプレイ
選択したXHRリクエストを再実行します。
💡 覚え方: Replay
🎯 XHRリクエストを再実行して、ネットワーク応答を詳細に分析できる