読者です 読者をやめる 読者になる 読者になる

Google ChromeのJavaScriptデバッガの進化がすごい

Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。

圧縮されたコードの整形

まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。
例えば、Google Analyticsのコードは圧縮されていて普通は読めません。
f:id:os0x:20110422140725p:image
しかし、Chromeデベロッパーツールなら、
f:id:os0x:20110422140726p:image
このように整形してくれます。
やり方は簡単で、デベロッパーツールのScriptパネルの左下に { } というアイコンがあるのでそれをクリックするだけです。*1
f:id:os0x:20110816081411p:image
このチェックはデベロッパーツールを起動している間だけ有効で、リロードしても維持されます。
つまり、整形した状態でブレークポイントを設定して、実際にブレークすることができます。
f:id:os0x:20110422144852p:image
これで圧縮されているライブラリのデバッグがものすごく簡単になります。
なにより大事なのは、これまでは開発者にとってJavaScriptを圧縮するかどうかは、デバッグしやすさとパフォーマンスとの間のトレードオフで悩ましい問題だったわけです。しかし、それはもう過去の話で、圧縮してもデバッグに支障がなくなったので、圧縮しない理由の1つがなくなった訳です。
とは言ったものの、今のところ実装されたばかりの機能なので安定していません。実際に使えるようになるにはまだ少し時間が必要です。今後が非常に楽しみですね。

JavaScriptのインスタント編集

Scriptパネルのコードエリアでダブルクリックすると編集モードに入り、自由にコードを書き換えることができます。残念ながら(2011年4月22日時点では)編集した内容を保存できないので、デバッグには使いにくいですが、あとからデバッグコードを埋め込むことなどが可能で、こちらも今後が楽しみです。こちらはstable(10.0)とdev(12.0)で少し挙動が違いますが、stableでも使えます。

柔軟なブレークポイント

様々なブレークポイントを設定することが可能で、通常の行単位でのブレーク以外に以下のようなものがあります(こちらはstable版でも使えます)。

  • 条件付きブレークポイント
    • 任意の条件式がtrueを返すときだけブレークする
  • DOMブレークポイント
    • DOMの内容や、属性、削除されたときにブレークする
  • XHR ブレークポイント
    • XHR送信時にブレークする、送信先が特定の文字列を含む時だけブレークすることも可能
  • Event Listenerブレークポイント
    • キー入力、マウス、タイマー(setTimeout)などのイベント時に自動でブレークする
  • 例外発生時にブレーク
    • 例外が発生したときにそこでブレークすることも可能です。catchしているときはブレークしないようにもできます。

パネルでの表示はこんな感じです。
f:id:os0x:20110422185223p:image
特に、XHRでのブレークとタイマーでのブレークがすごく便利です。非同期処理はコードを追いにくいので、そこでブレークできるのは非常に助かります。


他にも色々な改良が行われていて、個人的には(特にJavaScriptに関しては)FirefoxFirebugよりChromeデベロッパーツールの方が使いやすくなったと思っています。ただ、概してツールというのは慣れによる使いやすさが大きな比重を占めてしまうので、最初は使いにくいと感じるかもしれません。が、そういった固定観念に囚われてしまうのは勿体無いので、是非デベロッパーツールをアレコレ試してもらえればと思います。


ところで、ちょうど4/22から4/23にかけて、第2回 開発コンテスト24というイベントをやっています。ものづくりに情熱のある方が是非ご参加ください!クックパッドオフィスのラウンジを開発スペースとして提供もしているので、是非ご利用ください。

*1:記事を書いた当初は右クリックメニューにDe-obfuscate Sourceという項目があったのですが、今はアイコンになっています