Internet Explorer 開発者ツールを理解する

[アーティクル]
01/29/2010

Internet Explorer 8 をインストールすると、開発者ツールもインストールされます。 Web サイトの開発者は、このツールを使用して、Microsoft JScript をすばやくデバッグしたり、Internet Explorer に固有の動作を調べたり、新しいデザインのプロトタイプの迅速な作成を繰り返したり、問題に対する解決策をオンザフライで試行したりできます。この記事では、開発者ツールの主要な機能を紹介します。

概要
開始手順
HTML および CSS のデバッグ
- HTML 要素の検査
- CSS のプロパティの検査
- ソースのオンザフライ編集
- 変更の保存
JScript のデバッグ
- デバッガーの開始および停止
- 実行の制御
- 変数の検査
- コールスタックの検査
- デバッガーコンソールの使用
JScript パフォーマンスのプロファイリング
- プロファイラーの開始および停止
- データの表示
- 複数セッションのプロファイリングとデータのエクスポート
コンテンツの検索
ソースの表示
画面要素のアウトライン化
イメージの操作
キャッシュおよび Cookie の制御
Power Tools の使用
ソースの検証
さまざまなブラウザーおよびドキュメントモードでのテスト
- ブラウザーモードのテスト
- ドキュメントモードのテスト
キーボードショートカットの使用
インターフェイスコマンドの参照
関連トピック

概要

開発者の生産性において、優れたツールは重要な役割を果たしますが、多くの Web 開発ツールが存在する一方で、ユーザーのあらゆるタスクで生じるニーズに応えているとは言えません。たとえば、Web サイトの開発者は、JScript をすばやくデバッグしたり、Internet Explorer に固有の動作を調べたり、新しいデザインのプロトタイプの迅速な作成を繰り返したり、問題に対する解決策を試したりしたいと考えています。これらのシナリオおよび類似したシナリオでの開発者の生産性を向上するために、Internet Explorer 8 に含まれる、強力でありながら使いやすいツールは、次のような重要な特長を備えています。

統合により使用が簡単 : Internet Explorer 8 をインストールすると、開発者ツールのインスタンスもインストールされます。このインスタンスを使用して、Internet Explorer 8 を実行しているマシンでデバッグを実行できます。また、ツールは必要なときだけ読み込まれるので、ツールがブラウザーのパフォーマンスに与える影響が制限されます。開発者ツールを使用すると、すべての Internet Explorer のデバッグを有効にしなくても、現在の Internet Explorer プロセスのみのスクリプトデバッグをオンザフライで実行できます。
プラットフォームにビジュアルインターフェイスを提供 : サイトの動作のリバースエンジニアリングを行ったり、デバッグ情報を出力するためにサイトを変更したりしなくても、開発者ツールを使用して、Internet Explorer でどのようにサイトが表示されるかを調べることができます。これにより、ソースの調査が役に立たない動的サイトのデバッグや、一般的な作成ツールでは行うことができない Internet Explorer 固有の動作の調査に費やす時間を短縮できます。
すばやい実験が可能 : 新しいデザインのプロトタイプを作成したり、Internet Explorer の以前のバージョンの修正をテストしたりするとき、通常はソースを編集して保存し、ブラウザーのページを最新の情報に更新するという作業を繰り返します。 Internet Explorer 8 開発者ツールでは、ブラウザー内でサイトを編集し、その変更内容が反映された結果をすぐに見ることができるため、この作業手順が効率化されます。
アプリケーションのパフォーマンスの最適化 : パフォーマンスの問題を識別して修正するという作業は、通常、1 つのシナリオだけに焦点を当てて行うという繰り返しのアプローチになります。 Internet Explorer 8 開発者ツールのスクリプトプロファイラーを使用すると、アプリケーションをテストしている間に実行時間や JScript 関数の呼び出し回数などの統計を収集し、プロファイルレポートを使用してパフォーマンスのボトルネックをすばやく特定して修正できます。

これらの特長を備えた開発者ツールの機能を活用することで、Internet Explorer を使用した開発の生産性が飛躍的に向上します。以降では、これらおよびその他の数多くの機能について詳しく説明します。

開始手順

