使用Compat Inspector快速定位Internet Explorer相容性問題

Compat Inspector介紹

Compat Inspector是一個基於JavaScript的，用於快速分析網站在新版本Internet Explorer中相容性問題的，自動化掃描工具。

不同於其他大而全的相容性掃描工具，它的檢測規則基於實踐中發現總結的各種相容性問題，因此能獲得更有針對性的檢測報告。為了加快網站向現代瀏覽器遷移的速度，在新版本Internet  Explorer的開發過程中，許多Internet Explorer產品組的工程師為Compat Inspector工具編寫了富有針對性的高質量測試案例。

同時Compat Inspector還能提供互動式的問題定位支援，使得開發測試人員可以快速高效地定位相容性問題，而無需遍歷文件，或是複查整個網站的程式碼。

值得注意的是，Compat Inspector的設計基於幫助網站向IE 9，10，11標準模式遷移——而不是為了測試網站在新版本Internet Explorer中繼續以傳統相容模式執行的能力。它的測試案例基於標準模式與相容模式的差異而建立。

啟用Compat Inspector

要使用Compat Inspector，需要在待測試網頁的其他所有指令碼內容之前，新增下面的指令碼標籤

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

如果工作正常，Compat Inspector會在網頁的右上角放置如下的狀態列。點選該狀態列可以獲得相應的詳細檢測報告資訊。

更多的時候，我們期望測試過程中能夠避免對既有程式碼的修改。此時可以考慮採用Fiddler工具向測試頁面中自動注入上面的指令碼，實現與手工新增相同的效果。具體步驟如下：

1.  下載並安裝Fiddler工具

2. 開啟目錄當前使用者的Documents\Fiddler2\Scripts目錄中的CustomRules.js

3.按照示例中的說明將程式碼新增進CustomRules.js：

…

   static function OnBeforeResponse(oSession: Session) {

          InjectInspectorScript(oSession);

  

…

                public static RulesOption("Use Compat Inspector")

       var m_UseCompatInspector: boolean = false;

       static function InjectInspectorScript(oSession: Session)

       {

              if(!m_UseCompatInspector) return;

             

              // Ensure we only inject into HTML

              if (oSession.url.EndsWith(".js")) return;

       …

4.如果新增正確，此時就可以在Fiddler中見到下列的選單項。

勾選Use Compat Inspector並確保Fiddler處於Capturing狀態。

5. 此時重新整理頁面，Internet Explorer就會獲得經由Fiddler修改的，注入了Compat Inspector指令碼的網頁內容。

使用Verify勾選項

如果點選網頁右上角的Compat Inspector狀態列，就會看到詳細的測試報告。大多數的測試報告專案提供了Verify勾選項，以幫助使用者互動地驗證問題。

例如下面的報告專案檢測到當前網頁使用了navigator.userAgent來檢查瀏覽器的型別。通常這是不可靠的檢測機制，因為即使同樣是Internet Explorer，不同的版本也會支援不同的功能。更加建議的方式是基於功能的檢測機制。

當勾選Verify並重新整理頁面後，Compat Inspector會讓navigator.userAgent返回不同的結果。如果網頁確實不依賴該返回值，則網頁應該依然能夠正常顯示。例如起初指令碼的輸出如下：

當勾選Verify並重新整理頁面後輸出如下：

使用Debug勾選項

同樣對於上面的檢測報告專案，用下面的步驟可以暴露出網頁中呼叫navigator.userAgent的程式碼位置：

1.       勾選Debug

2.       開啟Internet Explorer F12工具欄，切換到程式碼除錯標籤

3.       重新整理頁面。程式碼執行會停留在由Compat Inspect注入的斷點處

4.       此時在Call Stack中雙擊緊隨inspectorFunction的函式，就能看到網頁中對應的程式碼

Compat Inspector測試案例介紹

Compat Inspector提供了數十種測試案例。點選檢測報告的Tests標籤可以看到完整的案例列表及其對應的說明。如果要禁用某項規則，也可以移除相應規則前的勾選。