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

前言

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

  1. 优点：可以像电脑chrome开发一样，查看各个元素和控制台输出结果等等，功能比vConsole全
  2. 缺点：现在只支持手机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——开发中找到相应页面并调试

  1. 优点
  • a. 可以解决chrome不支持12px的问题
  • b. 兼容性测试，各种机型，各种系统
  • c. 无需数据线连接
  • d. 无需像真机一样需要charles的各种配置（手机配置代理、安装https证书等）即可实现抓包以及在模拟器上直接访问localhost地址（用localhost 或 自定义的地址均可）
posted @ 2021-01-25 22:21  妙音天女  阅读(782)  评论(0)  编辑  收藏  举报