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

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

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 ページのレンダリングにかかる時間が短縮されます。

表示: