DevTools (Firefox)
ブラウザ内蔵の強力な開発者ツール群。DOM操作、ネットワーク分析、パフォーマンス測定でWeb開発を革新します
JavaScriptのデバッグ作業を効率化し、バグの原因を素早く特定・修正するデバッグ専用ショートカット
F8
実行を再開
ブレークポイントで停止した実行を再開します。
💡 覚え方: F8 = 再生
🎯 ブレークポイントで停止したコードの実行を再開し、デバッグフローを継続します
F10
ステップオーバー
現在の行を実行し、次の行へ移動します(関数の中には入りません)。
💡 覚え方: F10 = 飛び越える
🎯 関数の内部に入らずに現在の行を実行し、効率的にコードの流れを追跡します
F11
ステップイン
現在の行を実行し、関数の中に入ります。
💡 覚え方: F11 = 中に入る
🎯 関数の内部に入って詳細なデバッグを行い、問題の根本原因を特定します
Shift+F11
ステップアウト
現在の関数の実行を完了し、呼び出し元に戻ります。
💡 覚え方: Shift + F11 = 外に出る
🎯 現在の関数から抜け出して呼び出し元に戻り、デバッグのスコープを調整します
Ctrl+B
ブレークポイントを切り替え
現在の行にブレークポイントを設定/解除します。
💡 覚え方: Breakpoint(ブレークポイント)
🎯 ブレークポイントを素早く設定・解除し、デバッグポイントを柔軟に管理します
Ctrl+P
スクリプトを検索
名前でスクリプトファイルを検索します。
💡 覚え方: Pick script(スクリプトを選ぶ)
🎯 スクリプトファイルを名前で検索し、大規模プロジェクトでも目的のファイルに即座にアクセスします
Ctrl+Shift+Z
デバッガーを開く
JavaScriptデバッガーを開いてコードをデバッグします。
💡 覚え方: デバッグのZ(最後の文字)
🎯 デバッガーツールを瞬時に開き、JavaScript のデバッグ作業を開始します