Responsive Web Design Tester

Responsive Web Design Tester的開發背景

現在隨著移動設備變得更加智能化、網絡速度變得越來越快，更多的用戶習慣了使用移動設備來瀏覽網站，不過對于目前的大多數網站來說都還只局限于電腦PC端的時代，并未對手機、平板電腦等移動設備作出過多的優化，隨著移動用戶的增多，網站的開發人員也會更加注重移動設備的優化，使得用戶在不同設備中都能享受到良好的用戶體驗。

想要進行移動網站的測試就需要用戶使用手機或平板電腦來測試，但是現在絕大多數的開發工具都是在電腦上來完成的，所以想要測試網頁在手機或平板電腦上的顯示效果就需要使用電腦上的瀏覽器來模擬手機等移動客戶端的請求（偽造User-Agent）。

Responsive Web Design Tester的簡介

Responsive Web Design Tester是一款可以模擬手機等移動設備來訪問PC端的網頁進而進行測試的Chrome插件，在谷歌瀏覽器中安裝了Responsive Web Design Tester插件以后，用戶就可以使用開發工具（如VS、eclipse等）開發完網站以后，使用Chrome瀏覽器打開網頁以后點擊鼠標右鍵啟動Responsive Web Design Tester插件的調試功能，在調試列表中用戶可以選擇使用iPhone或android等移動設備對網站進行測試，以滿足網站對使用移動設備的用戶的需求，進而達到網站在任何設備中都能擁有良好的用戶體驗。

Responsive Web Design Tester的使用方法

1.在谷歌瀏覽器中安裝Responsive Web Design Tester插件并在Chrome的擴展管理器中啟動移動網站的調試功能，Responsive Web Design Tester插件的下載地址可以在本文的下方找到，離線Chrome插件的安裝方法可以參考：怎么在谷歌瀏覽器中安裝.crx擴展名的離線Chrome插件？

2.在把開發完成的網站部署到服務器上以后，使用谷歌瀏覽器打開該網站，并點擊鼠標右鍵啟動Responsive Web Design Tester插件的調試功能，用戶可以在調試列表中選擇使用iPhone或android等移動設備對該網站進行調試，如圖所示：

3.在點擊相應的設備以后，Responsive Web Design Tester插件會自動向網站發送經過模擬的User-Agent請求來模擬移動設備來訪問網站。

4.如果用戶需要更加多的設備類型也可以選擇Responsive Web Design Tester插件的選項按鈕，在該選擇配置界面中用戶可以自定義User-Agent請求的信息來添加自定義的設備，如圖所示：

Responsive Web Design Tester的注意事項

1.Responsive Web Design Tester只能修改網站請求時的User-Agent的信息來達到模擬移動設備的目的，對瀏覽器的窗口大小的修改可以參考：改變瀏覽器視角大小：Viewport Resizer。

2.Responsive Web Design Tester插件是通過固定的幾種設備類型的User-Agent對網站進行測試，如果需要更多標準化的User-Agent請求的測試插件可以參考：使用User-Agent Selector插件模擬手機等移動設備訪問網站。

Responsive Web Design Tester的聯系方式

1.來自：www.esolutions.se。