TOP > tools >

IE版のFirebug　IE Developer Toolbar

みなさんはInternet Explorer Developer Toolbarというのを知っているでしょうか？

マイクロソフトが現在ベータ版として提供しているツールで、簡単に説明すればIE版のFirebugです。

IEで使えるFireBugとして聞くとFireBug Liteを思い浮かべがちですがFireBug Liteのようにソースにjavascriptを埋め込むことなく実行することが可能です。

ちなみにFirebugとはjavascritpやCSSのデバッグなどを行えるFirefoxのアドオン(拡張機能)になります。

すごく便利ですので、使ったことがない方はFirebugの方からお使いください。

話は戻りますが、Internet Explorer Developer Toolbarのインストール方法について解説したいと思います。

IEでMicrosoftのInternet Explorer Developer Toolbarのダウンロードに行きます。

ダウンロードページ

ここでDownloadボタンを押してください。
するとインストールが開始します。
インストールを実行してください。

ダウンロード中

インストールが開始されますので『next』でどんどん進んでください。

ダウンロード中

最後にAgreeにチェックを入れて利用規約に同意します。

インストール中

これでインストールが終了します。
ここでIEを再起動します。

するとメニューにIE Developer Toolbarが追加されています。
IE6の場合は表示→エクスプローラーバー→IE DOM Explorerが追加されています。

Internet Explorer Developer Toolbar

これを実行すると、ブラウザの下部にFirebugのようなコンソールが出てきます。

Internet Explorer Developer Toolbar

要素を選択して、その要素にかかっているCSSプロパティを調べたり、リアルタイムでCSSプロパティを書きかえれたりします。

また、Firebugにはない機能でブラウザのデフォルトのCSSなども調べることができます。
(正確にはFirebug0.4.1にはこの機能は搭載されていたのですがFirebug1.0でなくなりました)

色々と触っているのですが、JavaScriptのデバッグ機能は、Firebug1.0と比べると貧弱ですが、javascript実行後のhtmlを調べれるのでこれは使えます。

CSSの作業環境としてはFirebugと同等の環境がIEで手の入ったといって過言ではありません。

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

最近のエントリー