ツールは簡単に開始できます。 F12 キーを押すか、[ツール] メニューの [開発者ツール] をクリックします。

ツールが開くと、独立したウィンドウ内にツールが表示されます。ツールのそれぞれが Internet Explorer 内の 1 つのタブに対応します。開いているウィンドウの数を減らしたい場合は、[固定] ボタンをクリックするか Ctrl + P キーを押してタブにツールを固定します。

ツールの機能を使用する際に、ツールのインターフェイス全体を表示しなくてもよい場合があります。このような場合は、最小化ボタンをクリックするか、Ctrl + M キーを押して、ツールを固定します。ツールがウィンドウ下部に一列で表示され、コマンドメニューバーだけにアクセスできます。

HTML および CSS のデバッグ

ツールによってブラウザーでの表示が可能になるので、元のソースだけではなく、Internet Explorer 内部に存在するサイトの HTML およびカスケードスタイルシート (CSS) も調査できます。これは、動的サイト、複雑なサイト、Active Server Pages (ASP) や PHP などのフレームワークを使用するサイトで非常に役立ちます。

ツールの [Primary Content] ウィンドウには、サイトのドキュメントオブジェクトモデル (DOM) ツリーが表示され、メモリ内でサイトを表すために Internet Explorer が保持している内容が反映されています。マウスまたはキーボードを使用してツリーを移動できます。ページ上の特定要素のノードの検索は、[クリックで要素を選択] 機能を使用して簡単に行うことができます。この機能を使用してページ上の要素を選択すると、対応するツリーノードがツールによって自動的に選択されますまた、[検索] ボックスを使用しても検索できます。

HTML 要素の検査

DOM ツリーで要素を選択すると、右側の [プロパティ] ウィンドウに要素の詳細が次のように表示されます。

スタイル : [スタイル] を使用すると、選択した要素に適用されているすべてのルールが一覧表示され、CSS デバッグが向上します。ルールは、古いものから順 (最近適用されたものが一番下) に表示されると同時に、別のルールで上書きされたプロパティは取り消し線付きで表示されるので、手動でセレクターの照合を行わなくても、現在の要素に CSS ルールが与える影響をすばやく理解できます。ルールの横のチェックボックスを切り替えれば、簡単に CSS ルールをオンまたはオフにでき、アクションが直ちにページ上に反映されます。
トレーススタイル : このコマンドには、プロパティによるグループスタイル以外、[スタイル] と同じ情報が含まれています。特定のプロパティについての情報を探している場合は、[トレーススタイル] に切り替えます。目的のプロパティを探し、プラス (+) のアイコンをクリックすると、そのプロパティを設定しているすべてのルールのリストが古いものから順に表示されます。
レイアウト : [レイアウト] では、要素のオフセット、高さ、スペースなどのボックスモデル情報が表示されます。要素の配置をデバッグするときは、このコマンドを使用します。
属性 : [属性] では、選択した要素に定義されたすべての属性を検査できます。また、このコマンドでは、選択した要素の属性を編集または追加したり、その要素から属性を削除したりもできます。

さらに詳細に CSS を検査するには、現在のサイトの全 CSS ファイルリストにある [CSS] タブに切り替えます。

CSS のプロパティの検査

[CSS] タブに切り替えると、検査対象の外部 CSS ファイルすべてにアクセスできるようになります。 [Style Sheet Chooser] ボタンをクリックして、スタイルシートを選択します。スタイルプロパティ名または値をクリックすると変更が可能になり、変更内容は直ちに有効になります。

ソースのオンザフライ編集

ツールを使用して検査を行い、必要な情報を収集したら、その情報を使用して直ちに対応することができます。 HTML 属性または CSS プロパティを編集するには、対象をクリックし、新しい値を入力して Enter キーを押します。変更内容はすぐに反映されるので、変更をすばやくテストできます。 HTML では、[編集] ボタンをクリックするとツリー全体が編集可能になり、要素すべてを追加、削除、または編集することもできます。いずれの場合も、開発者ツールにより、ソースを変更しなくてもすばやい編集作業が可能になります。すべての編集作業が終了したら、変更内容を保存します。

変更の保存

