開發網站時最不想做的就是在不同瀏覽器、平台和解析度測試網頁顯示效果,通常這會浮現許多問題,尤其瀏覽器版本就可能讓顯示成效完全不同,也只好盡力維持讓每一種裝置都能正常瀏覽網頁。修改到完全沒有問題必須投入不少時間,我習慣在電腦上安裝不同版本的作業系統進行測試,但遇到 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
網站鏈結:https://dev.windows.com/zh-tw/
使用教學
STEP 1
開啟 Microsoft Edge Dev 的「瀏覽器螢幕擷取畫面」功能,在網頁內輸入要擷取的頁面網址,然後按下右邊圖示。
STEP 2
Browser Screenshots 速度不是很快,需要等待一段時間,每個平台的擷圖畫面才會出現。如果你想檢視大圖,把游標移動到擷圖上點選放大,比較值得一提的是這項服務建立的擷圖是整個頁面由上到下的完整範圍,不是只有可視區域而已。
STEP 3
另外,Browser Screenshots 工具對於中文網站的處理能力很好,可以正常顯示網頁內的所有中文內容,不像一些測試平台可能遇到中文會無法顯示,不得不說確實是個蠻棒的開發工具!如果你在開發網站或服務時,想知道在其他平台裝置上的顯示效果,可以試試看用它來測試。
其他類似的免費瀏覽器測試工具:
值得一試的三個理由:
- 免安裝軟體,輸入網址就能線上抓取網頁擷圖畫面
- 支援 Windows、Mac 多種常用瀏覽器,也能擷取行動裝置效果
- 可以一次抓取 IE 6 – IE 10 的所有顯示畫面,非常強大