ChromeとSafariの開発ツール、新機能まとめ

ChromeおよびSafariはWebKitが提供している開発ツール「Web Inspector」をデフォルトの開発ツールまたはベースの開発ツールとして提供している。Surfin’ Safari - Blog Archive » More Web Inspector Updatesにおいて、最近の開発でWebKitのWeb Inspectorに新しく追加されたパネルや、改善された機能がまとめられている。どういった新機能が追加され、またどういった改善が実施されたのかがまとまっていて参考になる。紹介されている新機能および改善機能は次のとおり。

Web Inspectorの既存の機能の改善点
DOMインスペクションにおいて要素をHTMLとして編集する機能「Edit as HTML」を追加。
DOMインスペクションにおいて500を越える子ノードの表示方法を変更。
リソースパネルにHTTPリダイレクト情報の表示機能を追加。
スクリプトパネルにおける機能強化。要素の内容や関数の内容などをオンザフライでチェック可能。
スタイルインスペクションにおける擬似要素やベンダプロパティのサポート強化。
激しくAJAX機能を利用するWebアプリケーションを数日間解析しても問題なく動作するスケーラビリティの実現。
キーボードショートカットの追加。

	Web Inspectorに新しく追加されたパネル
Timeline	ネットサーフィンしている間にブラウザで何がおこなっているのかを示すビュー。時間の流れからリソースの読み込み、スクリプトの実行、レンダリングの実施といった現象をとらえ、それぞれの動作の関連がどうなっているのかを簡単に把握できる。導入したばかりのビューで、今後さまざまな改善や機能追加が実施されるとみられる。
Audits	ページのキャッシュ情報やクッキー、利用されているスタイルシートの情報などが報告されるビュー。ページのクリーンナップや最適化に利用できる。拡張可能にすることを計画しており、目的とする情報を集めやすいようにする見通し。
Dedicated Console	インタラクティブに利用できるコンソール。

紹介されている機能はWebKitのナイトリービルドやChromeの開発版で試用できる。フルで機能を試してみたい場合にはWebKitのナイトリービルドをダウンロードして利用する。Chrome開発版にも取り込まれているが、いくつかの機能はChromeにはまだ導入されていない。

• WebKit Nightly
• Chromium Dev Channel

タイムラインビューの導入やオーディットビューの導入、それにインタラクティブコンソールが追加されたことは注目に値する。