xuehaoyue

前言

  • 在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)

分类:

前端

技术点:

相关文章: