IE Tester上で使えるCSSデバッグツール

IE6、個人的にはもう滅亡したと思っていますが、現実にはまだ対応が必要ですね。取引先がお役所関係や大企業だと特に。

私は普段IE6の検証をIE Testerで簡易的に行っています。
Firebugのような便利なツールに慣れると、IE6でだけ表示が変だ!という場合に焦りますね。
みんなどうやってデバッグしてるんだろう。というわけで調べてみました。

DebugBar
IE Testerの画面上で「開発ツール」を使おうとするとダウンロードページが開きます。
Debug Bar
IE Testerと一体化しているので一番安定したツールですが、Firebugと比較すると直感的にCSSの適用状態を把握しにくいのが難点。

そこで、ありましたよ。IEで使えるFirebugが!

Firebug Lite
ブックマークレットですので、IEのお気に入りにあらかじめ登録しておいて、お気に入りメニューから呼び出します。
Firebug Lite
Installという項目の「Firebug Lite」というリンクを右クリックするか、お気に入りウィンドウにドラッグして登録してください。
一部機能の制限はありますが、びっくりするぐらいFirebugが再現されています。
ただ、IE Tester上でページをリロードしたり、Firebug Liteのパネルを閉じたりすると再度Firebug Liteを呼び出すことができませんでした。その場合はIE Testerを再起動すればまた使えます。
本来はIE Testerで使うために作られたツールではないのでしょうがないですね。

同じくブックマークレットですが、簡易的にブロック要素のサイズなどを確認するのに非常に便利なものがありました。

XRAY
XRAY
これもFirebug Liteと同様に、IEのお気に入りにあらかじめ登録しておいて、お気に入りメニューから呼び出します。
一度使用を中断すると再度呼び出すことができない問題があるのもFirebug Liteと同様です。
まあ、IE Tester上でも動いたというだけで恩の字です。何度でも再起動しちゃいますよ!

IE Tester以外の検証環境もないかなーと思って探してみました。
Microsoft Expression Web SuperPreviewというのが便利そうなのですが、Basic認証をかけているテストサイトを表示しようとするとエラー画面になってしまうので使用を断念しました。

結論として、今のところIE6の検証は、IE Tester上でDebugBarをメインに使いつつ、ここぞというところはFirebug Liteで確認というスタイルがおすすめかな?もちろん最終的に実機での確認も必要ですけど。(アップデートしてない型落ちの端末を探してくるのが手間だったりする・・・)

参考

2011-11-18 追記
Windows XP ModeでIE6を起動できることを知ってから、IE Testerはまったく使わなくなりましたが、ここで紹介したブックマークレットは引き続き大活躍しています。
こんな苦労が遠い思い出話として語れる日が一刻も早く訪れることを願っています。

This entry was posted in ツール紹介 and tagged , , , , . Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>