1. 测试效果图:
本次测试所用设备相关版本信息
-
Windows 10 + chrome 110.0.5481.100
-
Android 12 + chrome 110.0.5481.65
2. 工具准备
- PC端、手机端同时安装chrome(两端的chrome版本最好保持一致)
- USB 连接线(手机充电线)
3. 手机开启调试模式
- 打开开发者模式:手机设置中找到手机的系统版本号,连击3次或更多次(开启成功时会弹出相关成功提示,如:您正处于开发者模式)
-
打开USB调试:手机设置中找到【开发者人员选项】(可能有的手机必须打开了开发者模式才能找到开发者人员选项)
-
4. PC端chrome查找 USB 设备
浏览器访问chrome://inspect/#devices
,勾选Discover USB devices
5. 调试
手机端chrome浏览器访问需要调试的页面,chrome://inspect/#devices
上会展示出对应选项
针对需要调试的页面,点击下方的
inspect
链接打开对应页面的Devtools
,这样就能查看和调试页面在移动端的效果了注意: 两端chrome版本不一致时inspect打开的Devtools可能无法正常显示,可根据提示点击
inspect fallback
选项可打开页面正常显示