前言

為了讓網站能夠給客戶與使用者更美好的使用經驗，網頁開發人員總是想盡辦法加強瀏覽器的相容性。然而，進行除錯的過程卻是狀況百出，原先在開發者的電腦中順利檢視的頁面，到了使用者手上各種現代瀏覽器(Modern Browsers)的呈現效果卻是參差錯落，呈現效果並不符合當初的規劃。實務經驗上，這些多瀏覽器相容性問題的修正過程繁瑣細微，過程之繁重經常受到忽視，乍看之下僅僅是多了幾套測試環境，但若要確保都能執行順利，測試過程卻是數倍的工作量，就會讓開發時程受到嚴重的影響。

本文提供了網頁前端設計師常用的偵錯與除錯方法，並分享了微軟提供的雲端網站自動分析工具的使用經驗，希望能對解決瀏覽器前端程式相容性相關的疑難雜症有所幫助。

案例分析與改善方法

一、擺脫IE only魔咒 – Script方面的改善

「IE限定」的網站已經日漸成為過去式，根據StatCounter.com統計全球2014 Q1的數據顯示(註1)，Chrome的市佔率達到43.73%，已經打敗IE的22.68%，Firefox是18.95%、而Safari是9.77%，如圖一。這表示台灣瀏覽器使用上雖然IE的使用率雖是大宗，但全球趨勢上已經是四分天下。為了因應雲端服務使用率的快速成長，針對四大瀏覽器的支援已經是刻不容緩。新的網站系統通常都以能夠接受各種瀏覽器來訪問網站為目標，針對客戶族群使用的瀏覽器以確保能夠網站服務能夠正常使用。儘管如此，使用者或測試人員還是時常可以找到某個網站頁面功能失效，這表示開發過程中還是很容易忽略最基本的相容原則。



為了解決「Script程式」的問題，我們可以先建立前端程式的撰寫規範，以進行同中求異、規範前端程式的共有寫法，再利用瀏覽器偵錯模式進行偵錯。以程式規範來說，開發團隊規範使用一套共用方法來取得使用者的環境資訊，並使用一套UI元件來實現各種頁面的控制項。

控制項元件的共用寫法完成後，為了檢測相容性，可以在各種瀏覽器上測試是否發生Script錯誤。可以使用瀏覽器的主控台(Console)來追蹤錯誤，IE或Chrome按下F12來開啟瀏覽器的偵錯模式，並點選「主控台/Console」來查看是否有錯誤訊息，如圖二。



以此範例而言，出現了「Cannot read property 'offsetHeight'」的訊息，我們就可以初步推測此控制項在初始化寬高的部分發生了問題，導致網站無法正確呈現出來；「Failed to load resource」的訊息也透露出缺少檔案的情況，此時要檢查環境是否有遺漏檔案的情形，修正後再重新檢測一次即可。

某些舊版網站有使用到VBScript程式，若要相容於新版瀏覽器，此類程式只能設法改寫，現代瀏覽器目前都不支援VBScript了。即使是微軟自己開發的IE瀏覽器，從IE11版本開始也不再支援VBScript(註2)，建議的解決方法是改寫VBScript為JavaScript程式。除了人工轉換之外，目前比較建議使用ScriptConverter(註3)，由於ScriptConverter提供了線上轉換VBScript為JavaScript的功能，不必再下載其他程式，只要根據轉換後的程式修正邏輯或語法錯誤的部分，通常問題就能夠解決，如圖三。如果有些比較新的功能難以實現，且逐步轉換又要耗費許多時間，整個平台進行升級也許是更有效率的做法。



另一方面，由於目前比較主流的瀏覽器內的JavaScript解析器是按照國際標準ECMAScript第五版的實作，因此，一些舊版瀏覽器並不支援一些新的標準。因此，我們可以參考ECMAScript V5的相容性表格(註4)，如圖四，我們可以知道那些Javascript的功能在舊版瀏覽器並不支援、新版的支援程度為何。

關於Javascript支援程度的差異，我們可以用IE7、IE11為例：IE11可以透過Date.now()取得目前時間，而IE7只能使用(new Date).valueOf()的方式取得。IE7的陣列不支援forEach()來逐一取值；而IE11則可以支援。類似的情況在JavaScript的開發上會非常頻繁，要採取何種相容程度設定，則要按照網站規劃時的支援度來決定，若定義的模糊不清、由於解析器的規範可能日新月異，舊的寫法不一定會再新的開發環境中相容。建議開發人員可以逐一參考此相容性表格的內容建議，並制定清楚的寫法在組織/團隊的程式撰寫規則中。有興趣預覽新版的ECMAScript第六版的規範，也可以到ECMAScript第六版比較表(註5)的網頁瀏覽。



二、網頁排版必備 - 快速測試CSS的相容性

