Webインスペクタ(JavaScriptコンソール)を使ってみる

ここでの動作環境は次のとおり。

  • OS: Microsoft Windows XP SP3
  • Google Chrome 0.2.149.29

JavaScriptコンソールを開くときは、ページメニューをたどって表示させる必要がある。

ページメニューから「開発/管理」→「JavaScriptコンソール」を選択する。ショートカットキーは今のところ用意されていないようだ

上半分はWebインスペクタ/各種リソース、タイムライン、下半分はJavaScriptコンソールが表示される。WebKitを採用していることから、UIはSafariとかなり似ている

参考までに、Safari3.1.2のWeb Inspectorはこんな画面。

オンザフライでソースを編集することも可能。編集後にはEnterキーを押す必要がある。オンマウスで対象がハイライト表示されてわかりやすい

Resourcesタブではページ表示完了までのリソース別タイムラインが表示される。XMLHttpRequest等で外部通信を行うと適宜追記されていく

下半分のコンソールではJavaScriptを実行できる。複数行に渡るスクリプトをコピペして実行することも可能だ

JavaScriptコンソールは、JavaScriptコンソールを開いたタブのプロセスに依存する。複数サイトを同時にデバッグする際、ひとつのサイトでデバッグ中に負荷がかかっても、Webブラウザごとパフォーマンスが低下したりすることはない。

2つのタブを開き、片方のタブのJavaScriptコンソールで負荷のかかる処理をした直後のタスクマネージャ。処理をしている側のJavaScriptコンソールは処理が終了するまで応答しなくなるが、他のタブは影響を受けない

Webインスペクタ・リソースのタイムライン表示について、フィルタリングの有無などのこまかい使い勝手はFirebugやDragonflyと異なるが、行えることはかなり同等なところまできている。またマルチプロセスのため、デバッグ中に無限ループ等に陥ってもWebブラウザごと終了させる必要がないのは嬉しいところだ。FirebugやDragonfly、Safariのデバッガを使ってきたユーザにとって「まったくあたらしいデバッガの使い方を覚えなければならない」という心配はなさそうだ。