# 介紹好用工具：Compat Inspector ( 驗證網頁在 IE 的相容性 )

我在前天 [2012 微軟開發者大會](http://www.microsoft.com/taiwan/events/developerday/default.aspx) (2012 Microsoft Developer Day) 演講的主題是 [HTML5 開發技術於 WIN8 及 IE10 上的應用](http://docs.com/LZLG)，為此演講我準備了不少內容，總覺準備的剛剛好，而且覺得少講一點都不行，前一天在公司內部排練 (Rehearsal) 時講了 90 分鐘左右才講完，但此次演講只有 50 分鐘而已，因此必須刪除部分內容才能準時講完，而刪除的內容就是很棒的 Compat Inspector 工具，因為我覺得這工具寫成文章比現場演說來的容易學習，就來看看這個神奇的工具如何檢測你的現有網站吧。

Compat Inspector 是一套由 JavaScript 寫成的測試工具，就像載入一般的 JavaScript 檔案一樣，把一個 inspector.js 檔案載入到現有的網頁中即可生效，此測試工具的操作畫面就直接整合在網頁的右上角，如下圖所示：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/040d400c10b1e94b5815-image_1537.png)

載入之後就跟平常一樣使用原本網站的功能跟網頁進行互動，這過程中瀏覽器會執行相關頁面中的 JavaScript 程式碼，而在執行的過程中 Compat Inspector 會對你執行過的 JavaScript 程式直接進行分析，只要有執行到 Compat Inspector 認為有問題的程式碼，其畫面右上角的計數器就會不斷往上加，而該計數器有三種顏色，分別代表的意思如下：

-   **紅色**：代表你的網頁執行到一個較為嚴重的錯誤，應該立即修復。
-   **黃色**：代表你的網頁執行到一個潛在的程式碼錯誤，屬於警告的性質，建議你進一步修正程式。
-   **藍色**：代表你的網頁執行到一個值得被提醒的資訊。例如你正在使用舊版的 jQuery 函式庫。

基本上它的運作原理如下：

1.  這個 inspector.js 必須是網頁中第一個被載入的 JavaScript 檔案，這樣他才能分析後續執行的 JS

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

1.  在網頁運作的過程中 Compat Inspector 會觀察使用者與瀏覽器之間的所有互動，當遇到已知的潛在問題時會自動整理並回報到 Compat Inspector 工具中，這些訊息預設是隱藏的，當你點擊工具的計數器後分析結果就會被顯示出來，其畫面如下，若要關閉此畫面只要點選左上角【向右箭頭】按鈕即可回到原本網頁的畫面：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/443971b693c53010047e-image_1538.png)

請注意：使用此工具時必須使用支援 HTML5 的瀏覽器，但 Compat Inspector 主要還是設計給 IE9 與 IE10 瀏覽器用的，因此還是建議使用 IE9 或 IE10 瀏覽器來開啟網頁進行測試，這樣可以獲得比較準確的執行結果。除此之外的另一個重點是，網頁必須呈現在【IE9 標準模式】或【IE10 標準模式】之下 (不要進入 Quirk 模式)，否則就會出現如下圖的提示：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/40c561efbcc51bc3b2b0-image_1539.png)

開始使用這套工具很簡單，但如何閱讀檢測報告才是真正的精華之處，我們就以 Compat Inspector 網站上的範例來做說明，先來看看其中一個錯誤報告的例子，讓你感受一下 Compat Inspector 的威力所在。

這個網頁打開後，你會發現一個奇怪的選單，所有子選單都被開啟了，當然，這是一個錯誤，而且 Compat Inspector 也幫我們偵測了出來，我們先來看一下這個選單的畫面：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/13dae6051e6d9113b52a-image_1540.png)

接著我們點選網頁右上角的 Compat Inspector 計數器開啟檢測報告：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/1e1d8a4aa2d2edb4905d-image_1541.png)

其中這一個標為紅色的錯誤提到，網頁中撰寫 document.write 動態輸出 HTML 內容到網頁上時，不可以將 document.write 物件快取成一個變數然後再用此變數來執行 write 方法，這種寫法已經不被 IE9 與之後的 IE 版本支援，而且其他瀏覽器也不支援這種寫法，因此建議改善，而下方的 Resolution 就是提供解決方案的參考資料。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/54fcd5e672abdc32e9ac-image_1542.png)

不過上圖包含了兩個核取按鈕 (Checkbox)，當你將滑鼠移至核取按鈕上方即可查看該核取項目的說明，這是個非常神奇的功能!

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/fd71dc977e8f3d1e5ddc-image_1543.png)

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/99e3aaa98b4ec7cda5db-image_1544.png)

首先，當你勾選 **Verify** 之後，Compat Inspector 就會自動的幫你修復這個問題，並讓你進一步作驗證，驗證的方法就是直接重新整理網頁 ( 按下 F5 功能鍵重新整理網頁 )，這時你會發現錯誤已經被修正：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/75b5cb3319462f9fb672-image_1545.png)

此時你會發現網頁上的選單可以正常運作了，也代表 Compat Inspector 已驗證這個錯誤可以被修正：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/a4528e4b7061b7f69969-image_1546.png)

