微軟Modern.IE助力開發(fā)者輕松測試網頁兼容性

2013-4-11 09:30| 發(fā)布者: Archer| 查看: 350| 評論: 0|原作者: Archer

摘要: 過去幾年，微軟針對此類問題進行了多次嘗試。例如，采用系統自動更新讓用戶升級至最新版的IE瀏覽器，以適配更現代化的網頁；在正式發(fā)布前推出平臺預覽（Platform Previews）版本IE瀏覽器，提前了解來自開發(fā)者的反饋 ...

推薦閱讀

過去幾年，微軟針對此類問題進行了多次嘗試。例如，采用系統自動更新讓用戶升級至最新版的IE瀏覽器，以適配更現代化的網頁；在正式發(fā)布前推出平臺預覽（Platform Previews）版本IE瀏覽器，提前了解來自開發(fā)者的反饋；全面支持HTML5和CSS3等現代網頁開發(fā)標準，將前沿性能與觸控功能相結合。但在與眾多Web開發(fā)者進行深度探討后，微軟發(fā)現想要快速地解決瀏覽器兼容問題仍是一個巨大挑戰(zhàn)，于是Modern.IE系列工具站點便應運而生了。微軟開發(fā)平臺及事業(yè)部平臺合作資深經理黃繼佳表示：“Modern.IE系列工具的出現，大大簡化了開發(fā)者的網頁測試工作，提升了網頁優(yōu)化的效率，能讓開發(fā)者將精力放在為用戶創(chuàng)造更加精美的網頁上來?！?br>
Modern.IE系列工具讓針對IE10瀏覽器的Web開發(fā)工作變得更加容易，它的一個重要功能即通過輸入的URL地址掃描網頁中的代碼，并找出所有可能影響瀏覽體驗的常見錯誤。而這些錯誤由三大分類體現：與舊版IE瀏覽器產生的兼容性問題，在多設備、跨平臺上是否能夠正常運行，以及與Windows 8新特性的匹配狀況。Windows 8熱門應用“板報”的CEO 李晶認為：“過去我們的頁面設計和測試團隊需要耗費大量精力和時間在網頁兼容性測試上，特別是當設計發(fā)生細節(jié)改變時，幾乎所有測試環(huán)節(jié)都需要重來一遍。在試用Modern.IE系列工具后，我們節(jié)約了大量初期測試的時間，將測試的人力和時間放在了最重要的環(huán)節(jié)上，效率提升了許多?！?br>

事實上，僅需幾秒鐘的等待時間，Modern.IE會自動生成一份檢測報告，報告分別從上文中的三大塊，來提出改善網站的建議：

1. 解決關于兼容舊版IE瀏覽器的常見問題：

已知的兼容性問題：每當IE瀏覽器進行一次重大版本更新時，微軟都會為那些高點擊率、具有一定影響力的網站主動進行測試，以避免在新版IE中出現兼容性問題，并幫助他們解決相關問題。通過Modern.IE下的此工具，開發(fā)者能夠更加方便地訪問兼容性檢查數據，并可直接聯系微軟，減少在MSDN社區(qū)上搜索修改建議文檔所花費的時間；
兼容模式：當開發(fā)者為舊版IE所編寫的網頁代碼與新版IE瀏覽器（IE9、IE10）產生兼容性問題時，該網站會出現在“兼容性問題列表”（Compatibility View List）中。而網頁開發(fā)者自己有時對這一點并不知情，Modern.IE相關工具能幫助開發(fā)者確定自己的網站是否存在兼容性問題，如果網站在列表中，那么則會建議使用自動化JavaScript工具來檢測并刪除網站中的舊標記，進而確保站點與當前版本的IE瀏覽器兼容；
框架（Framework）和庫（Library）：眾所周知，舊版本的這些網頁基礎組成部分也會導致兼容性問題。通過研究高點擊率網站，微軟發(fā)現常見的庫兼容性問題主要發(fā)生在Jquery和Prototype等相關Javascript框架中，而Modern.IE則會對它們進行自動檢測，并給出相關的兼容性解決方案；
網絡標準文檔模式（Web Standards Docmode）：用于檢索當前網頁下的文檔類型標記碼（DocType Markup Code），該標記碼的作用在于通知瀏覽器遵守HTML5和CSS3等現代Web開發(fā)標準。較早版本的標記碼將會強制所有版本的IE瀏覽器均按IE8方式進行呈現，這會嚴重影響HTML5站點性能，也加大了開發(fā)人員編寫適用于現代瀏覽器代碼的工作量。而通過Modern.IE下的此工具，這類問題能以較簡單的方式解決。

