由于移动设备上的用户体验和桌面电脑差异很大，因此对响应式页面的测试具有非常重要的意义。
然而要测试市面上所有的移动端设备，对大部分人来说都缺乏可操作性。
因此许多人采用的、简单的测试响应式页面的方式就是拖动调整浏览器尺寸，来匹配到智能手机或平板的视区（viewport）尺寸。这是相当迅速而粗糙的测试方法，能帮助我们从视觉上找到明显问题，但这种方式的一大弊端是，无法准确重现移动端用户体验。
移动端设备有许多独特的交互，例如滑动，两指捏合缩放等，另一方面桌面电脑也有其独有的交互，例如鼠标悬停（hover）和右键点击。响应式设计必须解决由这些差异造成的体验问题。
本文将讨论关于如何调试和测试响应式页面的具体操作方式。其中涉及的工具，你很可能已经有了－－google chrome。
google chrome的开发者工具（DevTools）有一个称作设备调试模式（device mode）的模块，是一套专门用于调试和测试响应式页面的工具集。
chrome开发工具无疑是个很赞的工具集，大部分其他的响应式页面测试工具仅仅简单地调整视区（viewport）大小，而chrome的device mode还兼顾到模拟移动端的用户体验，特别是触屏手势交互，例如轻击（tap），滑动（swipe），而这一切都在网页浏览器里进行模拟。
下面让我们一一说明device mode的具体功能。
- 移动设备模拟：device mode可设置模拟时下流行的大量移动设备（例如iPhone，三星平板，黑莓，Kindle，谷歌平板，以及更多其他的），具体包括响应式设计的外观和触屏上体现出的交互功能。他同时也修改了对应每种设备情况的UA字符串，以便在测试的时候能更逼近真实情况，得到效果更佳的预览。
- 触屏事件模拟：这个功能允许在你的响应式页面以智能手机和平板的交互方式进行测试。
- 媒体查询侦测：这是个相当体贴的功能，直接显示所有设置的媒体查询（media query）断点（breakpoint）。点击断点直接调整到相应尺寸，不必手动一点点拖动调整页面大小。
- 移动网络模拟：移动网络连接情景和桌面电脑的高速宽带环境有很大的不同。更何况，全球仍有大量无法接入高速移动网络（如LTE）的地区。device mode可以模拟你的响应式设计在各种网络条件（EDGE 2.75g，3g，LTE 准4g，DSL数字线路，乃至WiFI）下的效果，来帮助你发现潜在的性能问题。
要启动device mode，首先在google chorme里打开你的响应式设计页面。
首先，选择chrome菜单栏的更多工具－开发者工具，激活开发工具（译者注，和firebug一样）。这个操作的快捷键在window系统下是ctrl＋shift＋I，mac系统下是option＋command＋I。
现在你应该能在浏览器页面下方（或右侧）看到chrome 开发者工具面板（下文简称开发工具）。
点击面板左上角的device mode图标（智能手机形状的小图标），可以打开或关闭移动设备调试模式。
当打开device mode以后，页面将切换成如下图的设置＋展示区，同时手机小图标蓝色高亮，提示激活状态。
左上角device选项用于选择特定的移动设备进行测试。主要用于视觉上测试该设备情况下的响应式设计，以及触屏交互。
例如我们想测试在iPhone5下的效果，只需在如图下拉菜单点选iPhone5即可。
device mode将把页面切换到iPhone5的尺寸和视觉效果。同时可以注意到，鼠标已经变成一个圆圈（译者注，尺寸是用户的平均手指半径，可以直观看到容易点错的设计）。当上下移动鼠标，界面将上下滚动，模拟触屏的滑动交互行为。此时将鼠标悬停在链接上并不会触发悬停效果（因为触屏没有鼠标悬停）。
使用device mode来调试媒体查询是极为简洁的：点击左上角的“瀑布”图标，下方横条区域内即可查看所有断点（breakpoint）所在的宽度范围。
鼠标悬停在瀑布图标上，会提示侦测到多少个媒体查询。
在横幅内直接点击某个媒体查询断点，可以直接切换到该样式，使得各种尺寸之间的来回调试变得快捷省时。
每个媒体查询横条的颜色表示这个样式的类别：橙色是限定最小宽度的样式（译者注，例如至少766px宽度以上的，平板优化样式），蓝色是限定最大宽度的样式（译者注，例如320px以下宽度的，小屏手机样式），绿色为同时设定了宽度上下限的样式。（例如最小宽度320px，最大640px）。
使用device mode的网络功能，可以模拟测试各种网络条件下的响应式页面性能。点击网络下拉条，选择希望测试的网络，例如EDGE、3G等。这个功能的机制是通过限速来模拟移动网络接入。（译者注，网速选择包括没有信号，这是移动页面必测的内容之一）
结论
chrome的开发者工具一直以前端神器著称，device mode在移动端方面的补充，使其成为这个经典工具包里不可或缺的重要组成部分。
除了上文，device mode还有更多功能等待你去发现，例如：
- 改变设备像素比（PixelRatio），用于测试视网膜屏（retina）上的用户体验。
- 水平和垂直的标尺线（5px一格），便于肉眼检查像素数。（译者注，似乎我认识的交互都不需要，本来就可以肉眼裸看出1px差）
- 支持手动覆盖UA（user agent）字符串，只需在网络面板直接编辑。
如有任何关于响应式页面测试的方法、工具、思路，欢迎评论。