2013年3月10日 星期日

使用虛擬機器測試不同版本的 IE 瀏覽器

開發網站需要面對多種瀏覽器,上一篇文章有提到過,早期頂多測試兩種瀏覽器就可以,但隨著作業系統與裝置的多元發展,瀏覽器也多了很多種、很多版本,所以開發網站就必須要測試很多種的瀏覽器與及不同環境,上一篇「推薦一個值得試試的服務 - BrowserStack」介紹了 BrowserStack 這個服務可以讓我們在開發網站時可以方便及輕鬆地在多種環境、瀏覽器做測試及偵錯。

但是這樣的服務存在著幾個問題,首先就是這個服務是需要付費的,而且費用雖然說不貴,但一年也是需要 6000 多台幣,如果是真的相當需要這個服務的開發人員來說,這樣的費用其實不算太貴,但是對於使用量不多到或只是偶而會需要用的開發者來說這是一筆不少的費用;而另一個問題就是這樣的服務是需要網路的,沒有網路就沒辦法使用,尤其是對於一些網路資安相當重視的工作環境來說,要使用這樣的線上服務是有困難的。

其實有很多網站開發在非 IE 瀏覽器並不會有太大的問題,而有問題的通常都會發生在 IE 瀏覽器,並不是說 IE 瀏覽器不好,而是 IE 每個版本所發生的問題都不太一樣,甚至於會有特定版本的專屬問題,尤其是在台灣,很多網站開發者不得不面對的就是客戶一定會要求網站在某個版本的 IE 瀏覽器上必須要可以正常執行且無錯誤發生,如果制式只是需要測試不同版本的 IE 瀏覽器,實在是不需要花錢去使用 BrowserStack,而這樣的情況下,最多人所採用的方法除了使用 IE Tester or IE Collection 強調可以測試不同版本 IE 的工具來測試網站,但這個方式往往會因為開發人員所使用作業系統的不同或是環境不夠單純而無法實際測試出客戶所遇到的問題,當出現這種情況時,我都會建議開發人員使用虛擬機器的方式,並準備不同作業系統且安裝不同版本的瀏覽器,當問題來的時候就可以依據以最單純的環境來做測試以找出問題。


準備虛擬機器會有個很大的問題,那就是作業系統的來源,其實很多人作業系統的來源都心照不宣,而這些來源都通常都是經過他人的調整或是更改過設定以及加裝其他的元件,所以用這樣的來源所準備的虛擬機器其本身就已經不夠乾淨。

上一篇「推薦一個值得試試的服務 - BrowserStack」文章裡我們就有介紹過 modern.IE 這個網站,特過 modern.IE 網站可以取得 BrowserStack 的三個月 Windows 環境測試的免費使用,而在 modern.IE 這個網站也有提供不同作業系統下的 Windows 作業系統之虛擬機器,而且還針對幾個不同虛擬機器程式準備了相對應的虛擬機器檔。

 

modern.IE

http://www.modern.ie/en-US
http://www.modern.ie/zh-tw

Cross-browser testing simplified

http://www.modern.ie/en-US/virtualization-tools
http://www.modern.ie/zh-tw/virtualization-tools

image

在網頁的右邊就是 modern.IE 所提供的「Virtual Machines」,這裡提供三個作業環境不同虛擬機器程式的 vm 檔,

image

Windows 作業系統下可以選擇使用的虛擬機器平台程式,

image

Mac 作業系統下可以選擇使用的虛擬機器平台程式,

image

Linux 作業系統下只有 Virtual Box,

image

 

在上面三個主要作業系統下選擇你所使用的虛擬機器平台程式後,就可以選擇你要下載有安裝某版本 IE 瀏覽器的虛擬機器檔,這邊我以 Windows 作業系統,分別以幾個虛擬機器平台程式來讓大家有所了解,

Windows, Virtual PC fot Windows

image

Windows, VirtualBox on Windows

image

Windows, VMWare Player for Windows

image

假如你的作業系統是使用 Windows 8 的話,就可以使用 Hyper-V

image

這邊所下載的檔案都是 Zip 壓縮檔,每個壓縮檔的大小約都在 3GB 以上,而且要特別說明的是這些虛擬機器的 Windows 都是英文版。

以 VMWare Player for Windows 的虛擬機器檔來說,除了可以使用 VMWare Player 開啟使用外,如果你有 VMWare Workstation 的話,也是可以使用的,

image

在 VMWare Workstation 中開啟使用 modern.IE 所提供的 IE7 - Vista 虛擬機器,如下:

SNAGHTMLa428d46

 

另外如果你的作業系統是 Windows 7 的話,也可以使用 Virtual PC,

image

使用 Virtual PC 的情況下,想要使用 Windows XP 與 IE 6 的環境來做測試,可以下載官方所提供的 Windows XP Mode,這個要到 Windows Virtual PC 裡下載,這邊要下載 Virtual PC 與 Windows XP Mode 前會先檢查你目前所使用的 Windows 7 作業系統的授權是否通過,

http://www.microsoft.com/windows/virtual-pc/default.aspx

image

http://www.microsoft.com/windows/virtual-pc/download.aspx

image

使用 Virtual PC 開啟 Windows XP Mode 的虛擬機器

SNAGHTMLa406a7b

使用 Virtual PC 開啟 IE8 - Win7 的虛擬機器,

SNAGHTMLa487fcf

 

2013-05-31 更新

在三月份寫這篇文章的時候,當時臺灣正體中文版的 modern.ie 網頁還沒有出現,而到了四月之後 modern.ie 的台灣正體中文版網頁也出現了,如果這篇文章前面所提到的 modern.ie 英文版網頁讓你不習慣的話,就可以到正體中文版網頁瀏覽,有更詳盡的說明可以幫助你。

Internet Explorer 的測試更簡單 | modern.IE

image_thumb[5]

image_thumb[9]

 


modern.IE 所提供的 Windows - IE 虛擬機器檔對於非 Windows 作業系統的開發人員來說是蠻有幫助的,而對於 Windows 作業系統的使用者來說,由官方所提供的虛擬機器檔比起我們自己所準備的,官方所提供的會比較單純些,比較不會受到其他程式或元件的干擾,而這些虛擬機器檔內的 Windows 作業系統還是會有啟動期限的限制,並非可以讓我們一直使用下去,所以這裡會比較建議各位有需要測試的時候解開壓縮檔後再裝上這些虛擬機器,而不用時就卸載並移除。

 

以上

沒有留言:

張貼留言

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。