現在開發網站時所遇到的瀏覽器比起以往是多了好幾倍，早期大多數的網站開發人員只需要測試兩種瀏覽器就好，分別是 IE 以及 Firefox，Apple OS X 作業系統越來越多人使用後，就需要多增加測試 Safari 瀏覽器，而後 Chrome 瀏覽器在 Google 大力推廣下，又多了一個要測試的瀏覽器，這些瀏覽器的更新也越來越頻繁，每一種版本都還會有人使用，而不會因為版本的推進而隨之更新，這樣的情況在 IE 瀏覽器最常見，因為有太多的網站必須要能夠在某些版本的 IE 瀏覽器上被正確的執行，所以網站開發人員在開發的時候就要針對 IE6, 7, 8 多加留意也需要多花時間做測試。
在這些不同版本的瀏覽器做網站的測試是需要相當耐心的一件事，早期還必須要準備好幾台電腦，分別安裝不同版本的作業系統與瀏覽器，如此才能夠有實際的測試結果，到後來就可以使用 Virtual Machine 的方式在開發者的電腦裡準備不同的測試環境，但大多數開發者所使用的電腦等級是無法同時開啟多個 VM 來做測試，所以網站開發時要在不同作業系統、瀏覽器做測試還真的是挺麻煩的，尤其現在還必須再增加對於行動裝置的測試，這對於很多開發人員就是一種負擔。
不過在不久前經由 Scott Hanselman 的部落格文章發現到一個線上服務可以讓我們以更輕鬆、方便的方式來達到不同作業系統、瀏覽器、瀏覽器版本的網站測試，除了一般的瀏覽測試之外，也可以與 Visual Studio 2012 整合，在偵錯時就可以使用這項服務做 local 端的測試，這麼好的一個服務可以減輕開發人員的負擔，所以介紹給大家。
BrowserStack
這個 BrowserStack 服務有些什麼樣的功能呢？首頁的影片就可以略知一二，但大致的功能可以由網頁底下所列出的功能列表中得知，
BrowserStack 所強調的就是提供多種平台以及多種不同版本瀏覽器的測試，尤其是行動裝置的測試以及 local 端的開發測試的整合，在以下的網頁當中就列出 BrowserStack 所提供的瀏覽器與平台種類，
http://www.browserstack.com/list-of-browsers-and-platforms
在不同種類的瀏覽器裡，除了瀏覽器本身所提供的 Developer Tool 之外，也會另外提供一些 3rd party 的 Developer Tools，例如 Firefox 上面就有提供 Firenbug, Firequery, Firecookie, Web developer, Yslow，而 Chrome 除了本身的 Developer Tool 之外也有提供 Firebug Lite, Pendule，我們就可以在 BrowserStack 所提供的測試環境中依然使用我們所熟悉的工具來進行偵錯與測試。
http://www.browserstack.com/debugging-tools
在整合測試方面，除了一開始有說到可以與 Visual Studio 2012 整合之外，另外也有提供 Chrome, Firefox 的 Extension 與 Add-ons，用來進行不同版本的 IE 瀏覽器測試。
http://www.browserstack.com/integrations
當然 BrowserStack 這項服務並不是免費的，而是需要花錢購買，但我們可以先申請使用 BrowserStack 所提供免費試用來做測試，先看看這項服務所提供的功能到底為何？
申請免費試用並不需填寫任何的信用卡帳號或是提供電話，只需要填寫 Email 即可，而這個 Email 就是帳號，
當填寫完申請資料並送出後就會將頁面轉到 Dashborad，馬上就可以做測試，
這邊要先跟大家說明，在 Dashboard 畫面上方標示「Free plan」的地方，下面有個明顯的文字「30 min left」，
這個表示我們所申請的免費試用服務只能使用 30 分鐘，不過這個 30 分鐘並不是登入停留的時間，而是指我們實際使用測試功能的時間，這一點必須要讓大家有個清楚了解，接著來看看這個 Dashboard 上面的一些選項，
選擇作業系統或平台
在畫面上的這兩個地方，可以讓我們選擇要測試的作業系統或行動裝置平台，這裡我們可以選用 Windows 或是 Apple OS X，而行動裝置平台可以選擇 iOS 或是 Android, Opera Mobile，
瀏覽器
這邊會依據上面所選擇的作業系統或是平台的不同而有不一樣的瀏覽器，例如選擇 Windows XP 就無法選擇 IE 8 以上的版本，因為 IE 10 是最近才開放給 Windows 7 可以安裝，而 BrowserStack 還沒有做出更新，所以在 Windows 7 裡就沒有 IE 10，而如果是選擇行動裝置平台的話，則是選擇不同版本的裝置，例如選擇 iOS 的話，就是選擇 iPhone 或是 iPad，
解析度
選擇 Windows 或 Apple OS X 作業系統時可以選擇想要顯示的螢幕解析度大小，不過 Windows 的解析度最大只能選擇 1280 x 1024，而 OS X 倒是可以選擇至 1920 x 1080，
Windows XP
Windows 7
Windows 8
OS X Snow Leopard
OS X Lion
OS X Mountain Lion
另外也可以針對測試時的顯示模式進行調整，而「Load Speed」這個項目則就像使用 TeamViewer 一樣可以就顯示的品質做調整，如果是網路速度比較不好的就可以選擇 Fast speed 項目，如果想要比將清晰的顯示畫面則可以選擇 hign quality。
測試
我們先做個測試，我這邊就使用 jQuery 網站來做一個測試，在 Dashboard 中間的 Quick Start 裡使用「Test a public URL」，填入網址以及選擇要用來測試的作業系統與瀏覽器種類，
對了！要提醒一下大家，這個服務需要使用到「Flash」，
填好網址以及選好要測試的作業系統與瀏覽器之後就可以按下「Start testing」button，按下 button 之後就會看到以下的畫面，這個準備測試環境的時候就已經開始算時間囉，
當一切就緒後，就會出現作業系統以及瀏覽器的畫面，
假如要停止測試的話，就按下 Dashboard 的左方紅色的 button，
剛剛小小的做個測試就已經花了兩分鐘了，
這次我們改使用 OS X 平台以及 Safari 瀏覽器來做測試，測試畫面如下，
再來改選用行動裝置平台來做測試，選用 iOS, iPad 3rd (6.0)，不過這個選項所出來測試環境是在 OS X 裡面用 iOS Simulator，同樣的，如果是選用 iPhone 的話也一樣是使用 iOS Simulator，
接著來選用 Android 的 Nexus 7 做測試，同樣的也是在 OS X 裡面並且使用 Simulator，
雖然是使用 Simulator 不過測試網站倒也是夠用了。
從以上的幾個測試看來，我想大家都應該知道這個服務是怎樣做測試的，就是在線上提供多種的作業系統以及行動裝置模擬平台，然後用類似遠端桌面的方式來做測試，但如果是這樣的話，這樣服務的收費也未免太高了一點吧，以下就是這個服務所收取的費用，
按月收費
以年計費
最便宜的方案是一個月美金 19 元 ，也要 600 多台幣，如果不是很必要的話，我想不會有人想要花這個錢，而且我們剛剛才這樣簡單測試一下就已經把免費試用的 30 分鐘給用掉了 7 分鐘，況且還有幾個選項也還沒有測試到呀！
取得三個月的免費試用
其實有個方法可以延長免費試用的時間，可以藉由 modern.IE 這個網站來取得 3 個月的免費試用喔！
進入 modern.IE 的首頁後，點選中間「Use virtuak test tools」的項目，或是連結下面的網址，
http://www.modern.ie/en-US/virtualization-tools
在開啟並且有登入 BrowserStack Dashboard 的同一個瀏覽器下，先用另一個 Tab 開啟上面的網頁，然後在中間輸入網址的地方輸入網址，然後按下右邊藍色的「Test on BrowserStack」button，接著頁面就會跳到 BrowserStack Dashboard 然後測試環境就會以 Windows 8 , IE 10.0 開啟，如下：
這時候可以按下紅色停止按鍵，回到 Dashboard 後就可以看到頁面中間原本顯示倒數時間的地方已經有了改變，並且顯示「Your Sponsored by IE plan has been successfully activated. 」訊息，
然後點選「Upgrade plan」button，在顯示費用的畫面中就會顯示什麼時候終止這個免費試用，
不過這項三個月的免費服務只有在選用 Windows 作業系統的時候，而選用其他的作業系統與行動裝置平台仍然受到 30 分鐘試用時間的限制。
瀏覽器整合
這邊的瀏覽器整合測試其實就是在 Chrome 與 Firefox 安裝擴充元件，藉由擴充元件的功能來快速測試網站在 IE 瀏覽器各版本測試，這個不是去呼叫裝在我們電腦裡的 IE 瀏覽器來做測試，而是一樣會回到 BrowserStack Dashboard 裡面做測試，只是用擴充元件會比較外速直接，尤其是非 Windows 作業系統或是沒有安裝 IE 瀏覽器的開發者來說，這個瀏覽器整合功能是相當方便。
Firefox Add-ons - Test IE
https://addons.mozilla.org/en-US/firefox/addon/test-ie/
安裝好 Add-ons 後需要重新開啟 Firefox，重開之後可以在 Firefox 下方狀態列看到 Test IE 的 icon，點選 icon 後會顯示 Popup Window，然後可以選擇要測試的 IE 瀏覽器版本。
Chrome Extensions - Test IE
https://chrome.google.com/webstore/detail/test-ie/eldlkpeoddgbmpjlnpfblfpgodnojfjl
安裝完之後會在 Chrome 上方增加 Test IE 的 icon，點選後就會出現 Popup Window，我們可以選擇想要測試的 IE 瀏覽器版本，這邊預設所使用的作業系統會依據選擇的 IE 版本而做決定，例如選擇 IE 6, 7, 8 的話，作業系統就會使用 Windows XP，選擇 IE 8 是使用 Windows Vista，選擇 IE 10 就會使用 Windows 8，
IE 6, Windows XP
IE 7, Windows XP
IE 8, Windows XP
IE 9, Windows 7
IE 10, Windows 8
IE 10(Desktop), Windows 8
測試 local 端的網站
這個功能是 Browserstack 的亮點之一，想要用不同作業系統、平台以及不同瀏覽器對 local 端的開發中網站如果不用 Browserstack 的話也不是不能做到，只是需要花費很多的功夫，而使用 Browserstack 做測試則是相當輕鬆方便，接著就來看看要怎麼測試。
我拿之前用來說明分層架構所做的 Demo 網站來做測試，這個網站是掛在我電腦的 IIS 7.5 裡，
接著就點選 Browserstack 於 Chrome extension 的 icon，接著勾選右下方的「Test a local URL」，最後選擇要用來測試的瀏覽器版本（這次用 IE 10），在 Firefox 瀏覽器的 Test IE Add-ons 也是同樣的操作步驟，
點選要用來測試的瀏覽器版本後就會出現以下的畫面，因為測試 local 端網站的這個功能會需要使用到 Java 應用程式，所以要先確定電腦有安裝 Java 執行環境，
出現以上的畫面後，就點選「執行」此 Java 應用程式，再來會出現一個「Setup a local tunnel」的設定畫面，這例就填上要測試的 local 端網站所使用的 Host Name 與 Port，填寫完畢後就接著點選「Finish」button，
點選「Finish」button 之後就會開始進行設定，
設定完成後就會顯示設定成功訊息，看到這個畫面就再按下「Finish」button，就可以進入測試環境了，
最後可以看到在測試環境中進行 local 端的網站測試，
Visual Studio 2012 的偵錯整合
身為一個 ASP.NET 開發人員，工作的時間大部分面對的就是 Visual Studio，再來就是進行偵錯時所面對的瀏覽器，而 Browserstack 就有提供與 Visual Studio 2012 整合的功能，
http://www.browserstack.com/integrations
Visual Studio Gallery - BrowserStack
http://visualstudiogallery.msdn.microsoft.com/2dfa32b1-3c47-439d-b1c5-9e28be18b81c
不過要注意的是，要使用這個功能是必須要先安裝前不久所 release 的「ASP.NET and Web Tools 2012.2」，假如你的 Visual Studio 並不是 2012 但也想要使用這個功能的話，可以下載在 BrowserStack 的網站所提供的擴充功能安裝檔，
http://www.browserstack.com/downloads/BrowserStack.vsix
這邊的示範則是從 Visual Studio Gallery 所下載的安裝檔，稍後將會以 Visual Studio 2012 做整合測試的示範操作，
安裝完成後就開啟 Visual Studio 2012，而用來測試的網站專案就是上面用來做 local 端測試所使用的分層架構 Demo 網站，
要在 Visual Studio 2012 裡使用 BrowserStack 來做測試，可以點選上方的標準工作列選擇要用來顯示的瀏覽器選項，在選項中就可以看到「BrowserStack」項目，
我們選擇「BrowserStack」來進行偵錯，選擇好要用來偵錯的瀏覽器後就可以按下「F5」開始進行偵錯測試，開始進入偵錯前，會跳出一個視窗「BrowserStack - Live, Web-Based Browser Testing」，如下：
這個視窗所要選擇的就是我們要來進行偵錯時所要執行的作業系統環境與瀏覽器種類與版本，
這邊我們先選擇 Windows 8, IE 10.0 來進行偵錯，接著會出現一個安全性警告的視窗，這邊就點選「是」，
接著就會開啟電腦的預設瀏覽器並直接進入 BrowserStack Dashboard，
如果上面的畫面一直持續而沒有任何動作時，這就是我們尚未加入 local 端網站設定，所以可以先停止偵錯，先到「Setup a local tunnel」裡修改或是增加 local 端的網站設定，
在修改或增加 local 端的設定之後，我們回到 Visual Studio 2012 並且重新執行偵錯測試，
接著回到 VS2012 裡，然後在程式中增加一個中斷點，看看是不是能夠進行中段偵錯，
然後回到 BrowserStack 測試環境，然後執行剛才有下中斷點的頁面，在以下的畫面裡可以看到的確有進入到中斷點，由此可知我們也可以藉由 BrowserStack 進行不同環境的 local 端開發偵錯，這真的是相當不錯又方便的功能。
而當結束 VS2012 的偵錯時，並不會結束並關閉 BrowserStack 的測試環境，這就好像電腦的預設瀏覽器不是 IE 的話，當停止 Visual Studio 的偵錯時並不會關閉瀏覽器，這一點在這邊特別作個說明。
另外 BrowserStack 的 Visual Studio 2012 Extension 也可以從 VS2012 內的「擴充功能和更新」中取得，如下：
2013-05-31 更新
在三月份寫這篇文章的時候，當時臺灣正體中文版的 modern.ie 網頁還沒有出現，而到了四月之後 modern.ie 的台灣正體中文版網頁也出現了，如果這篇文章前面所提到的 modern.ie 英文版網頁讓你不習慣的話，就可以到正體中文版網頁瀏覽，有更詳盡的說明可以幫助你。
Internet Explorer 的測試更簡單 | modern.IE
BrowserStack 的介紹就到這裡為止，綜觀下來這個服務就是提供一個可以讓我們進行多種作業系統、平台與多種瀏覽器的線上測試的雲端虛擬機器，在這個環境裡除了可以測試公開的網站之外，就是可以用來測試開發者 local 端的網站，甚至提供了與 Visual Studio 2012 整合的功能，這功能對於使用 VS2012 的開發者來說是相當好用與方便，因為可以進行中斷點測試，這省卻了很多準備開發測試環境的時間、設定與麻煩。
雖然提供的免費三個月試用只能測試 Wiindows 作業環境與 IE 瀏覽器，其他的作業環境與瀏覽器還是受限 30 分鐘的試用限制，但我想對於大多數的開發者來說三個月的免費試用應該是夠用，而且如果開發者所開發的網站是需要在各種作業系統、平台、瀏覽器裡都要做測試的話，BrowserStack 的服務就真的可以手下不少的麻煩，也可以增加開發與測試的效率，如果真的需要這樣的服務，我想一個月美金 19 元是不算太貴，而且一次購買一年也只需要美金 205 元，開發上有此需求的朋友可以考慮購買這個服務。
相關連結：
modern.IE - Cross-browser testing simplified
http://www.modern.ie/en-US/virtualization-tools
Scott Hanselman - Cross Browser Debugging integrated into Visual Studio with BrowserStack
http://www.hanselman.com/blog/CrossBrowserDebuggingIntegratedIntoVisualStudioWithBrowserStack.aspx
Scott Hanselman的中文博客 - BrowserStack与Visual Studio集成的跨浏览器调试
http://blogs.msdn.com/b/scott_hanselman/archive/2013/02/28/browserstack-visual-studio.aspx
台灣 Windows 官方部落格 - modern.IE – 程式碼掃瞄工具背後的技術真相
http://blogs.windows.com/international/b/taiwan/archive/2013/02/08/modern-ie-a-new-set-of-tools-to-help-test-web-site-compatibility.aspx
點部落 - Level Up ：[Web]使用BrowserStack測試網頁的相容性
http://www.dotblogs.com.tw/larrynung/archive/2013/02/04/89924.aspx
The Will Will Will Web - 網站建置不是件簡單的事 @ 跨瀏覽器網頁設計密技 (3)
http://blog.miniasp.com/post/2012/05/14/Building-Website-is-not-that-easy-Cross-browser-testing-tools.aspx
以上
沒有留言:
張貼留言