Windows Internet Explorer 8 開発者ツールを使用してサイトを修正する

[アーティクル]
09/24/2008

注 : このドキュメントは暫定版であり、変更される場合があります。

Windows Internet Explorer 8 では、HTML、カスケードスタイルシート (CSS)、および Web ページのスクリプトに関連した問題の検証やその解決に役立つ新しい開発者ツールセットが導入されました。開発者ツールは、Web 開発のさまざまなタスク (個々の属性の表示、要素に特定の CSS ルールを適用する根拠の特定、スクリプトの実行時デバッグ、異なるドキュメント互換モードを使用した Web ページのプレビューなど) を支援します。

このドキュメントでは、開発者ツールの一般的な使い方、およびこれらのツールを構成する 4 つの主要モードの機能と使い方を説明します。4 つのモードは次のとおりです。

HTML モード : ページの基となる分離コードの表示、個々の要素のアウトライン化と選択、特定の属性値の変更に影響を受けるページのプレビュー表示、および個々の要素に適用された CSS ルールの表示を行うことができます。
CSS モード : 各種スタイルシートに応じた Web ページの違いを確認できるため、複数のスタイルシートを使用するサイトで特に有効です。
スクリプトモード : Web ページで使用されているスクリプトをデバッグできます。また、コードのステップ実行、ブレークポイントの挿入および監視、変数の検査を行うことができます。
プロファイラモード : ページの基となる分離コードのパフォーマンスを分析し、最適なパフォーマンスで動作していない可能性がある関数を検出できます。

/開発者ツールを開く閉じる

開発者ツールを開くには、F12 キーを押すか、Windows Internet Explorer ツールバーの [ツール] メニューで [開発者ツール] をクリックします。図 1 は、Windows Internet Explorer の右上隅にある [開発者ツール] メニューオプションが強調表示された状態を示しています。

図 1

開発者ツールウィンドウが、Windows Internet Explorer ウィンドウの前面に表示されます。開発者ツールを閉じるには、開くときと同様に、F12 キーを押すか、Windows Internet Explorer ツールバーの [ツール] メニューで [開発者ツール] をクリックします。

重要 : 開発者ツールを使用して行った変更は一時的なものであり、Web ページの基となるソースには反映されません。ページを最新の情報に更新すると、変更内容は取り消され、ブラウザが新しいページに移動するか、ブラウザウィンドウが閉じます。HTML および CSS の変更をテキストファイルに保存するには、[開発者ツール] ツールバーのディスク (保存) ボタンをクリックします。

異なる互換モードをプレビューする

Windows Internet Explorer 8 では、Windows Internet Explorer 8 での Web ページの表示方法を変更するドキュメント互換モードが導入されました。サポートされているいくつかのドキュメント互換モードとその実装方法については、「META タグと将来の互換性のロック」を参照してください。

開発者ツールを使用して、異なる互換モード間の表示の相違を確認できます。特定の Web ページのドキュメントモードを変更するには、[開発者ツール] メニューの [ドキュメントモード] メニューで必要なモードを選択します。選択された互換モードにチェックマークが付きます。ドキュメントモードのオプションには、[Quirk]、[Internet Explorer 7 標準]、または [Internet Explorer 8 標準] があります。ブラウザモードを変更するには、[開発者ツール] メニューの [ブラウザーモード] メニューで必要なモードを選択します。選択された互換モードにチェックマークが付きます。ブラウザモードのオプションには、[Internet Explorer 7]、[Internet Explorer 8]、または [Internet Explorer 8 互換表示] があります。

要素をアウトライン化する

Web ページ内での要素の表示位置や、特定の効果の作成に使用されている要素の種類を確認するために、要素のアウトライン化を選択できます。[アウトライン] メニューでコマンドを選択すると、Web ページ上の対応する要素がアウトライン化されます。たとえば、[アウトライン] メニューで [DIV 要素] コマンドを選択すると、現在の Web ページのすべての div 要素の周囲にアウトラインが表示されます。

