使用 BrowserLab 預覽網頁在多個瀏覽器、作業系統顯示情形

BrowserLab 是 Adobe 公司所開發的網頁服務，能讓你測試網頁在不同作業系統及瀏覽器上的顯示狀況，也能夠將畫面分為左右兩邊對兩種不同平台的瀏覽器進行比較，甚至是重疊在一起來比對兩者之間的差異性，對於網頁設計師來說會是個相當實用的工具。

目前 BrowserLab 仍在測試階段，但已經支援 Windows 及 Mac OS X 平台的 Firefox, Safari, IE, Chrome 瀏覽器。而這項產品為 Adobe CS Live 的服務之一，在 2011 年四月30日以前註冊將能夠免費使用一年。

BrowserLab 特色：

• 快速、廣泛瀏覽：能快速切換、比較多個瀏覽器及作業系統。
• 測試簡單：沒有複雜、繁瑣的介面，測試網頁就如同在瀏覽網頁一樣簡單。
• 省錢：不用購買多個硬體、不用安裝多個作業系統就能夠進行測試。
• CS5 擴展：直接在 Adobe Dreamweaver ® CS5 進行測試。

開始使用 BrowserLab

進入 BrowserLab 後，點擊”Try BrowserLab”開始使用。如果你曾經註冊過 Adobe ID，可以直接在畫面右方登入帳號，它會將 BrowserLab 設定到你的帳戶裡，不過須等待幾分鐘的時間。如果沒有註冊過，點擊”Create Adobe ID”建立帳號。

註冊時填入信箱、密碼、姓名及國家，如果不想收到 Adobe 產品訊息，記得在下方勾選 No，最後按下 CREATE 就會建立帳號。

接著到信箱收取認證信件，完成驗證後就能使用你註冊的帳號登入 Adobe BrowserLab 。在登入後先點擊左上角的”Browser Sets”來加入欲檢測的瀏覽器、作業系統類型。如果你想將某些瀏覽器放在同個類別裡，也可以使用左側的 Browser Sets 功能來建立清單。

最後按下 Test, 然後輸入要檢測的網址，稍待片刻就會出現截圖。

使用左上角的 View 可以調整檢視模式，預設的為 1-up View（顯示一種），2-up View 能讓你將畫面分為左右兩邊，檢視不同的網頁預覽畫面。而 Onion Skin 則是重疊模式，讓你將兩張截圖重疊在一起，快速找出差異處（文章後面有截圖說明）。

如果你想要知道某部分的距離，可以勾選”Show Rulers”，就會在畫面 x/y 軸顯示出尺規。

下圖是 2-up View 的檢視樣式，中央的拖曳條可以一次拖曳兩邊的網頁預覽畫面。左方是 Safari 3.0 OS X, 右方則可以設定為 Firefox 3.0 OS X 或其他。

Onion Skin 是我認為在 Adobe BrowserLab 裡最亮眼的功能之一，它能快速重疊兩種不同瀏覽器、作業系統檢視網頁的情形，讓你快速抓出網頁製作時可能遇到的問題，例如兩邊寬度不同、圖片位置不一樣等等。

Adobe BrowserLab 是個相當實用的工具，雖然它還在 beta 階段，但功能明確、操作簡單，是我想推薦它的原因。如果你也是個網頁設計師，或是喜歡玩玩CSS的部落客，都可以透過它來幫你檢查網頁是否不相容於某個瀏覽器（或作業系統）。

網址：http://www.adobe.com/go/browserlab_cslive