如何调试触摸屏事件？跨设备调试及触屏模拟方案咨询

一、在手机Chrome中启用开发者工具 #

手机Chrome默认隐藏了开发者工具入口，开启方式如下：

1. 打开手机Chrome，在地址栏输入 chrome://flags
2. 在搜索框中输入 Developer Tools，找到「Enable Developer Tools experiments」选项，切换为「Enabled」
3. 重启Chrome后，进入Chrome的「设置」页面，拉到最底部就能看到「开发者选项」，里面包含DevTools入口；也可以长按Chrome右上角的三个点菜单，检查是否出现「开发者工具」选项。

二、将手机端错误同步到电脑调试（推荐） #

用Chrome远程调试功能，能直接在电脑上查看手机端的控制台错误、调试代码，步骤：

1. 准备工作：
   • 电脑和手机连接同一WiFi网络；或者用USB线连接手机和电脑，同时在手机的「开发者选项」中开启「USB调试」（开启开发者模式：进入手机设置→关于手机→连续点击版本号，直到提示开启成功）
2. 电脑操作：
   • 打开电脑Chrome，在地址栏输入 chrome://inspect
   • 勾选页面中的「Discover USB devices」（USB连接时），等待页面识别到你的手机
3. 调试操作：
   • 手机打开你的测试网站，电脑的chrome://inspect页面会显示手机当前打开的标签页，点击标签页下方的「inspect」按钮，即可弹出电脑版DevTools，直接查看控制台错误、调试触屏事件，和调试电脑网页完全一致。

三、电脑上模拟触屏环境 #

不需要额外在线模拟器，电脑Chrome自带的设备模拟器就能满足需求：

1. 打开电脑Chrome，按F12调出DevTools
2. 点击DevTools左上角的「Toggle device toolbar」图标（类似手机的方形图标）
3. 在顶部的设备选择栏中，挑选一款带触屏的设备（比如Pixel 7），此时页面会切换为设备的屏幕尺寸
4. 用鼠标点击、拖拽页面，就能模拟触屏的点击、滑动事件；还能在DevTools的更多选项中模拟触摸压力、多点触控等场景，直接测试你的触屏代码。

内容的提问来源于stack exchange，提问作者Rewind