通过电脑浏览器调试真机h5兼容问题
前言
- 在h5开发过程中,起初我们使用PC浏览器的手机模式打开开发中的页面,并使用控制台进行调试,但实际真机兼容性问题无法调试到;在这种情况下,我们通常使用vConsole(即移动端的控制台)来调试,但vConsole的功能和PC chrome 控制台比,想去甚远。
- 本文提供了通过电脑浏览器调试真机h5兼容问题的方法
Android
真机 + USB + Chrome Inspect
- 参考文档:Android 设备的远程调试入门
云真机 + adb远程 + Chrome Inspect
公司内部通常有云真机平台,可以通过adb远程来进行连接(具体略)
- 效果:
iOS
真机 + USB + safari
- 步骤
-
a. mac电脑——safari——偏好设置——高级菜单:勾选“在菜单中显示开发菜单”
-
b. iPhone——设置——safari——高级:打开“JavaScript开关”和“web检查器开关”
-
c. 将iphone用数据线连接到mac电脑上,mac电脑上打开safari,运行手机app里的web页面,在开发菜单中选择连接的手机,找到调试的网页,就能在Safari里面调试了
-
d. 在Safari中鼠标右键,选择检查元素,就可以看见Safari控制台了
- 优点:可以像电脑chrome开发一样,查看各个元素和控制台输出结果等等,功能比vConsole全
- 缺点:现在只支持手机safari内的h5,不支持app内的h5
Xcode simulator + 模拟器包 + safari
- 效果:
- 步骤
-
a. 安装Xcode:在mac电脑的App Store中安装
-
b. 打开模拟器:Xcode——Open Developer Tool——Simulator
-
c. 切换模拟器中的手机型号:File——Open Simulator——ios 14.0——iPhone xx(注:只能切换手机型号,不能切换系统)
-
d. 安装模拟器包,解压后,把应用程序直接拖拽到模拟器屏幕中
-
e. 在app中打开web页面,在safari——开发中找到相应页面并调试
- 优点
- a. 可以解决chrome不支持12px的问题
- b. 兼容性测试,各种机型,各种系统
- c. 无需数据线连接
- d. 无需像真机一样需要charles的各种配置(手机配置代理、安装https证书等)即可实现抓包以及在模拟器上直接访问localhost地址(用localhost 或 自定义的地址均可)