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

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

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

使用頻度が高いのはデベロッパーツールを起動する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出力を入れる方法 - 文殊堂⁠）⁠。

consoleのメソッド

クロスブラウザJavaScript入門の第2回でも取り上げましたが、各ブラウザはデバッグ用のconsoleメソッドを幾つか備えています。

以下はそのサンプルコードです。

console.log(1.1, 1.2, 'a', Math.PI, 'http://gihyo.jp/', '引数はいくつでも可');
console.log('%i', Math.PI);
console.log('%d', Math.PI);
console.log('%f', Math.PI);
console.log('%s', 'abc');
console.log('%o', 'aaaaaa');
console.log('%o', 'http://gihyo.jp/');
console.warn('黄色の三角マーク付き(右下にも出る)');
console.error('赤の罰点マーク付き(右下にも出る)');
console.info(5);
console.debug(6);
console.assert(3+3 === 6, '正解');
console.assert(3+3 === 7, '間違い！(falseのときのみ出力される)');
for (var i = 0;i < 7;i++){
  console.count(3);// 同じ値の場合まとめられるはずだが…
}
for (var i = 0;i < 7;i++){
  console.log(4);// logがcount相当になっている
}
console.dir(document);
console.dirxml(document);
console.group('g');
console.log(1,2,3);
console.log(1,2,3);
console.groupEnd('g');
console.groupCollapsed('g2');
console.log(1,2,3);
console.log(1,2,3);
console.groupEnd('g2');
console.time('time');
(function busy_loop(){
  var start = +new Date();
  while(new Date - start < 100);
})();
console.timeEnd('time');
(function trace(){
  console.trace(9);
})();

コンソールメソッドを実行（あらかじめコンソールを開いておいてください）

プロファイリング

プロファイリング機能では、JavaScriptの処理時間を記録し、分析することができます。

profileタブを選択し、左下の黒丸のアイコンをクリックすると黒丸が赤丸に変わり、プロファイリングが開始されます。一度開始するとリロードしてもプロファイリング状態は継続し、赤丸のアイコンをクリックするとプロファイリングが終了してレポートが表示されます。

プロファイリングはconsole.profile／profileEndメソッドから操作することも可能です。解析したい範囲を絞ってプロファイリングできるので、console.profileを使用したほうが扱いやすい面があります。

console.profile('profile');
(function busy_loop(){
  var start = +new Date(), i = 0;
  while(new Date - start < 100)i++;
  console.log(i);
})();
console.profileEnd('profile');

console.profile('profile2');
(function busy_loop2(){
  var start = Date.now(), i = 0;
  while(Date.now() - start < 100)i++;
  console.log(i);
})();
console.profileEnd('profile2');

ただし、プロファイリング機能はメソッド一つ一つの分析をするような細かいチェックをする機能ではなく、全体の中からボトルネックを特定する際に効果を発揮する機能です。細かい部分では前述のconsole.time／console.timeEndなどで個別に計測したほうがよいかもしれません。

まとめ

今回はJavaScriptのデバッグ方法を中心にデベロッパーツールの使い方を解説しました。次回はTimelineパネル、Auditsパネルを使った総合的なデバッグ・チューニングについて解説する予定です。