開發(fā)網(wǎng)站時最不想做的就是在不同瀏覽器、平臺和分辨率測試網(wǎng)頁顯示效果，通常這會浮現(xiàn)許多問題，尤其瀏覽器版本就可能讓顯示成效完全不同，也只好盡力維持讓每一種設(shè)備都能正常瀏覽網(wǎng)頁。修改到完全沒有問題必須投入不少時間，我習(xí)慣在計算機(jī)上安裝不同版本的操作系統(tǒng)進(jìn)行測試，但遇到 IE 就沒輒了，除非你安裝 XP 或更早的版本才能測試不同的 IE 。如果你覺得這么做很麻煩，現(xiàn)在只要輸入網(wǎng)址就能建立在不同瀏覽器屏幕的截取畫面。

以往我并沒有介紹過太多類似的服務(wù)，因為大部分服務(wù)都不是免費(fèi)的，即使免費(fèi)，效果跟操作上也不是那么理想。直到最近微軟終于推出了一款名為「Browser Screenshots」在線工具，能夠為你快速建立一個網(wǎng)頁在不同操作系統(tǒng)、瀏覽器甚至是設(shè)備上的畫面截圖，方便開發(fā)者在開發(fā)網(wǎng)站或服務(wù)時找出問題。

Browser Screenshots 用法非常簡單，只要開啟網(wǎng)站、輸入網(wǎng)址，就能自動為你截取不同瀏覽器上呈現(xiàn)的網(wǎng)頁效果。支持平臺包括 Windows（IE、Chrome、Firefox、Opera）、OS X（Safari）以及 IE 6、IE 7、IE 8、IE 9 和 IE 10！還有在 Google Nexus、iPhone 及 iPad Air 測試效果。

STEP 1

開啟 Microsoft Edge Dev 的「瀏覽器屏幕快照」功能，在網(wǎng)頁內(nèi)輸入要截取的頁面網(wǎng)址，然后按下右邊圖示。

STEP 2

Browser Screenshots 速度不是很快，需要等待一段時間，每個平臺的截圖畫面才會出現(xiàn)。如果你想檢視大圖，把光標(biāo)移動到截圖上點選放大，比較值得一提的是這項服務(wù)建立的截圖是整個頁面由上到下的完整范圍，不是只有可視區(qū)域而已。

STEP 3

另外，Browser Screenshots 工具對于中文網(wǎng)站的處理能力很好，可以正常顯示網(wǎng)頁內(nèi)的所有中文內(nèi)容，不像一些測試平臺可能遇到中文會無法顯示，不得不說確實是個蠻棒的開發(fā)工具！如果你在開發(fā)網(wǎng)站或服務(wù)時，想知道在其他平臺設(shè)備上的顯示效果，可以試試看用它來測試。

值得一試的三個理由：

免安裝軟件，輸入網(wǎng)址就能在線抓取網(wǎng)頁截圖畫面

支持 Windows、Mac 多種常用瀏覽器，也能截取設(shè)備效果

可以一次抓取 IE 6 – IE 10 的所有顯示畫面，非常強(qiáng)大