開發網站時最不想做的就是在不同浏覽器、平台和分辨率測試網頁顯示效果,通常這會浮現許多問題,尤其浏覽器版本就可能讓顯示成效完全不同,也只好盡力維持讓每一種設備都能正常浏覽網頁。修改到完全沒有問題必須投入不少時間,我習慣在計算機上安裝不同版本的操作系統進行測試,但遇到 IE 就沒辄了,除非你安裝 XP 或更早的版本才能測試不同的 IE 。如果你覺得這麼做很麻煩,現在只要輸入網址就能建立在不同浏覽器屏幕的截取畫面。
以往我並沒有介紹過太多類似的服務,因為大部分服務都不是免費的,即使免費,效果跟操作上也不是那麼理想。直到最近微軟 終於推出了一款名為「Browser Screenshots」在線工具,能夠為你快速建立一個網頁在不同操作系統、浏覽器甚至是設備上的畫面截圖,方便開發者在開發網站或服務時找出問題。
Browser Screenshots 用法非常簡單,只要開啟網站、輸入網址,就能自動為你截取不同浏覽器上呈現的網頁效果。支持平台包括 Windows(IE、Chrome、Firefox、Opera)、OS X(Safari)以及 IE 6、IE 7、IE 8、IE 9 和 IE 10!還有在 Google Nexus、iPhone 及 iPad Air 測試效果。
Browser Screenshots
STEP 1
開啟 Microsoft Edge Dev 的「浏覽器屏幕快照」功能,在網頁內輸入要截取的頁面網址,然後按下右邊圖示。
STEP 2
Browser Screenshots 速度不是很快,需要等待一段時間,每個平台的截圖畫面才會出現。如果你想檢視大圖,把光標移動到截圖上點選放大,比較值得一提的是這項服務建立的截圖是整個頁面由上到下的完整范圍,不是只有可視區域而已。
STEP 3
另外,Browser Screenshots 工具對於中文網站的處理能力很好,可以正常顯示網頁內的所有中文內容,不像一些測試平台可能遇到中文會無法顯示,不得不說確實是個蠻棒的開發工具!如果你在開發網站或服務時,想知道在其他平台設備上的顯示效果,可以試試看用它來測試。
值得一試的三個理由:
免安裝軟件,輸入網址就能在線抓取網頁截圖畫面
支持 Windows、Mac 多種常用浏覽器,也能截取設備效果
可以一次抓取 IE 6 – IE 10 的所有顯示畫面,非常強大