ツールで行った編集内容はすべて、サイトの Internet Explorer 内部表現にのみ存在しています。したがって、ページを更新したり、他に移動したりすると、元のサイトに戻ります。しかし、変更内容を保存することが必要な場合もあります。 [HTML] タブおよび [CSS] タブでは、[保存] ボタンをクリックすると、現在の HTML または CSS がそれぞれ 1 つのファイルに保存されます。サイト内で変更した領域だけがソースとは異なるわけではなく、他の部分も異なっていることに注意します。これは、ツールがソース内ではなく Internet Explorer 内に存在するサイトを表示しているためです。誤ってソースを上書きしないように、ツールでは出力がテキストとして保存され、ファイルには行間コメントが追加されます。

HTML および CSS の詳細については、「開発者ツールでの HTML および CSS のデバッグ」 (英語の可能性あり) を参照してください。

JScript のデバッグ

CSS により動的サイトを JScript を使用せずに簡単に作成できるものの、ほとんどの複雑なサイトでは引き続き最低でも数個のスクリプトを必要としています。また、プログラミング言語と同様に、生産性の維持には優れたデバッガーが重要であり、開発者ツールではまさにそのデバッガーを提供しています。

デバッガーの開始および停止

Internet Explorer 8 での JScript のデバッグは簡単です。デバッグするサイトで開発者ツールを開き、[スクリプト] タブに切り替えて [デバッグ開始] をクリックします。デバッグプロセスの開始時に、開発者ツールによってページが最新の情報に更新され、ツールが固定されている場合は固定が解除されます。

デバッグの開始後は、デバッガーで想定されるすべての機能を利用できます。デバッグが完了したら、[デバッグの停止] ボタンをクリックします。デバッガーの実行中、開発者ツールによりスクリプトが強力に制御され、透明性が高められます。

実行の制御

ブレークポイントを設定することにより、指定した箇所で実行を停止できます。行番号をクリックするか、ソースを右クリックして [ブレークポイントの挿入] をクリックします。ブレークポイントは、インライン関数またはイベントハンドラー内に設定できます。また、条件付きブレークポイントも設定できます。

ブレークポイントを設定する箇所がわからない場合は、[すべて中断] をクリックして次の JScript ステートメントが実行される前に実行を停止するか、[エラー時にブレーク] をクリックして Internet Explorer がスクリプトエラーを見つけたときに実行を停止するようにします。実行を停止したら、ステップイン、ステップオーバー、およびステップアウトコマンドを使用して、匿名関数を含むスクリプトを調べます。

変数の検査

コードを調べると、変数の現在の状態を検査するのに役立ちます。 [スクリプト] タブの中の [ローカル] ウィンドウを使用してローカル変数を表示し、[ウォッチ] ウィンドウで変数のカスタムリストを監視します。ソースを右クリックし、[ウォッチ式の追加] をクリックするか、[ウォッチ] ウィンドウに変数名を入力すると、このリストに変数を追加できます。

コールスタックの検査

JScript コードを調べてアプリケーションのデバッグを行うとき、現在のコールスタックの関数を表示できます。コールスタックリストの関数をクリックすると、[Primary Content] ウィンドウにソースコードが表示されます。

デバッガーコンソールの使用

ステートメントをテストするためにソースを編集する代わりに、開発者ツールでは、[コンソール] ウィンドウに JScript ステートメントを入力して実行するだけです。 [複数行モード] をクリックして、同時に実行する複数行を入力します。 Internet Explorer によりコードが直ちに実行されるため、現在のブレークポイントと同じ場所にそのコードを追加した結果をテストできます。コンソールは、デバッグを行っていないときでも使用できます。ページのエラーを簡単に修正するため、コンソールでは console.log を使用してスクリプトエラーメッセージもすべて記録されます。詳細については、「開発者ツールを使用したスクリプトのデバッグ」 (英語の可能性あり) にある「コンソールを使用したコードステートメントの実行」セクションを参照してください。

スクリプトデバッグの詳細については、「開発者ツールを使用したスクリプトのデバッグ」 (英語の可能性あり) を参照してください。

JScript パフォーマンスのプロファイリング