HTML5的新特性中，像是＜center＞(置中對齊)、＜font＞(文字尺寸、樣式設定)等標籤都已經不再支援，關於版面呈現的部分，新開發的網頁都已經將排版的網頁標籤改以CSS管理了。因此，CSS相容測試在開發的過程當中，也是不可或缺的重要成員之一。

關於CSS規則的檢測雖然已經W3C官方的CSS Validation Service，但這僅僅只是確認網站的內容是否符合規範而已。因此，目前開發中還經常會使用CSS LINT這個工具來做程式的靜態分析，顧名思義，LINT有衣服上的毛球這樣的意思，此程式可以幫助我們找出CSS中的毛球、也就是容易出錯的地方，讓我們的程式碼能夠去蕪存菁，降低出錯的機會。

CSS LINT提供了網頁版的介面(http://csslint.net/)，如圖五。介面非常簡單易用，可以直接貼上CSS程式碼，「按下LINT!」，即可直接進行快速的分析。結果會顯示目前的錯誤與警告的數量、與錯誤與警告對應的說明與改善建議。以圖六為例，發現了有63筆的警告訊息，在底下結果報表的Description欄位可看到改善建議，例如：box-sizing屬性不支援IE6、IE7，所以不建議使用，被歸類為一種warning。

有些工具也有提供類似CSS檢測的功能，如VisualStudio的CssCop或是Firefox的Dust-Me Selectors，但由於對開發環境有所限定，而CSS LINT因為有提供Open Source的原始碼，對於規則的定義也很詳細，因此實務上才比較優先考慮使用它。





CSS LINT 的檢查規範看似簡單卻不失嚴謹，這些規範主要分為：Possible Errors、Compatibility、Performance、Maintainability & Duplication、Accessibility、OOCSS等幾大項目，網站的介面選項有提供開關功能讓使用者決定要不要進行這方面的驗證。以下將逐一解釋這幾種檢查項目，能了解CSS LINT從哪些層面幫助我們篩選出比較容易出錯的程式。

Possible Errors標準可偵測CSS的潛在錯誤，例如設定了一個不存在的屬性值，會導致對應的設定沒有出現預期應有的效果。CSS的類別屬性值是空的、或是重複設定了屬性也是此分類的偵測範圍。

Compatibility標準則主要針對一些瀏覽器相容性方面的部分做提醒，例如box-sizing此屬性是在舊版瀏覽器不支援的。瀏覽器特殊前綴詞方面，像是「-moz、-ms、-o、-webkit」此類只有特定瀏覽器支援的特效也會特別被偵測出來，程式會要求在撰寫時有用到特效(例如漸層效果)時「要把每一種特效的語句都寫上」。相對的，類似「-webkit-border-radius」這種只有單一瀏覽器支援的屬性，則會提示應該使用標準的「border-radius」。

Performance標準會針對影響性能的部分做檢測，例如一個網站使用多種Font(字型)屬性值時，極有可能會影響到性能。CSS的選擇器(如：「*」、「*=」、「|=」、「^=」、「~=」、「$=」等)，此類比較類似正規表示式的選擇器會占用比較多效能，因此也會被列入禁止範圍。

Maintainability & Duplication標準是針對可維護性和防止混用的語法做檢測。例如使用了過多的Float(浮動框架)屬性，會影響到畫面排版、呈現的效能。以往，有些前端設計師會使用到「!important」搭配一些非正規寫法(如：*、*+html)來進行一些CSS Hack，以針對特定瀏覽器、使用特殊寫法進行處理，這種作法雖然可以快速解決特定瀏覽器的問題，但會降低CSS程式的可維護性，因此也會被偵測出來。

Accessibility標準目前提供了outline的檢測，outline屬性可以在網頁元素外繪製輪廓線以確認目前的焦點位置，此規則會禁止CSS將outline設為none，否則一些使用者無法透過輪廓線來確認目前網頁的焦點在哪裡。

OOCSS標準是針對物件導向的CSS概念做規範。針對Headings有設定兩個規則，一是禁止重複設定H1~H6此類Headings標籤，以免造成混淆。二是H1~H6禁止和其他CSS語法一起使用，以避免H1~H6的排版標準不一。

三、跨瀏覽器的相容性檢測 – 整合性雲端測試

瀏覽器大戰的競爭十分激烈，微軟IE的領地，也被Chrome、Firefox、Safari等瀏覽器瓜分。分家眾多的情況下，測試過程中要安裝非常多測試環境，測試環境的數量還要乘上使用者的作業系統數量，也要安排測試人員在各種版本的瀏覽器上開啟頁面，耗費相當大的時間與人力。在一個先進的QA Team，我們可以透過雲端測試工具，節省了設定環境的時間，也不必安裝指定版本的瀏覽器，能直接地幫助我們快速進行初步的分析，以判斷目前下一步該如何繼續進行。

以免費且容易入門的工具來說，微軟的「Modern.ie」瀏覽器相容器測試工具可以做為一個參考，該工具結合了常見網頁程式問題的掃描工具、以及與BrowserStack合作的虛擬機多平台測試服務、和Compat Inspector程式寫法掃描分析服務三大部分。

常見程式問題掃描的結果可參考圖7，微軟在IE系列的瀏覽器方面，可根據較常見的問題在相容性、架構、程式庫、網站標準等方面提供改善建議。在跨瀏覽器方面，還提供了幾種分析建議，如圖8，我們可以根據各個項目分析結果初步判斷哪方面會再需要加強改善，Modern.ie提供了包括以下所述的網站檢測項目：

• CSS是否使用了容易混淆、不同瀏覽器容易判斷錯誤的前置詞。



• 檢測是否使用了外掛程式(Plug-ins)，例如：ActiveX、Adobe Flash。



• 是否有使用響應式web設計(responsive web design)，這種設計模式可以讓網頁根據裝置的大小做各種不同的調整，以符合版面大小來顯示內容。



• 是否有使用到偵測瀏覽器種類與版本，根據瀏覽器來判斷網站的顯示模式。



• 圖片是否最佳化，檔案太大的圖片會耗費過量頻寬。



• 是否使用了HTML5的表單input欄位型態，在HTML5新增了email、range、number、時間(date,month,week,time,datetime)等型態。標示了型態的輸入區塊，在行動裝置中瀏覽器會解析為方便進行輸入的模式(例如數字鍵盤、時間選取等)。



• 網頁是否利用HTML5的要素：prefetch（預讀取）和 prerender（預渲染）。



• 內容是否經過壓縮，以節省傳輸量。

BrowserStack是一種多平台測試服務，為了進行多網站測試效果的評估，以台灣YAHOO網站為例，執行基本的多平台網站截圖測試。執行結果如圖9，點選圖片後可以放大，以檢視頁面初步的正確性。以本次實測結果，網頁在各種手機或行動裝置上面的網頁基本上都可以正確呈現，執行時iphone的部分因為讀取超時而沒有執行成功，但整套截圖還是可以作為一個參考，能夠檢核不同的環境下檢視網站的效果是否正常。若需要更多微調選項，可以選擇付費購買完整服務來幫助測試(註6)，進階的功能會比較類似租用一組虛擬主機的方式，但提供更便捷的工具來進行測試(瀏覽器外掛程式等)。類似的服務還有Ghostlab、SauceLabs、Browsershots、Browsersnap、Browserling等。



Modern.ie也提供了「Compat Inspector」的IE相容性檢測檢測服務，此服務是採用SauceLabs提供的虛擬裝置來執行，並嵌入了Compat Inspector的執行組件，自動分析目前網站的分析結果，並在網站右上角顯示一個類似計數器的介面當中，如圖十。紅色的部分表示網站有一個比較嚴重的錯誤；黃色的部分表示網站可能會有潛在問題，建議可以進行修復。藍色的部分則是提示使用者一些提示訊息，例如使用的組件版本已經有新版本。詳細報告則會顯示在一個表格當中，可以得知目前此工具偵測到的相容性問題，如圖十一。值得一提的是，此工具可以到微軟網站下載(註7)，可以自己加入到自己的開發環境來進行IE的相容性檢測，與Modern.ie提供的版本有點差異，有支援額外的驗證和偵錯功能，手動套用時須點選計數器介面才會把報告的進一步資訊顯示出來。





總結

不論是網站版本升級、網站相容性優化、網站效能優化、或是正在開發中的網站，都會需要進行相容性檢測。網頁前端程式方面，我們使用瀏覽器偵錯工具就能知道瀏覽器執行到哪一步驟出錯，直接根據找到的相關功能區段著手。跨瀏覽器方面，也可以透過BrowserStack或類似的工具來協助建立一組多平台的預覽結果，不必耗費大量精力，就可以先針對各種瀏覽器的呈現效果有所了解。在專案的開發過程中，若能善用各種偵錯工具，就能有效率的分析問題，根據工具收集到的各種線索，找出最佳的解決方案。

參考資料

註1.網頁瀏覽器的使用分佈 - 此統計數據來源為StatCounter.com。
　　(StatCounter.com的統計方式以頁面瀏覽量為主)
　　(2014年1月至3月全球的統計數據)


註2.在 IE11 邊緣模式中不再支援網際網路區域的 VBScript

註3.ScriptConverter為一種VBScript線上程式轉換工具，網址為http://slingfive.com/pages/code/scriptConverter/demo.html
主頁面有介紹，也可以下載到原始碼：
http://slingfive.com/pages/code/scriptConverter/

註4.ECMAScript V5的相容性表格

註5.ECMAScript V6的相容性表格

註6.BrowserStack多平台測試服務網址

註7.Compat Inspector測試工具網址