DevTools (Chrome)
ブラウザ内蔵の強力な開発者ツール群。DOM操作、ネットワーク分析、パフォーマンス測定でWeb開発を革新します
JavaScriptデバッグを効率化し、バグの原因を素早く特定・修正するデバッグ専用ショートカット
F8
スクリプトの一時停止/再開
JavaScriptの実行を一時停止または再開します。
💡 覚え方: F8 = 一時停止/再開
🎯 JavaScriptの実行を一時停止して、コードの実行状態を詳細に確認できる
F10
ステップオーバー
次の関数呼び出しをステップオーバーします。
💡 覚え方: F10 = またぐ
🎯 関数呼び出しをスキップして次の行に進み、効率的にデバッグを進められる
F11
ステップイン
次の関数呼び出しにステップインします。
💡 覚え方: F11 = 入る
🎯 関数内部の処理を詳細に追跡して、問題の根本原因を特定できる
Shift+F11
ステップアウト
現在の関数からステップアウトします。
💡 覚え方: Shift+F11 = 出る
🎯 現在の関数から抜け出して、呼び出し元のコンテキストに戻れる
Ctrl+B
ブレークポイントを切り替え
現在の行にブレークポイントを設定または削除します。
💡 覚え方: Breakpoint
🎯 ブレークポイントを素早く設定・解除して、デバッグポイントを柔軟に管理できる
Ctrl+Shift+J
コンソールパネルを開く
JavaScriptコンソールパネルを直接開きます。
💡 覚え方: JavaScript Console
🎯 コンソールを開いて変数の値を確認したり、デバッグコマンドを実行できる