JScript のデバッグによりサイトが正確に動作するようになりますが、JScript プロファイラーを使用すると、パフォーマンスが向上するためサイトを次のレベルに引き上げられます。プロファイラーは、サイトの JScript メソッドおよび文字列連結などの組み込み JScript 関数それぞれでの所要時間についてのデータを提供します。アプリケーションの実行中、好きなときに JScript プロファイラーを開始および停止できるので、興味のある特定シナリオのプロファイルデータを複数収集できます。

プロファイラーの開始および停止

デバッガーと同様に、プロファイラーも簡単に開始できます。 [プロファイラー] タブを開いて [プロファイリングの開始] をクリックしてセッションを開始します。プロファイリングを行うシナリオを実行してから、[プロファイリングの停止] をクリックします。結果のデータを直ちに調べることができます。

データの表示

既定では、データはすべての使用関数が一覧になっている関数ビューに表示されます。 [現在のビュー] ドロップダウンメニューをクリックし、[コールツリー] を選択して呼び出しを行った順番を表すツリーを表示すると、コードパスを調べてホットスポットを見つけることができます。どちらのビューでも、列を追加、削除、整列、並べ替えをして、探している情報を見つけることができます。

プロファイルレポートでは URL および関数の行番号についての情報が提供され、アプリケーション内でのコードの検索に役立ちます。関数名をクリックすると、その関数のソースコードが [スクリプト] タブの [Primary Content] ウィンドウに表示されます。

メモ : ソースコードへの行番号マッピング機能は、スクリプトデバッグが有効になっているときのみ利用できます。スクリプトデバッグの詳細については、「開発者ツールを使用したスクリプトのデバッグ」 (英語の可能性あり) を参照してください。

複数セッションのプロファイリングとデータのエクスポート

[プロファイリングの開始] を再度クリックして、新しいプロファイリングセッションを開始します。 [プロファイリングの停止] をクリックすると、新しいデータが表示されます。以前に行ったプロファイリングセッションのデータを表示するには、ファイルドロップダウンリストをクリックし、別のレポートを選択します。プロファイルレポートは現在の Internet Explorer プロセスに残りますが、[エクスポート] ボタンをクリックしてプロファイルデータを CSV 形式で保存し、後で調査するために他のアプリケーションを使用することができます。

プロファイリングの詳細については、「開発者ツールを使用したスクリプトのプロファイリング」 (英語の可能性あり) を参照してください。

コンテンツの検索

開発者ツールでは、ソースを調査して変更し、オンザフライでテストを行うツールのスイートが提供されています。調査するソースが多数の場合は、検索を早く行うことができれば便利です。開発者ツールで提供される検索ボックスを使用すると、それが実現します。検索ボックスは、現在アクティブになっている [モード] タブの状況に応じて異なります。たとえば、現在 [HTML] タブを表示している場合は、[Primary Content] ウィンドウの DOM に対する検索が行われます。一致したものがすべて強調表示され、最初の一致が選択されます。同様に、[CSS] タブ、[スクリプト] タブ、および [プロファイラー] タブでの検索が可能です。

また、検索ボックスは、[HTML] タブの W3C Selectors API World Wide Web リンク構文もサポートしています。セレクター構文を使用するには、「@」記号を付けて検索を開始します。たとえば、すべての div 要素を探すには、「@div」と入力します。特定の CSS クラス名を持つ div 要素のみを探すには「@div.myClassName」と入力し、そのクラス名を持つすべての要素を探すには「@.myClassName」と入力します。また、ID が定義された要素は、「@#myID」と入力しても検索できます。 CSS セレクターの詳細については、「 CSS セレクターを理解する」 (英語の可能性あり) を参照してください。

メモ : 検索ボックスでセレクター構文を使用する場合、CSS クラス名では大文字と小文字が区別されます。

ソースの表示

Internet Explorer 8 より前のバージョンでは、Web ページ上で右クリックして [ソースの表示] を選択した場合、元のソースのみが表示されました。この方法は引き続き利用できますが、開発者ツールから [表示] メニューを使用すると、表示するソースをさらに詳細に制御できます。 DOM ソースのみを持つ特定の要素を検索するのか、DOM ソースおよび要素に適用されたスタイルを持っているものを検索するのかを選択できます。これにより要素が隔離され、潜在的な問題を見つけるために必要なポイントがはっきりします。また、Internet Explorer で表示されるとおりに Web ページの元のソースまたは DOM ソースを表示することもできます。この表示には、元のソースとスクリプトで挿入されたソースが含まれます。これで、Internet Explorer ブラウザーでの表示が正しく確認できます。

