Google Chrome版Firebug:デベロッパーツール取扱説明書

第2回 JavaScriptのデバッグとチューニング

この記事を読むのに必要な時間:およそ 3 分

こんにちは,太田です。前回に引き続いてGoogle Chromeのデベロッパーツールの使い方を紹介しつつ,今回は特にJavaScriptのデバッグ方法について解説していきます。

デベロッパーツールのショートカット

まずはデベロッパーツールのショートカットキーの一覧です。

 Windows / LinuxMac
起動
デベロッパーツールCtrl Shift IOption Command I
JavaScriptコンソールCtrl Shift JOption Command J
パネル操作
右隣のパネルへ移動Ctrl ]Command ]
左隣のパネルへ移動Ctrl [Command [
コンソールの開閉EscEsc
検索ボックスにフォーカスCtrl FCommand F
次の検索結果Ctrl GCommand G
前の検索結果Ctrl Shift GShift Command G
コンソールの操作
次の補完候補TabTab
前の補完候補Shift TabShift Tab
補完の決定RightRight
ひとつ前のコマンド(複数行の場合1行上に)UpUp
次のコマンド(複数行の場合1行下に)DownDown
ひとつ前のコマンドcontrol P
次のコマンドcontrol N
コンソールでの改行(Macのみ)option Return
コンソールのログを消去Ctrl LCommand K もしくは
control L
コマンドを実行EnterReturn
Elementパネルの操作
(見た目での)上の要素UpUp
(見た目での)下の要素DownDown
子要素の展開RightRight
子要素の格納LeftLeft
属性の編集EnterReturn
スタイル
ルールの編集ダブルクリックダブルクリック
次のプロパティの編集TabTab
前のプロパティの編集Shift TabShift Tab
新しいプロパティの追加空白部分のダブルクリック空白部分のダブルクリック
値の増減Up/DownUp/Down
10単位での値の増減Shift Up/Shift DownShift Up/Shift Down
10単位での値の増減PageUp/PageDownPageUp/PageDown
100単位での値の増減Shift PageUp/Shift PageDownShift PageUp/Shift PageDown
0.1単位での値の増減Alt Up/Alt DownOption 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出力を入れる方法 - 文殊堂)。

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/

コメント

コメントの記入