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

以往我并沒(méi)有介紹過(guò)太多類(lèi)似的服務(wù)，因?yàn)榇蟛糠址?wù)都不是免費(fèi)的，即使免費(fèi)，效果跟操作上也不是那么理想。直到最近微軟終于推出了一款名為「Browser Screenshots」在線工具，能夠?yàn)槟憧焖俳⒁粋€(gè)網(wǎng)頁(yè)在不同操作系統(tǒng)、瀏覽器甚至是設(shè)備上的畫(huà)面截圖，方便開(kāi)發(fā)者在開(kāi)發(fā)網(wǎng)站或服務(wù)時(shí)找出問(wèn)題。

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

STEP 1

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

STEP 2

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

STEP 3

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

值得一試的三個(gè)理由：

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

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

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