IE8標準機能のDeveloperTool(開発者ツール)が何気に便利

VisualStudioをはじめて使ったとき、正直なんだこの便利なものー!と驚きました。「統合開発環境」とやらはすごい!と。

しかしそのワリに、仕事で一番使うJavaScriptでは、今でもAlert()でやっています。今はAptanaとかFireFoxのプラグイン系とか統合環境っぽいものがいくつかありますが、なんでだろ、なかなか手につかないです。そんなに激しいことをやってないせいもある(というかそれがでかそう)。

そんなんであんまりJS系のツールにアンテナが立ってなかったのですが、偶然これが目に。

MS謹製の開発ツールです。でもどうせFireBugがあるからいいやと思って、ちょっと使ってみたらこれがなかなか便利でした。

 ▼Discovering Internet Explorer Developer Tools

イメージとしては「FireBug」+「DeveloperToolbar」みたいな感じです

普通にJavaScriptをデバッグして、ブレークポイントつけて変数WATCHして…というのはもちろん、HTMLやCSSのとこまでいろんなツールがついています。

シンプルなところでは、ウィンドウサイズを1024×768にしてくれるとか、Cookieの状況を見せてくれたり、DOMの各属性を見せてくれたりとかです。

CSSのトレースモード

個人的に一番便利だなーと思ったのが、「トレーススタイル」です。

スタイル関係のツールなのに「HTML」タブの中にあるのですが、これが何が便利だと思ったかと言うと、スタイルのカスケードを見せてくれるんですね。

ie8_devtool.gif

特に、「歴史ある」サイトの場合、それはもう地層のようにCSSが重なってわけが分からなくなっていることがままあります。だからといって!importantを使いまくると、もう袋小路なので結局挙動がおかしいところは追っかけていくしかないのですが、これがもう。

そんなときにこれがあれば、その要素に対して、どこでどいつが被さっているのか、どれが最終的に生きているのかが一目瞭然です。

これでかなりCSSの整理と作成工数削減が出来そうでうれしいです(^-^

お悩みの方へ。一回のご相談で解決することもあります
ラウンドナップ・コンサルティングへのお問合せ方法 お電話でのご相談もお気軽に。[048-234-3361](10〜16 土日祝日除)全国対応 24時間受付 お問合せメールフォーム