通过电脑浏览器调试真机h5兼容问题

前言

• 在h5开发过程中，起初我们使用PC浏览器的手机模式打开开发中的页面，并使用控制台进行调试，但实际真机兼容性问题无法调试到；在这种情况下，我们通常使用vConsole（即移动端的控制台）来调试，但vConsole的功能和PC chrome 控制台比，想去甚远。
• 本文提供了通过电脑浏览器调试真机h5兼容问题的方法

Android

真机 + USB + Chrome Inspect

• 参考文档：Android 设备的远程调试入门

云真机 + adb远程 + Chrome Inspect

公司内部通常有云真机平台，可以通过adb远程来进行连接（具体略）

• 效果：
  
  
  
  

iOS

真机 + USB + safari

• 参考文档：iOS开发之safari调试iPhone app web页面

1. 步骤
   
   a. mac电脑——safari——偏好设置——高级菜单：勾选“在菜单中显示开发菜单”
   
   
   
   b. iPhone——设置——safari——高级：打开“JavaScript开关”和“web检查器开关”
   
   
   
   c. 将iphone用数据线连接到mac电脑上，mac电脑上打开safari，运行手机app里的web页面，在开发菜单中选择连接的手机，找到调试的网页，就能在Safari里面调试了
   
   
   
   d. 在Safari中鼠标右键，选择检查元素，就可以看见Safari控制台了
   
   
2. 优点：可以像电脑chrome开发一样，查看各个元素和控制台输出结果等等，功能比vConsole全
3. 缺点：现在只支持手机safari内的h5，不支持app内的h5

Xcode simulator + 模拟器包 + safari

• 效果：
  
  

1. 步骤
   
   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——开发中找到相应页面并调试
2. 优点
   
   a. 可以解决chrome不支持12px的问题
   
   b. 兼容性测试，各种机型，各种系统
   
   c. 无需数据线连接
   
   d. 无需像真机一样需要charles的各种配置（手机配置代理、安装https证书等）即可实现抓包以及在模拟器上直接访问localhost地址（例：自定义的xhy.meituan.com）