JavaScriptのデバッグ方法
JavaScriptのデバッグ方法もいくつか紹介された。Chrome Dev Toolsの［虫眼鏡］ボタンから、デバッグしたいDOMエレメントを選択し、右クリックで［Break on subtree modifications］を選択すると、DOMエレメントをキーにどこでイベントが発生しているのか、スタートポイントを探すことができる。
また、画面上で発生する全てのonChangeイベントをキャプチャし、ブレイクをかけるように設定することも可能だ。ここでは、Developer Advocatesのサイト上にて、プロフィールを表示しているテーブルのどの箇所でイベントが発生し、変更処理が行われているかが例に挙げられた。
CSSと同様、JavaScriptの編集も、スクリプトパネル上で直接修正が可能となっており、変更履歴も自動で保存される。デバッグのために元ファイルのソースコードを書き換えてリロードする必要はなく、修正しながらデバッグを進めることができる。
注目の機能は、難読化されたJavaScriptコードの整形だ。［Scripts］パネルをクリックすると、難読化されたJavaScriptのコードが表示されるが、左下の［{}］ボタンを押すだけで、見やすい形に整形されて表示される。さらに、コードを展開することで、ブレークポイントを任意の場所に置くことができ、解析も容易に行える。
さらに北村氏は、リモートでのデバッグ方法についても解説した。Chromeを起動する際、オプションとして「--remote-debugging-port=1337」を設定し、別のブラウザから「ポート1337」にアクセスすることで、Chromeに搭載されているリモートデバッグ機能を使用することができる。
この機能は、Webkitベースのブラウザ全てに使用できるため、モバイル端末のブラウザのデバッグ時などはかなり有効と言える。近い将来、iPhoneやAndroidといったスマートフォンのブラウザのデバッグが、Chrome Dev Toolsで可能になるかもしれないと北村氏は語った。
拡張機能、チートシート、ショートカットで使いやすく
現在用意されているChrome Dev Toolsを使いやすくするための拡張機能も、いくつか紹介された。
- chrome.devtools.panels：カスタムパネルやサイドバーを追加
- chrome.devtools.audits：プラガブルなAudits
- chrome.devtools.resources：HARリソースへのアクセス
今回紹介したChrome Dev Toolsの概要や動画、関連するブログの記事などはGoogle Code上のGoogle Chrome デベロッパー ツールにてまとめられている。Chrome Dev Toolsを使用する際、起動した状態で［?］を押下すると表示されるショートカットの一覧や、チートシート（PDF）なども、併せて参照してほしい。
最後に、北村氏は、「開発者であればぜひChrome Dev Channel、Canary channelを使用し、バグなどのフィードバックはnew.crbug.comへ報告してほしい」と呼びかけ、セッションを締めくくった。
