真机调试是唯一能准确捕获移动端 touch 事件完整结构的方法；需开启开发者选项、USB调试，用 chrome://inspect 连接真机，在 DevTools 中通过 Console、Elements 或 Sources 面板验证事件。
要在没有触控屏的 Windows 或 macOS 电脑上准确调试移动端网页中的 touchstart、touchmove、touchend 等触摸事件，必须绕过桌面端鼠标模拟的局限性，直接捕获真机触发的真实事件对象结构和时序行为，否则 console.log(e.touches) 永远为空或坐标错乱。
用 chrome://inspect 连接真机调试
这是唯一能拿到真实 touches、targetTouches 和 changedTouches 数组完整结构的方法，比设备模拟器可靠得多。
第一步：在 Android 手机「设置 → 关于手机」中连续点击「版本号」7 次，激活开发者选项；返回后进入「系统 → 开发者选项」，开启「USB 调试」。
第二步：用原装 USB 数据线连接手机与电脑，在手机弹出的授权框中勾选「始终允许」并点确定；若无弹窗，检查 USB 连接模式是否为「文件传输（MTP）」而非「仅充电」。
第三步：在桌面 Chrome 地址栏输入 chrome://inspect → 点击右上角「Configure…」→ 确保 localhost:9222 已在目标列表中，并勾选「Discover USB devices」。
第四步：在手机 Chrome 中打开你的测试页（必须是 HTTP/HTTPS 协议，不能是 file://）→ 返回 chrome://inspect 页面，等待 3～5 秒，设备名和页面标题将自动出现 → 点击右侧「inspect」链接。
在 DevTools 中验证触摸事件是否生效
打开后立即切换到 Console 面板，手动触发一次触摸操作（用手指点手机屏幕），观察是否有日志输出。
方法一：直接监听全局 touchstart
在 Console 中粘贴执行：document.addEventListener('touchstart', e => console.log('?', e.touches.length, e.touches[0]?.clientX));
然后轻触手机屏幕任意位置——若看到带数字的日志，说明事件通路已打通。
方法二：检查目标元素是否绑定了监听器
切换到 Elements 面板 → 点击左上角「选取元素」图标 → 在手机屏幕上点选你要调试的按钮或区域 → 右侧切换到「Event Listeners」标签 → 展开「touchstart」，确认回调函数路径可见；如果这里为空，说明 JS 未执行或选择器错误。
方法三：打断点追踪事件流
切到 Sources 面板 → 左侧文件树中找到绑定 touchstart 的 JS 文件 → 在事件回调函数第一行点击行号设断点 → 再次触碰手机屏幕 → DevTools 会暂停执行，此时可展开 e 对象，逐层查看 touches、changedTouches 的坐标、identifier、target 等字段值。
设备模拟器里快速验证基础逻辑
仅用于初期排查语法错误或流程跳转，不能替代真机调试。
按 Ctrl+Shift+M（Windows）或 Cmd+Shift+M（Mac）打开设备工具栏 → 点击右上角三点菜单 →「More tools」→「Sensors」→ 将「Touch」设为 Enabled。
现在你可以用鼠标左键单击页面来触发 touchstart/touchend，但注意：鼠标无法生成多点 touches，也无法模拟 touchmove 滑动轨迹和 pinch-zoom 手势。
按住 Shift 键 + 拖动鼠标可模拟双指缩放，右键长按可触发 contextmenu 或部分 touchend 行为，仅作辅助验证。
