IE9 Compat Inspector

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。 

【元記事】IE9 Compat Inspector (2011/4/28 12:46 AM)

IE9 がリリースされました (英語)。IE に対して他のブラウザーと同じマークアップを使って、サイトが IE9 標準モードで正常に動作することを確認してみましょう。先日には、IE9 に向けてのサイトの準備を説明するブログ (英語) も掲載されました。各自のサイトに影響する可能性のある変更の一覧については、Internet Explorer 9 互換性ガイドを参照してください。また、変更点をさらに詳細に知りたい場合は、Internet Explorer 9 開発者ガイドを参照してください。この記事では、サイトの準備を促進する新しいリソースである Compat Inspector (互換性テスト ツール) を紹介します。

Compat Inspector

Compat Inspector は、実行中にサイトを分析する JavaScript ベースのテスト ツールです。これは、標準モードで問題を引き起こす操作のパターンを報告します。これを使用すれば、大量の資料の内容を覚えていなくても、またサイトのコード全体を検索しなくても、簡単に問題を特定することができます。Compat Inspector は、IE9 の開発過程で、さまざまなサイトに共通する問題を迅速に発見できるようにすることを目的に作成されました。この作成においては、IE チームの多くのメンバーから Compat Inspector のルールを構成する数々のテスト ケースが提供されました。これらのテスト ケースはすべて公開されています。各自のサイトでこのツールを使用する前に、まずは Compat Inspector Test Drive (英語) をお試しください。

Compat Inspector は、サイトを IE9 に移行し、従来のモードではなく IE9 標準モードで実行することを支援するために設計されています。一部の問題に関しては、上記のガイドも参照してください。最初に Compat Inspector を使用し、問題が検出されない場合はドキュメントに戻るという方法をお勧めします。

使用方法

Compat Inspector を使用するには、テスト対象の各ページで、他のすべてのスクリプトの前に次のスクリプトを追加します。

<script src="https://ie.microsoft.com/testdrive/HTML5/CompatInspector/inspector.js"></script>

メモ: Fiddler (英語) がある場合は、このスニペットを各自の FiddlerScript (英語) に追加することで、アクセスするすべてのページに Compat Inspector を自動的に読み込むことができます (これはページでフレームを使用している場合、特に便利です)。FiddlerScript Editor 拡張機能 (英語) をインストールしていない場合は、インストールすることをお勧めします。

上のスクリプトを適切な位置に配置したら、IE9 でページを開き、Compat Inspector の使用を開始します。正常に動作しないことがわかっている操作を明示的にテストしてみます (実行したコードのみが分析されます)。Compat Inspector は、検出された問題に関連するすべてのエラーと警告の合計数を保持します。ページの右上隅の概要ビューに、次のような結果が表示されます。

このビューをクリックして展開すると、検出された各問題に関する詳細情報と、関連資料へのリンクが表示されます。

また、ほとんどのエラーと警告には、[Verify] と [Debug] の 2 つの追加アクションが用意されており、さらに詳細に調査できます。

"Verify" ワークフロー

一部のテスト ケースには、従来の動作をエミュレートする検証ツール ([Verify]) が組み込まれています。これにより、コードを変更する前に問題の根本原因を確認できます。

前提条件: Compat Inspector が詳細情報ビューで開かれており、[Verify] という名前のチェック ボックスを含むエラーまたは警告メッセージが表示されていること。

1. 確認対象の問題の [Verify] チェック ボックスをクリックします。
   
2. ページを更新します (検証ツールが有効であることを示す通知が表示されます)。
   
3. 元のエラーまたは警告の原因となった手順を繰り返します。
4. 問題がまだ発生する場合、
   1. エラーまたは警告メッセージがまだ表示される場合は、残りの各メッセージに対して手順 1 ～ 4 を繰り返します。
   2. 上記を実施できない場合は、Compat Inspector では問題を完全には特定できません。他のヘルプ情報について、IE9 の資料を参照してください。
5. 問題が発生しなくなった場合は、問題の根本原因が特定されました。
   1. すべての [Verify] チェック ボックスをオフにします。
      
   2. ページを更新します。
   3. 下の [Debug] ワークフローに従って、コード内で各メッセージの原因となっている場所を見つけます。
   4. 表示されるエラーまたは警告のメッセージの手順に従って、問題を解決します。
   5. メモ: 疑わしいコードの実行が、"IE だったら" というような条件で制御されていないかも確認します。通常、IE9 は、他の各種最新ブラウザーと同じコードを提供されたときに最も良好に動作します。

 

"Debug" ワークフロー

Compat Inspector では、デバッグ機能 ([Debug]) により、問題のあるコードの場所を特定することもできます。

前提条件: Compat Inspector が詳細情報ビューで開かれており、[Debug] という名前のチェック ボックスを含むエラーまたは警告メッセージが表示されていること。

1. 調査対象の問題の [Debug] チェック ボックスをクリックします。
   
2. F12 キーを押して開発者ツールを表示します。
   
3. [スクリプト] タブに切り替えます。
   
4. [デバッグ開始] をクリックします。
   
5. 元のエラーまたは警告の原因となった手順を繰り返します (これにより、スクリプト デバッガーが起動します)。
   
6. F12 開発者ツールの右側にある [コール スタック] サブタブに切り替えます。
   
7. コール スタック内で強調表示されたエントリの下に表示されているエントリをダブルクリックします。
   
8. F12 開発者ツールの左側を調べて、エラーまたは警告の元になったコードを確認します。
   

 

Compat Inspector のしくみ

Compat Inspector は、IE9 で導入された機能を使用します。Compat Inspector は、その中核部分で ECMAScript 第 5 版 (英語) の getter/setter を使用してネイティブ API をオーバーライドし、ブラウザーが WebIDL (英語) に従って API を正しく公開していることに依存します。Compat Inspector は、これらのオーバーライドを使用して、ページとネイティブ プラットフォームの間のやり取りを追跡します。これにより、Compat Inspector は、問題コードが実行される実行時に問題を報告することができます。

Compat Inspector のインフラストラクチャは、この他の部分でも、必要に応じてさまざまな新機能を使用しています。たとえば、DOM Level 3 Core API、DOM Level 3 イベント API (英語)、角を丸くする CSS3 border-radius (英語) などがあります。また、Compat Inspector は、HTML5 ローカル ストレージ、HTML5 クロス ドキュメント メッセージング (英語)、ネイティブ JSON サポート (英語)、セレクター API などの IE8 で導入された機能にも依存します。

サイトが正常に動作するようになったら

公開前に、すべてのページから Compat Inspector スクリプトを削除します。Compat Inspector はテスト ツールであり、本番稼働環境で使用すべきではありません。運用開始後も、IE ブログを継続的にご覧ください。新しいテスト ケースが提供される可能性があります。

— Tony Ross、プログラム マネージャー、Internet Explorer