CSSデバッグツール

このエントリーをはてなブックマークに追加

Firebug

Firefoxのアドオン(拡張機能)のFirebugは最強です。

私がメインで使っているCSSデバッグツールはFirebugです。

もうFirebugがないとCSSなんて触れないと言っても過言ではありません。

Internet Explorer Developer Toolbar

IEでのデバッグにはIE Developer Toolbarを使用します。

Opera developer tools

OperaにはOpera developer toolsが用意されています。

Developer Consoleのブックマークレットを実行するとDOMツリーが表示され、調査したいエレメントまでたどって行く事によりその調査に適応されているCSSを調べることができます。

正直使いにくいですが・・・・

Web Developer

Firefoxのアドオン(拡張機能)のWeb DeveloperでもCSSの調査が可能です。

ツールバーのCSS>スタイル情報を表示する(ショートカットCtrl + Shift + Y)を選択後に調査したい要素をクリックします。

この機能でCSSの編集はできませんが、CSSの編集(ショートカットCtrl + Shift + E)を使えばCSSの編集が可能です。

Sleipnir with Hawkeye

SleipnirのプラグインHawkeyeでもCSSの調査を行うことが可能です。

プラグインをインストール後、サイドメニューの『Hawkeyeを表示』からHawkeyeを起動。

クリックした要素の詳細を表示を選択後調査したい要素を選択します。

XRAY

CSSの情報を表示できるブックマークレットXRAYも便利です。
ブックマークレットとして実行すれば選択した要素の情報が表示されます。

スポンサードリンク