前言

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

Android

真机 + USB + Chrome Inspect

云真机 + adb远程 + Chrome Inspect

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

  • 效果：

    image.png

iOS

真机 + USB + safari

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

Xcode simulator + 模拟器包 + safari

  • 效果：
    image.png
  1. 步骤
    a. 安装Xcode：在mac电脑的App Store中安装
    b. 打开模拟器：Xcode——Open Developer Tool——Simulator
    image.png
    c. 切换模拟器中的手机型号：File——Open Simulator——ios 14.0——iPhone xx（注：只能切换手机型号，不能切换系统）
    image.png
    d. 安装模拟器包，解压后，把应用程序直接拖拽到模拟器屏幕中
    e. 在app中打开web页面，在safari——开发中找到相应页面并调试
  2. 优点
    a. 可以解决chrome不支持12px的问题
    b. 兼容性测试，各种机型，各种系统
    c. 无需数据线连接
    d. 无需像真机一样需要charles的各种配置（手机配置代理、安装https证书等）即可实现抓包以及在模拟器上直接访问localhost地址（例：自定义的xhy.meituan.com）

版权声明：本文为xuehaoyue原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xuehaoyue/p/14327782.html