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のデバッグに際して主に使用するツールバーと詳細ビューの機能は以下のようになります．

ツールバー項目	機能
続行	別のブレークポイントもしくはスクリプトエラーまで実行
全てブレーク	次の文が実行される直前に実行を一時停止
ステップイン	関数内でも次の文を実行し一時停止
ステップオーバー	関数内の次の文を実行し，一時停止関数呼び出しを飛ばしたい時に使用
ステップアウト	呼び出し元の関数の次の文まで実行し，一時停止
設定	例外が発生した場合の設定を変更可

詳細ビューの項目	機能
コンソール	エラーメッセージやログなどを参照可
ウォッチ	オブジェクト名や変数の中身を表示
ローカル	現在の関数のスコープ内のローカル変数を表示
コールスタック	関数呼び出しの流れを確認でき，ダブルクリックでその関数を参照可
ブレークポイント	設置したブレークポイントの一覧を表示，チェックボックスによりオンオフの切り替え可

その他の項目	機能
プロファイラー	JavaScriptの動作をプロファイリングし，ログを表示
ネットラーク	ロード時の，各種ファイルのロード・レンダリング時間を含めたトラフィックを表示