IEでの表示確認に必須！IE開発者ツールの使い方
皆さんはWebページを制作する際に表示確認などのデバッグはどのブラウザで行っていますか？
ChromeやFirefoxという方が多いと思います．ですが
「最後にIEで表示確認してみたら表示がズレてた！」
なんてことありませんか？
だったらいっそIEで表示確認しながらデバッグしちゃったほうが楽じゃありませんか？
というわけで，今回はIEで表示確認しながらデバッグするために，IEの開発者ツールの使い方の基本を説明します．
※今回説明に使用するOS及びブラウザはWindows7，Internet Explorer10となります．
目次
IE開発者ツールの基本操作
まず，IEで開発者ツールを起動するには，デバッグしたいWebページを表示させた状態で，F12キーを押下するか，右上にある歯車のボタンをクリック→F12開発者ツールを選択します．
すると，このように表示が切り替わります．
開発者ツールの各機能はこのようになっています．
では，主に使用するメニューバーの機能を紹介します．
| メニューバー項目 | 機能 |
|---|---|
| ファイル⇒すべて元に戻す | 変更を加えた箇所全てをデフォルトの状態へ戻す |
| 検索⇒クリックで要素を選択 | ソースやスタイルを確認したい要素を選択 |
| 無効化 | スクリプト，ポップアップ，CSSなどを無効化 |
| 表示⇒ソース⇒スタイル付きの要素ソース | 要素単体でソースとスタイルの確認が可能 |
| キャッシュ | キャッシュのクリア，リロード時のキャッシュ読込の禁止 Cookieのクリアや内容の確認 |
| ツール | ウインドウのリサイズ，ユーザーエージェントの変更，ルーラーやカラーピッカーなどが使用可 |
| ブラウザモード | 新旧の各バージョンでレンダリング |
| ドキュメントモード | DOCTYPE，METAタグを変更せず，各バージョンのドキュメントモードに変更可 |
HTMLのデバッグ
HTMLタブを選択すると，左右のビューがこのように表示されます．ツールバーと詳細ビューの主な機能は以下の様になります
| ツールバー項目 | 機能 |
|---|---|
| マウスカーソル | ソースやスタイルを確認したい要素を選択 |
| ブラウザキャッシュの消去 | キャッシュのクリア |
| 最新の情報に更新 | ページのリロード |
| 詳細ビュー項目 | 機能 |
|---|---|
| スタイル | チェックボックスで，CSSの値や各パラメータを変更可 |
| トレーススタイル | プロパティが定義されているリストを表示 |
| レイアウト | 選択した要素のボックスモデルを表示 |
| 属性 | 選択した要素のすべての属性と値を表示 |
CSSのデバッグ
CSSタブを選択すると，このような表示になり，スタイルシートのデバッグを行えます．
ドロップダウンのメニューから，スタイルシートを切り替えることができ，チェックボックスを利用してスタイルのオンオフの切り替え，スタイルの追加と削除を行うことができます．
JavaScriptのデバッグ
スクリプトタブを選択すると，このような表示になり，JavaScriptのデバッグを行えます．
ドロップダウンのメニューからデバッグを行いたいソースファイルを選択し，ツールバーのデバッグ開始をクリックすることで，デバッグ作業を行うことが出来るようになります．
また，メインビューに表示されているソースコードの行番号をクリックすることで，ブレークポイントを設定できます．
JavaScriptのデバッグに際して主に使用するツールバーと詳細ビューの機能は以下のようになります．
| ツールバー項目 | 機能 |
|---|---|
| 続行 | 別のブレークポイントもしくはスクリプトエラーまで実行 |
| 全てブレーク | 次の文が実行される直前に実行を一時停止 |
| ステップイン | 関数内でも次の文を実行し一時停止 |
| ステップオーバー | 関数内の次の文を実行し，一時停止 関数呼び出しを飛ばしたい時に使用 |
| ステップアウト | 呼び出し元の関数の次の文まで実行し，一時停止 |
| 設定 | 例外が発生した場合の設定を変更可 |
| 詳細ビューの項目 | 機能 |
|---|---|
| コンソール | エラーメッセージやログなどを参照可 |
| ウォッチ | オブジェクト名や変数の中身を表示 |
| ローカル | 現在の関数のスコープ内のローカル変数を表示 |
| コールスタック | 関数呼び出しの流れを確認でき，ダブルクリックでその関数を参照可 |
| ブレークポイント | 設置したブレークポイントの一覧を表示， チェックボックスによりオンオフの切り替え可 |
その他の機能
| その他の項目 | 機能 |
|---|---|
| プロファイラー | JavaScriptの動作をプロファイリングし，ログを表示 |
| ネットラーク | ロード時の，各種ファイルのロード・レンダリング時間を含めたトラフィックを表示 |
まとめ
ChromeやFirefoxなどのデバッグツールと何ら遜色のない機能が備わっていますね．
IEを毛嫌いする方も多いと思いますが，ツールの使い方さえ覚えておけば，デバッグの効率が良くなって，より楽になるでしょう．
No.1
No.2
No.3