HTML モードを使用する

HTML モードでは、ページの基となる分離マークアップの表示、個々の要素の選択とその属性の表示、特定の属性値の変更に影響を受けるページのプレビュー表示、および個々の要素に適用された CSS ルールの表示を行うことができます。開発ツールウィンドウの [HTML] タブをクリックすると、HTML モードで表示されます。図 2 は、開発者ツールウィンドウの左上隅にある [HTML] タブが選択された状態を示しています。

図 2

HTML ウィンドウペインの右側には、Web ページの HTML 要素の表示を理解するために役立つツールが表示されます。

[スタイル] ツールは、選択した要素に CSS ルールを適用した結果を表示します。また、変更された属性とその値が指定されている箇所を示します。各ルールの左側のチェックマークでルールの有効/無効を切り替えることができます。このチェックマークを使用して、Web ページ上の要素の外観を試しに変えてみることが可能です。
[トレーススタイル] ツールは、要素に適用されている CSS 属性、属性が定義されている要素、および該当する場合は、属性値を定義しているスタイルシートの名前を表示します。
[レイアウト] ツールは、要素のボックスモデルの属性を表示します。この属性は、コンテンツ領域の中心の要素がどのように変更されたかを表します。ボックスモデルの詳細については、W3C のボックスモデルの説明を参照してください。
[属性] ツールは、[HTML] タブで選択された要素の属性を表示します。ツールには現在のノードが表示されます。このツールを使用すれば、選択したノードに対して属性を簡単に追加または削除し、ブラウザウィンドウで更新することができます。

図 3 は、HTML ペインの右側にある [スタイル]、[トレーススタイル]、[レイアウト]、および [属性] の各ボタンを示しています。

図 3

要素を選択して属性値を変更する

要素を選択するには、HTML ペインで対象の要素を強調表示するか、[開発者ツール] ツールバーで [クリックで要素を選択] をクリックします。図 4 は、開発者ツールウィンドウの左上隅にある [クリックで要素を選択] ボタンが強調表示された状態を示しています。[クリックで要素を選択] を選択すると、ブラウザページ上の各要素を 1 回のクリックで選択できます。クリックした要素は開発者ツールウィンドウで選択された状態になります。

図 4

Web ページの要素を選択したら、その現在の属性値を表示し、HTML モードで新しい値を試してみることができます。属性値を変更するには、変更する属性値を [HTML] タブでクリックするか、変更する値を [属性] ツールでダブルクリックします。次に、新しい値を入力して Enter キーを押します。これで、Windows Internet Explorer に変更後の内容が表示されます。一部の値を破棄するには、Enter キーを押す前に Esc キーを押します。ページの外観を元に戻すには、ページを最新の情報に更新します。

[] [] スタイルツールおよびトレーススタイルツールを使用する

[スタイル] ツールには、選択した要素に適用されるすべてのスタイルルールがカスケード順に表示されますが、破棄されたスタイルは削除されます。各ルールの横にあるチェックボックスを使用してルールの有効/無効を切り替えると、その効果がすぐに Windows Internet Explorer に表示されます。[トレーススタイル] ツールは、特定のスタイルプロパティの計算結果を表示します。このビューでは、スタイルはルール単位ではなく、プロパティ単位でグループ化されます。これにより、計算されたプロパティの値が即座にわかります。プロパティを展開すると、そのプロパティを設定しているすべてのルールがカスケード順に表示され、Windows Internet Explorer での最終的な結果の表示方法が示されます。

[スタイル] ツールおよび [トレーススタイル] ツールでスタイルの値を変更するには、表示されている値をクリックし、新しい値を入力します。新しい値は、編集可能な値からフォーカスが移動したときに確定します。Esc キーを押すと変更は中止されます。

図 5 は、[スタイル] ツールで無効にされたルールを示しています。

