Webデザイナーほかクリエイター達の生の声をお届け！

こんばんは、Tyです。

前回の記事に引き続きIEでデバッグする機会を増やすための
ツール紹介です。

今回は、IE7のプラグイン DebugBar をご紹介します。
IE上のDOMのオブジェクトを表示したり
リクエストヘッダとレスポンスを表示したり、
とFireBugほどではありませんが、
なかなかうれしい機能がそろっているツールです。

DebugBarは5つのタブで構成されており、
大まかな機能は下記のようになります。

DOMタブ
開かれているページのHTMLオブジェクトを全てカテゴリ別にツリーで表示します。
左上のターゲットアイコンをドラッグするとレンダリングされたページから
オブジェクトを検索できます。

HTTP(S)タブ
HTTP(S)のリクエストとレスポンスの一覧が表示されます。
XHttpRequestの内容とレスポンスも表示できるようなのですが、
json-comment-filteredのようにコメントアウトされたJSONオブジェクトは
中身が表示できないようです。


Scriptタブ
開かれているページのスクリプトをIDE風に構造化して表示します。

HTMLCheck
開かれているページのHTMLをバリデートします。
ただし、マルチバイトの文字列に対応していないらしく、
日本語が全てエラーになってしまうので
まだ使用は難しいようです。

Infoタブ
その他の情報が表示されます。

インストール手順は下記のとおりです。

Microsoft Script Debugger をインストール
http://www.microsoft.com/downloads/details.aspx?familyid=E606E71F-BA7F-471E-A57D-F2216D81EC3D&displaylang=ja
Companion.JS をインストール
http://www.my-debugbar.com/wiki/CompanionJS/HomePage
DebugBar をインストール
http://www.debugbar.com/download.php
フランス語でtéléchargerと書かれているボタンが「download」にあたります。
ツールとインストーラ自体は英語対応なのでご安心を。

 エラー発生時に警告を出す場合は、IE側で下記の設定を行います。
１．「ツール」⇒「インターネットオプション」
２．詳細設定タブの設定から「スクリプトのデバッグを使用しない」のチェックをはずす

• 次の記事：Internet Explore 8 beta2
• 前の記事：LinuxにPHPをソースからインストールする