Responsive Web Design Tester(测试网页其他设备样式插件) V1.0.24官方版

Responsive Web Design Tester是一款功能强大的运用在谷歌浏览器中的插件。Responsive Web Design Tester插件可以帮助用户测试网页在其他设备在网页中的显示样式,使用方便！

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.第一步大家应该都知道要在本站下载谷歌插件(同时需要一款最新谷歌浏览器),解压,得到crx格式的文件。

2.接着大家需要打开谷歌浏览器,找到右上角的按钮,在下拉框中选择"设置"选项,然后点击设置来启动Chrome浏览器的设置页面。如下图：

3.进入设置界面,找到并点击"扩展程序"。如下图：

4.在打开的谷歌浏览器的扩展管理器中用户可以看到一些已经安装程序的Chrome插件,或者一个Chrome插件也没有。如下图：

5.我们回到软件包中,将Responsive Web Design Tester拖到谷歌浏览器中的"扩展程序"界面中,这时候用户会发现在扩展管理器的中央部分中会多出一个"拖动以安装"的插件按钮。我们就将Responsive Web Design Tester拖动到这个位置,Responsive Web Design Tester插件的安装。如下图：

6.松开鼠标就可以把当前正在拖动的插件安装到谷歌浏览器中去,但是谷歌考虑用户的安全隐私,在用户松开鼠标后还会给予用户一个确认安装的提示。只需要点击"添加"按钮就可以把该Chrome插件安装到谷歌浏览器中去。如下图：

7.安装好Responsive Web Design Tester以后,右上角会有Responsive Web Design Tester图标。如下图：

8.当然安装了Chrome 插件,也有不需要这款插件的时候,那么不需要Chrome插件的时候,大家就可以删除它,卸载Chrome插件的方法非常简单,具体操作如下图所示：

Responsive Web Design Tester 插件背景

现在随着移动设备变得更加智能化、网络速度变得越来越快,更多的用户习惯了使用移动设备来浏览网站,不过对于目前的大多数网站来说都还只局限于电脑PC端的时代,并未对手机、平板电脑等移动设备作出过多的优化,随着移动用户的增多,网站的开发人员也会更加注重移动设备的优化,使得用户在不同设备中都能享受到良好的用户体验。

想要进行移动网站的测试就需要用户使用手机或平板电脑来测试,但是现在绝大多数的开发工具都是在电脑上来完成的,所以想要测试网页在手机或平板电脑上的显示效果就需要使用电脑上的浏览器来模拟手机等移动客户端的请求（伪造User-Agent）。

Responsive Web Design Tester 功能介绍

1.Responsive Web Design Tester只能修改网站请求时的User-Agent的信息来达到模拟移动设备的目的,对浏览器的窗口大小的修改。

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是一款可以帮助用户测试网页在其他设备中显示样式的谷歌浏览器插件,是一款值得大家下载使用的插件！