Google Chrome开发者工具-移动仿真：触摸事件仿真

如果你在开发PAD/手机所用WEB版应用，需要在桌面审查页面元素、调试脚本，模拟移动设备尺寸、事件、位置等信息，

那么可以使用Chrome开发者工具（DevTools）提供的强大的移动仿真功能，支持主流移动触摸设备，并且支持对Android的远程调试。

本文是对Google官方文档Mobile Emulate章节的翻译，原文链接如下：

https://developers.google.com/chrome-developer-tools/docs/mobile-emulation?hl=zh-CN

移动仿真

内容

• 仿真触摸事件
• 仿真设备视角（尺寸/规格/版本）
• User Agent模仿
• 网络带宽流量控制
• 地理定位覆盖
• 设备方向覆盖
• CSS媒体类型仿真
• FAQ

仿真触摸事件

由于大部分桌面机器都不支持触摸事件，所以对触摸（Touch）事件进行测试比较难。如果需要在移动设备上进行测试将拖长你的开发周期，因为每个变更都得部署到服务器上然后用设备访问，而且设备上还无法利用调试工具。

解决方案是在你的桌面机器上模拟触摸事件。对于单点触摸事件，Chrome开发者工具支持单点触摸事件（single touch event）模拟，这样在桌面上调试移动网页应用会更加容易。

为了启用触摸事件模拟（touch event emulation），需要做如下设置:

1. 点击开发者工具右下角Settings图标，并点开Overrides设置面板（更新20140917：如果没有这个设置面板，请查找是否有Emulation标签页）
2. 向下滚动并勾选"Enable touch events"单选框
3. 重新加载页面

现在你的鼠标会变成一个小圆状，并且在页面右上角会提示Overrides：Touch字样，这样你的鼠标操作就可以模拟相关的触摸事件：touchstart, touchmove和touchend.

注意：

• 功能探测比如Modernizr.touch现在可以在页面刷新时获得；
• 和其他很多覆盖（overrides）功能一样，这个功能也仅在开发者工具打开的情况下工作；
• 鼠标会变成一个小圆状，用来模拟手指触摸点大小；
• 启用"Emulate touch events"并不会完全禁用鼠标事件，就如同在触摸屏上一样；
• 在鼠标点击时，触发事件的次序目前是：touchstart > mousedown > touchmove > touchend > mouseup > click. 而在触摸设备上，这个顺序有点不一样。这是个问题，开发者工具将会很快更新为使用正确的顺序；

elem.ontouch*  事件目前不能被Enable touch events设置触发，但可以使用命令行标志来触发这些事件处理器，以Windows为例，桌面Chrome图标右键菜单的属性-〉运行中，添加  --touch-events 命令行运行参数，重启Chrome。

调试触摸事件

1. 打开 Canvas Fingerpaint Demo
2. 打开源码（Sources）面板
3. 展开"Event Listener Breakpoints"子面板
4. 在"Touch"勾选"touchstart" 和 "touchmove" 事件
5. 把鼠标移动到画图区域
6. 调试器会中断在draw()方法上

多点触摸（Multi-touch）

如果你有一个支持触摸输入的设备，那么还可以模拟多点触摸事件，比如最新的苹果MacBook。更多辅助信息可以阅读文章Multi-touch web development guide on HTML5 Rocks的"Developer tools"章节。

Pictures hosted in techbrood