OK！現在的確透過 Compat Inspector 幫我們修正了這個網頁錯誤，但最終我們還是要手動修正這個錯誤才行啊！我們一份網頁裡所載入的 JavaScript 也許非常多，在茫茫大海裡我要到哪裡找出這段有問題的程式碼呢？這時，就是勾選 Debug 核取項目的時刻！但因為你已經勾選了 **Verify** 項目，所以你必須先取消勾選 **Verify** 項目，並重新整理網頁才能再次看到 Debug 核取項目。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/f9c0e4433c378c33d172-image_1547.png)

重整網頁之後，我們勾選 Debug 核取項目：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/3f75123d769092abe114-image_1548.png)

勾選 Debug 選項之後，此時請先不要重新整理網頁，而是按下 **F12** 功能鍵開啟 **IE 開發人員工具**，切換到【指令碼】頁籤後點擊【開始偵錯】按鈕，開啟之後回到網頁並按下 F5 重新整理頁面。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/ec95e049374db3c8663e-image_1549.png)

重新整理網頁後，畫面會自動停在一個中斷點上，這是 Compat Inspector 刻意幫你加上了，目的是為了幫助你快速找到真正發生問題的程式碼在甚麼位置!

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/2374da494c7ec2a5f98a-image_1550.png)

此時有問題的程式碼還沒找到，你必須切換到【呼叫堆疊】頁籤，並且往前尋找呼叫到這個 function 的前一個進入點，如下圖所示，也就是在 Demo.js 的第 103 行的地方，你可以用滑鼠左鍵雙擊這一項可以自動跳躍到該程式碼的位置：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/23454ee3bdce17235c61-image_1551.png)

很快的我們便抓出真正的兇手，也就是引發這個錯誤的實際位置，找到正確的檔案名稱與位置後，你就可以很輕易的依照 Compat Inspector 上的建議修正這段程式碼，你說有沒有很方便呢！^\_^

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/844ec67fc957e1a29504-image_1552.png)

另一種常見的資訊提示就是網頁載入了舊版的 jQuery 套件，當你按下 Verify 之後，當網頁重新整理之後會自動改載入 jQuery 最新版本，此時你便可對該網頁進行測試，看看在載入最新版 jQuery 的情況下網頁上的 JavaScript 是否會發生錯誤，如果完全不會有錯誤的話，便可放心地將 jQuery 直接升級到最新版！

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/71a447e2cb26c1e92017-image_1553.png)

*備註：**Compat Inspector* *還能檢測 [Dojo](http://dojotoolkit.org/), [GWT](https://developers.google.com/web-toolkit/), [jQuery UI](http://jqueryui.com/), [Modernizr](http://modernizr.com/), [MooTools](http://mootools.net/), [Prototype](http://www.prototypejs.org/) 與 [script.aculo.us](http://script.aculo.us/) 等其他知名的 JavaScript 框架。*

然而，這個 Compat Inspector 工具畢竟是測試用途，如果網站已經上線，總不能在正式機上加入這個檢測工具吧?! 如果我們要針對正式機上的網頁進行相容性檢測怎麼辦呢? 還好在 Compat Inspector User Guide 網頁有教我們怎麼修改/擴充你的 [Fiddler](http://www.fiddler2.com/fiddler2/) 工具，讓 [Fiddler](http://www.fiddler2.com/fiddler2/) 幫我們自動在任意網頁上載入 inspector.js 的神奇功能。

由於 [Fiddler](http://www.fiddler2.com/fiddler2/) 是以 Proxy 的方式運作，所有流經 Fiddler 的 HTTP 封包都是可以被修改的，所以我們只要自訂 Fiddler 的 **自訂規則** (Customize Rules)，就能輕鬆做到在任意頁面自動注入 inspector.js 檔案，讓我們完全不用修改伺服器上的檔案的情況下，就能輕鬆使用 Compat Inspector 幫我們測試任意網頁!

首先我先示範設定好之後的使用方法：

1.  開啟 [Fiddler](http://www.fiddler2.com/fiddler2/)
2.  點開 Rules 選單，並選取 Use Compat Inspector 選項 ( 此選項要設定正確後才會出現 )  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/5e18d47fa4fc134c5319-image_1554.png)
3.  開啟任意網頁，網頁的右上角即會出現 Compat Inspector 工具!

接著我們來看看如何修改 Fiddler 的自訂規則：

1.  開啟 [Fiddler](http://www.fiddler2.com/fiddler2/)
2.  點開 Rules 選單，並選取 Customize Rules 選項 ( 此時會開啟 Notepad 記事本編輯該規則 )  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/58501685010b01e82673-image_1555.png)
3.  我們開啟 http://ie.microsoft.com/testdrive/html5/compatinspector/help/snippet.txt 這份文件，依照該文件的說明將程式碼複製貼上到 Fiddler Rules 檔案中。  
    **Snippet 1 示意圖：**  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/9e7a905fe11f5ccd3930-image_1556.png)  
    **Snippet 2 示意圖：請將這一長串程式碼貼上到此檔案最後一個 } 右大括弧之前!!**  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/4d8bde04c75c90d5591f-image_1557.png)
4.  按下 Ctrl + S 儲存該檔案即設定完成!!

**相關連結**

-   Compat Inspector
-   Compat Inspector User Guide
-   [2012 微軟開發者大會](http://www.microsoft.com/taiwan/events/developerday/default.aspx) (2012 Microsoft Developer Day)

-   備註: [2012 微軟開發者大會](http://www.microsoft.com/taiwan/events/developerday/default.aspx)還有**高雄場**與**台中場**喔，歡迎中南部的鄉親多多捧場喔! ^\_^