A、瀏覽器兼容性和測試工具
對於Web前端開發工程師來說,要確保代碼在各個主流瀏覽器的各個版本中都能正常工作事件很費時的事情,因為現在有太多瀏覽器了,主流就有IE、Chrome、FireFox、Safari、Opera,不入流的就更多了,而這些主流的瀏覽器又有很多版本,以IE為例就有IE 6、IE8、IE9等等。為了保准網頁在主流瀏覽器中都能很好的顯示,我們不可能安裝所有上述瀏覽器來進行測試。
當然我們可以借助於工具,比較有名的是IE Tester,不過只能測試IE各個版本的兼容性。現在Chrome、FireFox、Safari等瀏覽器所占市場份額越來越高,我們也要測試在非IE瀏覽器中的兼容性。這里有一個很好的工具Spoon Browser Sandbox,它能測試IE、Chrome、FireFox、Safari、Opera所有版本的兼容性。
B、Spoon Browser Sandbox
Spoon Browser Sandbox和IE Tester不同,由於 Browser Sandbox的工作原理是基於虛擬機技術,它是通過在瀏覽器下安裝插件的方式來運行不同瀏覽器模塊來進行測試。
官網:http://spoon.net/browsers/
B.1、安裝Spoon Browser Sandbox
Spoon Browser Sandbox是個插件,可以安裝在IE下,也可以安裝在FireFox或Chrome下。
B.2、安裝步驟
1、打開官網http://spoon.net/browsers/。你會看到以下畫面。網頁上顯示的就是所有支持的瀏覽器及其版本。
2、點擊任何一個RUN按鈕,就會跳出以下畫面,你必須注冊一個帳號,才可以使用。按要求注冊即可。若你有帳號可點擊Login to existing account直接登錄。
3、登錄以后會自動下載一個spoon-plugin.exe文件,安裝它。安裝好以后會在你電腦的右下角出現一個這樣的圖標
。就表示安裝成功了。
4、關了所有的瀏覽器,再次打開官網(我是用Chrome打開官網的,速度比較快,和Spoon Browser Sandbox好像配合的比較好),若我們要在IE 6下測試,我們就點擊IE 6后面的RUN按鈕。就會出現以下畫面。
這樣spoon-plugin會自動下載IE 6在Chrome下的測試插件,並安裝在Chrome下(注意,這里安裝的是Chrome下的IE 6調試插件,並不是安裝IE 6瀏覽器,和你的電腦IE 6或其它版本的IE瀏覽器沒有任何關系。若,我們在FireFox下打開官網,點擊IE 6后的RUN,就安裝FireFox下IE 6調試插件,以此類推。)。耐心等待,從國外的網站下速度不是很快。
5、安裝完成后會自動打開IE 6(注意,我的電腦里安裝的可是IE 8),若你要測試你做的網頁在IE 6的顯示情況,你只要在打開的IE 6中輸入網址查看就可以了。這真的使用IE 6一樣。
我在Opera 9后面點擊RUN,安裝完成后,就出現Opera 9的畫面,而你根本不用真實的去安裝Opera瀏覽器。
以此類推你可以測試上述所有瀏覽器,而不用實際安裝它,只是裝個插件就可以了。
圖文:http://blog.sina.com.cn/s/blog_6d3c1ec60101cyfz.html

![[Test]1 <wbr>瀏覽器兼容性測試工具Spoon <wbr>Browser <wbr>Sandbox [Test]1 <wbr>瀏覽器兼容性測試工具Spoon <wbr>Browser <wbr>Sandbox](/image/aHR0cDovL3MxMC5zaW5haW1nLmNuL21pZGRsZS82ZDNjMWVjNmdjYWE4YWY0NWE4NjkmNjkw.png)
![[Test]1 <wbr>瀏覽器兼容性測試工具Spoon <wbr>Browser <wbr>Sandbox [Test]1 <wbr>瀏覽器兼容性測試工具Spoon <wbr>Browser <wbr>Sandbox](/image/aHR0cDovL3MzLnNpbmFpbWcuY24vbWlkZGxlLzZkM2MxZWM2ZzdhYWE3ODFkYjRkMiY2OTA=.png)
![[Test]1 <wbr>瀏覽器兼容性測試工具Spoon <wbr>Browser <wbr>Sandbox [Test]1 <wbr>瀏覽器兼容性測試工具Spoon <wbr>Browser <wbr>Sandbox](/image/aHR0cDovL3M4LnNpbmFpbWcuY24vbWlkZGxlLzZkM2MxZWM2Z2NhYThiNDVlZDVkNyY2OTA=.png)
![[Test]1 <wbr>瀏覽器兼容性測試工具Spoon <wbr>Browser <wbr>Sandbox [Test]1 <wbr>瀏覽器兼容性測試工具Spoon <wbr>Browser <wbr>Sandbox](/image/aHR0cDovL3MxMS5zaW5haW1nLmNuL21pZGRsZS82ZDNjMWVjNmdjYWE4YjVlNDc2ZWEmNjkw.png)
![[Test]1 <wbr>瀏覽器兼容性測試工具Spoon <wbr>Browser <wbr>Sandbox [Test]1 <wbr>瀏覽器兼容性測試工具Spoon <wbr>Browser <wbr>Sandbox](/image/aHR0cDovL3M5LnNpbmFpbWcuY24vbWlkZGxlLzZkM2MxZWM2Z2NhYThiNzdmMzQ1OCY2OTA=.png)