2.讓您的網頁在多瀏覽器、多設備下更好地運行：

CSS前綴（CSS-Prefixes）：此項測試可用于檢測當前網頁CSS代碼中是否缺失特定前綴，進而導致相關兼容性問題。Modern.IE下的前綴檢查工具涵蓋了包括-Moz(Firefox)、-Ms(Internet Explorer)、 -O(Opera)以及-Webkit(Chrome & Safari)在內的所有主流瀏覽器；
瀏覽器插件：盡管在全新的IE10瀏覽器下，微軟所提倡的是一個無插件的網絡環(huán)境，但作為一種新興的思路，開發(fā)者想要完全實現還有些困難。Modern.IE下的此項測試可確定網站是否需要移動設備上（例如Surface或iPad）無法使用的插件。如果檢測到插件，該工具將指導開發(fā)者如何獲得更多有關“構建免插件的網頁”的幫助信息，以提供給廣大用戶一個最佳的瀏覽體驗；
響應式Web設計（Responsive Web Design）：作為一種新興的開發(fā)實踐，此工具可以檢測當前網站是否使用CSS3下的一大新特性Media Queries。該特性允許開發(fā)者在不改變內容的情況下，通過改變頁面的布局以精確適應不同的設備，在屏幕上顯示最佳效果，以加強瀏覽體驗；
瀏覽器檢測：Modern.IE通過檢測網頁編碼模式，從腳本中篩選出引用域而不是直接引用網頁的結果（類似于第三方分析工具），來推斷其是否采用瀏覽器檢測（Browser Detection）技術。在支持多瀏覽器和多平臺時，微軟會建議何時使用功能檢測來取代瀏覽器檢測，從而簡化站點的維護工作。

3. 利用Windows 8中的新特性進行再構建：

觸控瀏覽（Touch-browsing）：此項Modern.IE測試，會建議當用戶使用觸控瀏覽器（如IE10）訪問站點時的設置默認行為(Default Behavior)。當用戶使用常見觸控手勢（例如縮放或雙擊）進行操作時，瀏覽器就能自動判斷出用戶將要執(zhí)行的操作；
“開始”屏幕下的站點磁貼（Start Screen Site Tile）：Modern.IE向導為開發(fā)者提供了一種將自己的網站Logo貼到 Windows 8開始屏幕磁貼上的新方法，開發(fā)者可利用Windows 8下的這些新特性，為用戶提供更加個性化的瀏覽體驗。

而現在困擾網頁開發(fā)者的另一個問題是，他們可能需要在多瀏覽器和跨平臺設備上上對站點進行全面的兼容性測試，這大大增強了開發(fā)者的測試工作壓力。而Modern.IE系列工具為了解決這一難題，直接內置了著名的虛擬網頁兼容性測試服務BrowserStack，這樣無論開發(fā)人員使用何種設備和操作系統，都能用它來測試網頁在不同瀏覽器下的運行狀況。值得一提的是，Modern.IE上的BrowserStack專屬通道為所有Web開發(fā)者提供三個月的免費服務。使用BrowserStack，開發(fā)者的測試工作成本將大大降低，任何瀏覽器測試都可以通過云端完成。

為了更方便與BrowserStack服務進行連接，Modern.IE還提供了Chrome與Firefox下的瀏覽器組件，開發(fā)人員只需單擊網頁中的選項，便能直接連至BrowserStack虛擬測試服務。

此外，Modern.IE也考慮到同時使用Windows PC、Mac和Linux等多環(huán)境下的網頁開發(fā)者，為他們統一提供了本地測試用的虛擬機VHD文件。例如Windows 8下的Hyper-V/Virtual PC、Mac下的VMWare Fusion/ Parallels、Linux下的VirtualBox等一系列豐富的虛擬化工具選擇，旨在讓使用各種平臺的Web開發(fā)者都能簡單的參與到IE 10的兼容性測試中來。

通過Modern.IE這類高效的兼容性測試工具，越來越多的Web開發(fā)者們將能夠更方便的為現代化的IE10瀏覽器開發(fā)出更有活力和更安全的Web產品，而更多更好的Web產品也將吸引更多用戶使用IE10瀏覽器，進而促進IE10瀏覽器的不斷進步。