また、[表示] メニューの一部は、リンクレポートを表示するためのオプションでもあります。リンクレポートは、別個のブラウザータブに生成され、ページ上で見つかった全リンクの情報が表示されます。

メモ : 開発者ツールには、ソースを表示するための独自のアプリケーションを選択するオプションが用意されています。このオプションは、[ファイル] メニューの下にあります。

画面要素のアウトライン化

これまで、特定要素の境界線が画面上のどこにあるのか疑問に思ったことはありませんか。その場所を確認するために、要素の境界線を 1 にしなければならなかったことはありませんか。開発者ツールの [アウトライン] メニューを使用すると、ソースを変更しなくても要素のアウトラインをすべて表示できます。メニューには、テーブル、Div 要素、イメージなど、一般的に使用される要素が用意されています。また、アウトライン化する [任意の要素] を追加するためのダイアログも用意されています。さらに、区別しやすいように各要素に色を割り当てることもできます。アウトラインは、オフにするかページを最新の情報に更新するまで表示されています。 [アウトライン] メニューの詳細については、「 Developer 開発者ツールのユーザーインターフェイスリファレンス」 (英語の可能性あり) にある「アウトラインメニュー」セクションを参照してください。

イメージの操作

イメージを操作する場合、開発者ツールには、ファイルサイズ、寸法、パスなどのイメージに関する情報が画面上ですぐに識別できるように、複数のコマンドが用意されています。イメージのレンダリングをオンまたはオフにすることもできます。また、Web ページにある各イメージのイメージレポートを生成するオプションも用意されています。

[キャッシュ] メニューでは、キャッシュと Cookie の設定を制御できます。最新の情報がわかるように、ブラウザーを [常にサーバーから更新する] に設定できます。また、[ブラウザーキャッシュを消去する] または [このドメインのブラウザーキャッシュを消去する] を使用してキャッシュを制御することもできます。

Cookie を操作する場合、マシンに Cookie が書き込まれないように、Cookie を無効にできます。 [Cookie 情報を表示する] をクリックすると、すべての Cookie をすばやく一覧表示できます。また、[セッション Cookie を消去する] または [ドメインの Cookie を消去する] を選択することもできます。

キャッシュと Cookie のどちらの場合も、すばやくアクセスし、ブラウザー環境を厳密に制御できる点で、これらのコマンドが役立ちます。

Power Tools の使用

[ツール] メニューには、Web サイトを操作するための 3 つの Power Tools が用意されています。

"サイズ変更" ツール : このツールは、800x600、1024x768 などの標準サイズにブラウザーウィンドウをすばやくサイズ変更するときに役立つと同時に、[カスタム] ウィンドウサイズを追加することもできます。使用可能なキーボードショートカットは、「開発者ツールのキーボードショートカットリファレンス」 (英語の可能性あり) に掲載されています。
"ルーラーを表示する" ツール : このツールは、ルーラーを画面に表示してオブジェクト間の距離を把握するのに役立ちます。ルーラーは [X/Y 軸に合わせる]、[要素に合わせる]、またはフリーフォームに設定できます。ルーラーはいくつでも表示でき、サイズを変更して好きな場所にドラッグし、再利用もできます。
"カラーピッカーを表示する" ツール : このツールは、色を選択するときに役立ちます。画面上に表示された任意のテキスト、オブジェクト、または背景の上にピッカーを移動すると、16 進数値と共にピッカーの現在位置の色のサンプルが表示されます。色をクリックすると、コードにその値をコピーできます。

ソースの検証

開発作業が完了したら、コードが HTML、CSS、ユーザー補助などのさまざまな基準を満たしていることを確認します。開発者ツールはこれらの役立つリソースを収集し、検証に対するソースのチェックが簡単にできるようにします。実行する検証の種類を選択するか、[複数の検証] セッションの実行を選択します。

さまざまなブラウザーおよびドキュメントモードでのテスト

