簡単にWebページのデバック・チューニングが出来るIE開発者ツール

Streak - Responsive WordPress Theme - Laptop By: Serge Kij

Webページを開発するときには、是非とも使ってもらいたいIEの開発者ツールをご紹介します。

意外と知らない人も多いのですが、Webページのデバック・チューニングする上でかなり戦力になる優秀なツールです。

開発者ツールで出来るWebページのデバック・チューニング機能
  1. 開発者ツールの起動方法
  2. HTML/CSSの解析・チューニング
  3. javascriptのデバック
  4. IEの各バージョンで確認する

開発者ツールの起動方法

起動方法は簡単で「F12」キーを押すか、IEの「ツール」>「F12 開発者ツール」をクリックします。
developtools

HTML/CSSの解析・チューニング

1.HTMLの構造を確認するときには画面右上の矢印ボタンを押して、確認したいwebページの要素をクリックします。
developtools1-1
2.要素を選択するときにマウスオーバーされた要素が青色の線で囲われます。
developtools2
3.要素を選択すると、左側のペインに要素のHTMLが表示されます。右側のペインにはその要素に適応されているCSSが表示されます。
developtools3
4.左側のペインではHTMLに対して属性の追加ができます。
developtools1-3
5.右側のペインではCSSに対して、チェックボックスのON/OFFをすることにより適応/未適応の状態を切り替えることができます。
developtools1-4
6.タブを切り替えることにより直接スタイルを書き込むこともできます。
developtools1-2
7.書き込んだスタイルはリアルタイムで反映されます。
developtools1-5

javascriptのデバック

右側のタブを「スクリプト」に切り替えることにより、読み込まれているjavascriptが左のペインに表示されます。

「デバック開始」ボタンをクリックすると、javascriptを1行ずつ実行しているステップ実行や変数の要素の中身が確認できるウォッチ式などが使えます。
developtools5

IEの各バージョンで確認する

「ブラウザーモード」のメニューからIE7,IE8,IE9と互換表示を選択することで、それぞれのブラウザで画面を開いたときと同じ動きをさせることができます。

IEは各バージョンでCSSの解釈も異なるため、クロスブラウザ確認がこれ1つで出来るようになります。
developtools6

IEの開発者ツールは使いこなせばWeb開発の強い見方になります。
これを機に一度使ってみてください。

divider

Trackback URL

http://webnonotes.com/web/iedeveloptools/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>