こんにちは，太田です。前回に引き続いてGoogle Chromeのデベロッパーツールの使い方を紹介しつつ，今回は特にJavaScriptのデバッグ方法について解説していきます。
デベロッパーツールのショートカット
まずはデベロッパーツールのショートカットキーの一覧です。
| Windows / Linux | Mac | |
|---|---|---|
| 起動 | ||
| デベロッパーツール | Ctrl Shift I | Option Command I |
| JavaScriptコンソール | Ctrl Shift J | Option Command J |
| パネル操作 | ||
| 右隣のパネルへ移動 | Ctrl ] | Command ] |
| 左隣のパネルへ移動 | Ctrl [ | Command [ |
| コンソールの開閉 | Esc | Esc |
| 検索ボックスにフォーカス | Ctrl F | Command F |
| 次の検索結果 | Ctrl G | Command G |
| 前の検索結果 | Ctrl Shift G | Shift Command G |
| コンソールの操作 | ||
| 次の補完候補 | Tab | Tab |
| 前の補完候補 | Shift Tab | Shift Tab |
| 補完の決定 | Right | Right |
| ひとつ前のコマンド（複数行の場合1行上に） | Up | Up |
| 次のコマンド（複数行の場合1行下に） | Down | Down |
| ひとつ前のコマンド | control P | |
| 次のコマンド | control N | |
| コンソールでの改行（Macのみ） | option Return | |
| コンソールのログを消去 | Ctrl L | Command K もしくは control L |
| コマンドを実行 | Enter | Return |
| Elementパネルの操作 | ||
| （見た目での）上の要素 | Up | Up |
| （見た目での）下の要素 | Down | Down |
| 子要素の展開 | Right | Right |
| 子要素の格納 | Left | Left |
| 属性の編集 | Enter | Return |
| スタイル | ||
| ルールの編集 | ダブルクリック | ダブルクリック |
| 次のプロパティの編集 | Tab | Tab |
| 前のプロパティの編集 | Shift Tab | Shift Tab |
| 新しいプロパティの追加 | 空白部分のダブルクリック | 空白部分のダブルクリック |
| 値の増減 | Up/Down | Up/Down |
| 10単位での値の増減 | Shift Up/Shift Down | Shift Up/Shift Down |
| 10単位での値の増減 | PageUp/PageDown | PageUp/PageDown |
| 100単位での値の増減 | Shift PageUp/Shift PageDown | Shift PageUp/Shift PageDown |
| 0.1単位での値の増減 | Alt Up/Alt Down | Option Up/Option Down |
| ブレーク中のショートカット | ||
| 次のCall Stackに移動 | Ctrl . | control . |
| 前のCall Stackに移動 | Ctrl , | control , |
| 再開 | F8 もしくは Ctrl / | F8 もしくは Command / |
| ステップオーバー | F10 もしくは Ctrl ' | F10 もしくは Command ' |
| ステップイン | F11 もしくは Ctrl ; | F11 もしくは Command ; |
| ステップアウト | Shift F11 もしくは Ctrl Shift ; | Shift F11 もしくは Shift Command ; |
| ブレークポイントの設置・解除 | 行数部分をクリック | 行数部分をクリック |
| ブレークポイントの状態を編集 | 行数部分を右クリック | 行数部分を右クリック |
使用頻度が高いのはデベロッパーツールを起動するCtrl+Shift+I（もしくはCtrl+Shift+J）と，コンソールを開閉するESC，コンソールでは補完候補を選択するtabなどが挙げられます。
例えば，長くて間違えやすいencodeURIComponentのスペルは，Ctrl+Shift+Jでデベロッパーツールを起動してコンソールを開き（コンソールが開かなかった場合はESC），eだけ打ってtabキーを2回押せば encodeURIComponent が補完されるので，スペルを簡単にコピーできます。
JavaScriptデバッガの活用
前回はブレークポイントの設置方法を紹介しましたが，もう一歩進んだ条件付きブレークポイントの設置方法を紹介します。
まず，通常のブレークポイントを設置します。
この青くハイライトされた行番号の上で右クリックすると次のようなメニューが表示されます。
ここで，Edit breakpoint…を選択すると，次のようにブレークするかどうかの条件を入力できるようになります（もしくは，ブレークポイントを設定していない行番号上で右クリックして，Add Conditional Breakpoint…を選択しても同様の入力ボックスが現れます）。
次のように真偽値を返す条件式（実際には暗黙的に真偽値に変換されるので真偽値でなくともよい）を記述し，真と評価されるときのみブレークさせることができます。
なお，JavaScriptでは,（カンマ）演算子で複数の式を繋げることもできるので，次のように記述すると，
i === 0 && console.log(x), false
iが0の時にconsole.logでxを出力させるが，条件式としては常にfalseを返すのでブレークはしない（厳密にはconsole.logは値を返さないのでundefined扱いであり， falseの部分は省略してもブレークしません）といったことが可能です。これによってソースコードには直接手を入れることなくデバッグ用のコードを実行することが可能になります。
なお，このテクニックはFirebugでも利用できます（Firebugで元のJavaScriptのコードに手を入れずにdebug用のconsole出力を入れる方法 - 文殊堂）。