図 5

[] レイアウトツールを理解する

[レイアウト] ツールは、以下の値を表示します。

オフセットの値は、選択したオブジェクトとその親との距離を offsetLeft プロパティと offsetTop プロパティで表します。
マージン、罫線、および余白の値は、Web ページで指定された対応する値を表示します。Web ページのソースに値が指定されていない場合、[レイアウト] ツールは Windows Internet Explorer で使用する既定値を表示します。
最も内側の値は、offsetHeight プロパティおよび offsetWidth プロパティに定義された要素の高さと幅を表します。

各ボックスモデル属性の値と単位が表示されます。既定では、[レイアウト] ツールはボックスモデル属性がピクセル単位で指定されることを想定しています。[レイアウト] ツールに単位が表示されない場合、値はピクセル単位で表されます。図 6 は、[レイアウト] ツールの左側の HTML ペインで要素が選択された状態を示しています。

図 6

[] 属性ツールを使用して属性を表示する

Windows Internet Explorer 8 の開発者ツールには、要素の属性を表示するツールもあります。[属性] ツールを使用するには、右上の [属性] ボタンをクリックします。現在の Web サイトの HTML 要素は、[HTML] タブの左側のペインに表示されます。要素を選択すると、属性の一覧が右側のペインに表示されます。[読み取り専用プロパティを表示] チェックボックスをオンにすると、選択した要素のすべてのプロパティの一覧が [属性] ツールに表示されます。図 7 は、[属性] ツールが選択され、HTML 要素の属性一覧が表示された状態を示しています。

図 7

属性を追加または削除するには、[属性] ツールウィンドウの上部にあるボタンまたはボタンをクリックします。コンボボックスで追加する属性を選択できます。

CSS モードを使用する

CSS モードでは、各種スタイルシートに応じた Web ページの違いを確認できるため、複数のスタイルシートを使用するサイトで特に有効です。開発ツールウィンドウの [CSS] タブをクリックすると、CSS モードで表示されます。図 8 は、開発者ツールウィンドウの左上隅にある [CSS] タブが選択された状態を示しています。

図 8

CSS モードツールバーに表示されたコンボボックスで、Web ページによって読み込まれたスタイルシートを選択し、プロパティを表示することができます。スタイルシートのルールが、スタイルシートボタンの下に表示されます。ツリーの属性を展開したり折りたたんだりすることができます。個々のルールの有効/無効を切り替えるには、各項目の横にあるチェックボックスをオンまたはオフにします。

各プロパティの値を変更するには、HTML モードの場合と同様に、表示されている値をクリックし、新しい値を入力し、フィールドからフォーカスを移動します。

スクリプトモードを使用する

スクリプトモードでは、コードのステップ実行、ブレークポイントの挿入、および変数の検査によって Web ページ上のスクリプトをデバッグできます。開発者ツールでは、クライアント側スクリプトにブレークポイントを設定してステップ実行できる組み込みの軽量デバッガにより、Windows Internet Explorer から離れずにスクリプトをデバッグできます。開発者ツールウィンドウの [スクリプト] タブをクリックすると、スクリプトモードで表示されます。図 9 は、開発者ツールウィンドウの左上隅にある [スクリプト] タブが選択された状態を示しています。

図 9

デバッグを開始および停止する

デバッグを開始するには、[デバッグ開始] ボタンをクリックします。デバッグ中には、個別のファイルやインラインスクリプトブロックを含むサイト上のすべてのスクリプトをドロップダウンスクリプトリストで選択できます。デバッグを停止するには、[デバッグの停止] ボタンをクリックします。

ブレークポイントを設定する

デバッグ時には、ランタイムエラーが発生すると、デバッガは自動的にエラー箇所で中断します。Windows Internet Explorer は一時停止し、ソースビューウィンドウ内でエラー発生行が強調表示されます。

注 : スクリプトデバッガからの入力を待機している間、Windows Internet Explorer はユーザー操作には応答しません。

