如果你在開發PAD/手機所用WEB版應用，需要在桌面審查頁面元素、除錯指令碼，模擬移動裝置尺寸、事件、位置等資訊，

那麼可以使用Chrome開發者工具（DevTools）提供的強大的移動模擬功能，支援主流移動觸控裝置，並且支援對Android的遠端除錯。

本文是對Google官方文件Mobile Emulate章節的翻譯，原文連結如下：

移動模擬

內容

• 模擬觸控事件
• 模擬裝置視角（尺寸/規格/版本）
• User Agent模仿
• 網路頻寬流量控制
• 地理定位覆蓋
• 裝置方向覆蓋
• CSS媒體型別模擬
• FAQ

模擬觸控事件

由於大部分桌面機器都不支援觸控事件，所以對觸控（Touch）事件進行測試比較難。如果需要在移動裝置上進行測試將拖長你的開發週期，因為每個變更都得部署到伺服器上然後用裝置訪問，而且裝置上還無法利用除錯工具。

解決方案是在你的桌面機器上模擬觸控事件。對於單點觸控事件，Chrome開發者工具支援單點觸控事件（singletouch event）模擬，這樣在桌面上除錯移動網頁應用會更加容易。

為了啟用觸控事件模擬（touch event emulation），需要做如下設定:

1. 點選開發者工具右下角Settings圖示，並點開Overrides設定面板（更新20140917：如果沒有這個設定面板，請查詢是否有Emulation標籤頁）
2. 向下滾動並勾選"Enable touch events"單選框
3. 重新載入頁面

現在你的滑鼠會變成一個小圓狀，並且在頁面右上角會提示Overrides：Touch字樣，這樣你的滑鼠操作就可以模擬相關的觸控事件：

注意：

• 和其他很多覆蓋（overrides）功能一樣，這個功能也僅在開發者工具開啟的情況下工作；
• 滑鼠會變成一個小圓狀，用來模擬手指觸控點大小；
• 啟用"Emulate touch events"並不會完全禁用滑鼠事件，就如同在觸控式螢幕上一樣；
• 在滑鼠點選時，觸發事件的次序目前是：touchstart > mousedown > touchmove > touchend > mouseup > click. 而在觸控裝置上，這個順序有點不一樣。這是個問題，開發者工具將會很快更新為使用正確的順序；

除錯觸控事件

1. 開啟原始碼（Sources）面板
2. 展開"Event Listener Breakpoints"子面板
3. 在"Touch"勾選"touchstart" 和 "touchmove" 事件
4. 把滑鼠移動到畫圖區域
5. 偵錯程式會中斷在draw()方法上

如果你有一個支援觸控輸入的裝置，那麼還可以模擬多點觸控事件，比如最新的蘋果MacBook。更多輔助資訊可以閱讀文章Multi-touch web development guide on HTML5 Rocks的"Developer tools"章節。