Google Chrome の Developer Tools

Firebugのようなものだが、Firebugのポートではない。Google Chrome の一部。(= WebkitのWebインスペクタ)

リリース間隔は、開発版が週に1回。

主な機能

• Mastering DOM
  • DOMを自由に編集することができる。
  • イベントのモニタリングができる。(よくわからない。FirebugのAPIらしい。要調査)
• Analyzing Network Activity
  • 各リソースについて、リクエスト/レスポンス等各種情報が取得できる。
• Debugging JavaScript
  • デバッガ上でJavaScriptの編集ができる。(ただし元ファイルには反映されない)
  • イベントの再発行も不要? (→ 挙動がよくわからなかった。どういう操作をすればいい?)
• Identifying performance issues
  • プロファイルパネルを開いて(?)、画面を動かすと記録される。
  • JSレベルでは簡単に見えても、ブラウザ自体の処理に時間がかかるケースがある。
  • Timelineを開くと、JSだけでなく、ブラウザの処理(再レイアウト/再レンダリングなど)もわかる。
• Understanding memory usage
  • メモリプロファイラがある。
  • 処理前後のスナップショットを取って比較することで、メモリリークを把握することができる。(スナップショットの取得が手動なのはちょっと残念)

その他のフィーチャー

• CTRL(or Command)+SHIFT+C ⇒ inspectモード
• DOMブレークポイント: DOMにブレークポイントをかけると、変更をトラッキングできる(⇒ 素晴しい)
• バグ報告 ⇒ http://crbug.com/

Q&A

• JavaScriptのライブ編集機能で、編集結果を元ファイルに反映する手段はあるか? ⇒ 現状では無い。リクエストには挙がっている機能なので検討中。現状では、Google Chrome Developer Tools for Java (Eclipseのプラグイン: http://code.google.com/p/chromedevtools/ )を使うのが良い。
• devtools自体のExtensionは作れるか? ⇒ 現在作業中。
• 圧縮/難読化されたJavaScriptのデバッグは可能か? ⇒ 現状では無い。
• Closure Library ( http://code.google.com/intl/ja/closure/library/ ) のdevtoolsへの統合(extensionとかで利用したい)は? ⇒ そもそもClosure Libraryはそういうものではない。extensionの中で使うことは可能。
• Chrome Extentionのデバッグはできるか? ⇒ 可能。チュートリアルとビデオがある。