クライアントサイドの話。
サーバーサイドの話はNode.jsのページを参照。
Firefox
デバッガの起動はCtrl+Shift+i、またはF12を押す。
動的に生成されたソースを参照したい場合は、右クリック→「選択範囲のソースを表示」でOK。(Ctrl+Aで全選択してからやるとよい)
Chrome
デバッガの起動はCtrl+Shift+i、またはF12を押す。
動的に生成されたソースを参照したい場合は、アドオンを追加する必要がある(?)。
パネルの説明
- Elementsパネル（HTML・CSSの確認と編集）
- Resourcesパネル（ネットワークの監視）
- Scriptsパネル（JavaScriptのデバッグ）
- Profilesパネル（JavaScriptのパフォーマンスチェック）
- Storageパネル（Cookie, localStorageの確認・編集）
- Timelineパネル（レンダリングを含めたパフォーマンスチェック）
- Auditsパネル（YSlowのようなパフォーマンスチェックツール）
- Consoleパネル（JavaScriptのコマンドラインツール）
デバッガのショートカット
| ショートカット | 動作 | 備考 |
|---|---|---|
| Ctrl + Shift + c | DOMインスペクタモード （HTMLの要素ごとに解析できるやつ） |
デベロッパーツールを開いてない状態で実行する。 デベロッパーツールを開いている状態であれば、Webページ上の解析したい要素の上で右クリックして「要素を検証」を選択。 |
| F8 | スクリプトの実行・停止 | |
| F10 | ステップオーバー | 現在の行を実行し、次の行に進む。 もし現在の行に関数呼び出しがあったとしても、関数へはジャンプせずに関数の処理を行い、次の行に進む。 ただし、次の行に進むだけで、その行が実行されるわけではない。 |
| F11 | ステップイン | 現在の行を実行し、次の行に進む。 もし現在の行に関数呼び出しがあった場合、その関数にジャンプし、呼び出した関数の内部に進む。 |
| Shift + F10 | ステップアウト | 現在の行の呼び出し元の関数が終了するまで実行し、関数を抜ける。 |
参考URL
http://shim0mura.hatenadiary.jp/entry/20111231/1325357395
https://app.codegrid.net/entry/breakpoint-1
