使用 Chrome 开发工具的设备模式来开发响应式 Web 应用

我们在桌面和移动设备上开发网站，通常我们倾向于最初的桌面体验。 但是这与越来越多的用户使用移动设备访问网络的趋势相脱离。 为了提高网站的用户体验，我们需要准确地知道网站在移动设备上的效果。 不久前，Chrome 开发者工具包里加入了手机模拟器特性，但是它不能连接真实的设备，还需要很多试验和调试。 Chrome38 Beta版包含一个新的设备模式：一次点击就可以启动手机模拟器、检查设备连接情况、模拟片状网络。

现在，开启chrome“获取元素”图标右侧的设备模式。 开启后，chrome会自动显示一个手机模拟器窗口，它可以模拟手机上所有的触摸事件。 通过调整模拟器而不是整个浏览器窗口的大小，你可以方便的测试各种尺寸的屏幕。 你可以选择模拟器中预置的手机型号，它会自动调整模拟器窗口、触摸效果、用户代理、屏幕分辨率等设置。

每一次媒体查询都会以可视化的形式表现出来，因此你可以在模拟器中关联断点。 点击一次即可调整模拟器大小，这使我们可以反复测试网站关联的样式。 如果你想修改媒体查询模块，点击右键，跳转到定义css的代码。

最后,设备模拟器需要精确的将连接显示给移动用户.例如,一个3G连接相对于办公室的快速WIFI而言,极大程序的限制了网站的体验.DevTools可以帮助模拟网络连接状况(吞吐量和延迟),如EDGE, 3G, 4G – 甚至是离线.  

典型的系统级的网络条件限制了所有的东西,DevTools却只限制当前的tab.这使得app可以离线运行,并尝试AppCache和Service Worker场景,同时,在另一个tab浏览参考资料.

请在你的开发工作流中试验Device Mode,然后告诉我你的想法.如果你急切的想知道更多关于DevTools的优点,请查看我的页面Google I/O 2014 talk: Developing Across Devices.