TOP > tools >

IEなどすべてのブラウザで使えるCSSデバッガー「Firebug Lite」

FirefoxのアドオンFirebugを利用することで効率的なCSSデバッグが可能になる。ただし、このFirebugはIEなどFirefox以外のブラウザでは利用することが出来ない。しかしFirebugではFirefox以外でも利用できるFirebug Liteが提供されている。

Firebug LiteはIE6以上, Firefox, Opera, Safari そしてGoogle Chromeなどほとんどのブラウザで利用可能です。

オリジナルのFirebugと比較すると機能が限定されているがCSSデバッグには十分利用できるでしょう。

Firebug Liteはブックマークレットとして提供されています。ブックマークレットとはサイト上で任意のJavaScriptを実行する機能で、JavaScriptで実装されたFirebug Liteの機能が利用できるようになります。

まずは配布ページの中部にある「Debug bookmarklet」にある「Firebug Lite debug」というリンクを右クリックしてお気に入りに追加します。

インストール

利用方法は調査したいサイトに移動してお気に入りから「Firebug Lite debug」を実行します。

実行するとFirebugのコンソールパネルが起動します。

インターフェースは英語ですが「Firebugで始めるCSSデバッグ」で紹介した機能のうち次の2つ以外は利用することが可能です。

Firefoxではちゃんと表示されるがIEでは・・・というのは良くあることですのでIEではFirebug Liteを利用してCSSデバッグを行うことが出来ます。

Google Chromeではブックマークレットだけでなくエクステンションとしても提供されています。

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

最近のエントリー