Internet Explorer 8 には、Internet Explorer 7 としてのページおよびレポートバージョン情報をレンダリングする機能があります。Web 開発者およびエンドユーザーは、この機能を使用してサイトが Internet Explorer 8 用に作成されていなくても引き続き動作するようにできますが、この機能はサイトが Internet Explorer 7 ユーザーにはどのように表示されるのかをテストするためにも使用できます。

ブラウザーモードのテスト

[ブラウザーモード] メニューでは、次の 3 つの重要なプロパティを Internet Explorer が報告する方法を選択できます。

ユーザーエージェント文字列 : 識別を目的として Internet Explorer が Web サーバーに送信する値。
バージョンベクター : 条件付きコメントを評価するときに使用する値。
ドキュメントモード : Internet Explorer が CSS、DOM、および JScript 操作の最新動作を使用しているかどうかを判別するか、互換性のための Internet Explorer の以前のバージョンをエミュレートするときに使用する値。

[ブラウザーモード] には 3 つのオプションあり、それぞれ異なる方法でこれらの値を変更します。

Internet Explorer 7 : このモードでは、Internet Explorer は、Internet Explorer 7 が使用しているのと同じユーザーエージェント、バージョンベクター、およびドキュメントモードを報告します。Internet Explorer 7 ユーザーにはサイトがどのように見えるのかをテストするときは、このモードを使用します。
Internet Explorer 8 : このモードでは、Internet Explorer は、Internet Explorer 8 で使用可能な基準に最も準拠している既定の Internet Explorer 8 の動作に一致するユーザーエージェント、バージョンベクター、およびドキュメントモードを報告します。Internet Explorer 8 ユーザーにはサイトがどのように見えるのかをテストするときは、このモードを使用します。
IE8 互換表示 : このモードでは、Internet Explorer 8 は、Internet Explorer 7 であるかのように、バージョンベクター、ドキュメントモード、およびユーザーエージェント文字列を報告します。ただし、ユーザーエージェント文字列には、ブラウザーが本当に Internet Explorer 8 であることを示すトークンも含まれています。Internet Explorer 8 ユーザーが [互換表示] オプションを選択したときにサイトがどのように見えるのかをテストするときは、このモードを使用します。

ドキュメントモードのテスト

ドキュメントモードは、Internet Explorer がページをどのようにレンダリングするのかを定義しますが、バージョンベクターまたはユーザーエージェント文字列には影響は与えません。ブラウザーモードと一緒にこのオプションを使用することで、サイトに使用するドキュメントモードをすぐにテストできます。 3 つのオプションがあります。

Quirks モード : この動作は、DOCTYPE を持たないドキュメントまたは Quirks DOCTYPE のドキュメントをレンダリングするときの Internet Explorer の動作と一致します。これは Microsoft Internet Explorer 5 の動作および Internet Explorer 6 の Quirks モード動作に似ていると同時に、Internet Explorer 7 の Quirks モードと同じです。
Internet Explorer 7 標準モード : この動作は、厳密な DOCTYPE または不明な DOCTYPE のドキュメントをレンダリングするときの Internet Explorer 7 の動作と一致します。
Internet Explorer 8 標準モード : この動作は、Internet Explorer 8 で使用可能な最新の標準に準拠していて、厳密な DOCTYPE または不明な DOCTYPE のドキュメントをレンダリングするとき、Internet Explorer 8 の既定で使用されるモードです。

ドキュメント互換モードの詳細については、「開発者ツールを使用したブラウザーおよびドキュメント互換モードのテスト」 (英語の可能性あり) を参照してください。

キーボードショートカットの使用

Internet Explorer 8 開発者ツールでは、タスクの実行を簡単にするためのさまざまなキーボードショートカットをサポートしています。開発者ツールを開いたり閉じたりするには F12 キー、ページを最新の情報に更新するには F5 キーなど、標準的な Windows の規則を使用しています。詳細の一覧については、「開発者ツールのキーボードショートカットリファレンス)」 (英語の可能性あり) を参照してください。

インターフェイスコマンドの参照

ここでは、開発者ツールの主要な機能を数多く紹介していますが、使用可能なツールすべてについての詳細な情報は、「開発者ツールのユーザーインターフェイスリファレンス」 (英語の可能性あり) を参照してください。