ブレークポイントを設定することにより、実行を停止する箇所を選択することもできます。ブレークポイントを設定すると、ブレークポイントの行が実行される直前でスクリプトの実行が一時停止します。デバッガは、スクリプトのソースビューで、実行する次の行を強調表示します。ブレークポイントはデバッグの開始後に設定することも可能です。ブレークポイントを設定するには、行番号の横をクリックして右クリックコンテキストメニューを使用するか、F9 キーを押します。

デバッガの [ブレークポイント] タブに、使用可能なすべてのブレークポイントの一覧が表示されます。図 10 は、デバッガツールペインの右側で [ブレークポイント] タブが選択された状態を示しています。

図 10

この一覧で、すべてのブレークポイントの位置とファイル名および行番号を確認できます。この一覧のブレークポイントをダブルクリックすると、ソースコード内のブレークポイントの位置に移動します。ブレークポイントを非アクティブ化する場合、ソースコードからブレークポイントを削除する必要はなく、ブレークポイントの横にあるチェックボックスをオフにするだけで済みます。ブレークポイントを削除するには、右クリックし、[削除] を選択します。

注 : 現在のサイトから移動しても、開発者ツールを閉じるまで、Windows Internet Explorer はブレークポイント情報を保持します。

変数を検査する

ブレークポイントで実行を一時停止するたびに、スクリプト変数を検査できます。デバッガの [ローカル] ツールには、現在の実行スコープで使用可能なすべての変数の名前、値、型が表示されます。実行スコープ外の変数は未定義になります。実行スコープとは、変数を参照可能な範囲のことです。図 11 は、デバッグ時に [ローカル] ツールが選択された状態を示しています。

図 11

対象の変数を [ウォッチ] ツールに追加して、変数を別のスコープからウォッチできます。ウォッチ変数を設定するには、ソーステキストを選択し、右クリックし、[ウォッチ式の追加] を選択します。カーソルが置かれた識別子のウォッチ式が追加されます。図 12 は、デバッグ時に [ウォッチ] ツールが選択され、変数がウォッチされている状態を示しています。

図 12

[ウォッチ] ウィンドウの [クリックして追加...] テキストをクリックし、変数名を入力して、ウォッチ変数を追加することもできます。

プロファイラモードを使用する

プロファイラモードでは、Windows Internet Explorer が Web サイトをレンダリングするときにプロファイラで収集した情報を使用して Web サイトの実行時間を確認できます。この情報は、一部のコードの実行時間が過剰に長く、ボトルネックになっている場合に、最適化のターゲットを絞るうえで役立ちます。

プロファイラモードを使用するには、ウィンドウの左上にある [プロファイラー] タブを選択します。プロファイルを開始するには、ウィンドウの上部にある [プロファイリングの開始] ボタンをクリックします。プロファイラは、Windows Internet Explorer でレンダリングされた Web サイトの分析を開始します。Web サイトをプロファイリングするには、対象の URL に移動します。プロファイラモードでページをレンダリング中にデータが収集されます。プロファイラによって生成されたレポートを表示するには、[プロファイリングの停止] ボタンをクリックします。図 13 は、プロファイラモードでレポートを読み込んだ場合を示しています。

図 13

レポートには、URL をレンダリングするために Windows Internet Explorer で使用された関数が表示されます。関数名、関数が呼び出された回数、包括時間、および排他時間も表示されます。包括時間は、呼び出した他の関数で要した時間を含めた、関数内で費やされた時間です。排他時間は、呼び出した他の関数で要した時間を除いた、関数内で費やされた時間です。

プロファイラによって収集された情報を使用して、Web サイトコードに存在する可能性があるボトルネックを見つけることができます。効率的に実行されていないコードやアルゴリズムを検出して再構築することにより、Windows Internet Explorer で Web ページのレンダリングにかかる時間が短縮されます。