※この記事はIE10の開発者ツールについてになります。IE11の開発者ツールについては追って記事を書きます。

IE開発者ツールを使ってみる

起動方法

IEを起ち上げたらキーボードのF12を押します。そうすると、開発者ツールウィンドウが表示されます。
308_01

使い方

IE開発者ツールで主に使うのは「ブラウザーモード」と「ドキュメントモード」の2つです。

ブラウザモード

閲覧しているIEのバージョンを再現するので、ユーザーエージェント判定、条件付コメントの挙動を確認できます。
308_02

ドキュメントモード

レンダリングエンジン方法を再現するので各IEごとに表示や挙動の差異を確認できます。
308_03

このブラウザモードとドキュメントモードの違いって、ちょっとややこしいのですが、結論から言えばIE7で普通にページを見ている状況を再現したい場合はどちらもIE7を選択してあげるだけでOKです。もちろん、IE8ならIE8、IE9ならIE9と言った具合に。

ただ、IE8以降は必要に応じてhead内にレンダリングモードを指定できます。そんな時は、個別にレンダリングモードを変更して確認する必要があるんですね。こんな感じに↓

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">

よく分からない方は、実際に動作を確認してみると理解が早いです。私も、小粋空間さんの「IE8/IE9の「ブラウザーモード」と「ドキュメントモード」のまとめ」という記事でご紹介されていた動作確認用ページで色々と試して理解できました。自分も備忘録として動作確認用ページを作ってみたので必要がありましたらこちらからどうぞ。

注意点

IE開発者ツールが使えるようになって、IE Testerを手放す人は多いと思うのですが、開発者ツールは全ての表示や挙動を再現出来るワケじゃないようです。以下は、自分が経験した開発者ツールでは再現されなかった問題のリスト。

透過png画像のopacityを弄ると黒ずむ
IE6はもちろん、IE7/8でも起こる症状。
position:relativeの包含ブロックが領域を認識しない
これは逆に開発者ツールだと症状が出るけど他だと大丈夫だった。

現状はこれだけ。他にも再現できないものがあれば、おって追記していこうと思います。