動的なコンテンツの動作チェックツール

　AJAXやFlashで外部ファイルを取り込んだり、JavaScriptでDOMを変更しながらページ遷移のないhtmlサイトを構築するとき、けっこうデバッグで苦労します。
　その大きな理由は、いまWebブラウザがどんなhttpリクエストしてどのようなレスポンスが返ってきているのか、動的に書き換えたDOMツリーが今どうなっているのか把握しにくいためです。また、セッションやAJAXで次々とCookieを書き換えるときに、Cookieをどのようにやりとりしているかhttpヘッダを見る必要に迫られることがあります。

　このようなときにデバッグする方法をまとめてみました。

　
すぐに試せる方法から順に書きます。

Safariの環境設定でCookie一覧を表示させながらWebブラウズすると、Cookie値の変化をリアルタイムでモニタします。

Safariで[ウインドウ]→[構成ファイル一覧]メニューからWebブラウザが取得しているファイルのダウンロード状況を確認します。

Firefoxで現在表示しているページ内の任意の部分をドラッグして選択状態にした状態で右クリックし、「選択部分のソースを表示」メニューを選ぶと動的にはき出しているHTMLも含め、現在レンダリングしているHTMLソースを表示します。

FirefoxのDOM InspecorでDOMツリーをたどる。DOM InspectorはFirefoxをインストーラからインストールするときに「コンポーネントの選択」から「開発ツール」にチェックを入れるとインストールされます。

FirefoxのJavaScriptコンソールにて各種構文エラーを確認します。

SafariStandをSafariに導入すると、先のFirefoxのようなDOMや構文確認ができます。

IEにDevelopper Toolbarを導入すると、IE上でDOMのチェックができます。このツールはかなり強力で、class名、id名をhtmlコンテンツ上にレイヤ表示するなど直感的に確認するのに向いています。

Charles Web Debugging ProxyはPC上にProxyサーバを設置し、httpプロトコルをモニタリングするソフトです。HTTPリクエストヘッダやレスポンスヘッダ、Cookie値などをリアルタイムに総合的にモニタリングできます。Webサイト開発者が「こんなの欲しかった」的な機能が各種含まれていて、個人的にはこれもかなり重宝しています。