移动webH5真机调试方案

移动webH5真机调试方案

1 Android + chrome

手机端安装Chrome浏览器,使用USB连接到PC,同时打开手机的USB调试模式。
然后在PC端打开chrome浏览器,地址栏中输入: chrome://inspect,选中"Discover USB devices"选项,打开页面进行调试。

注意:

  1. 部分安卓手机开发者模式的打开方式比较隐蔽:设置 > 关于手机 > 内部版本号,连续点击七次,退回上一级菜单,才能看到"开发者模式"
  2. 安卓手机还可以打开微信App的webview的debug模式,只需要在微信里访问http://debugx5.qq.***,在打开的页面里将调试模式打开并重启微信即可,然后打开chrome://inspect、翻墙、连接手机就可以调试了

2 iOS + Safari

iPhone和Mac自带Safari浏览器,但同样要使用USB连接到PC,然后分别对Mac和iPhone进行如下设置:

  • Mac浏览器设置:Safari -> 偏好设置 -> 高级 -> 勾选"在菜单栏中显示开发"
  • iPhone 设置:设置 -> Safari -> 高级 -> 打开 Web 检查器

通过手机的 Safari 来打开 H5 页面,然后将Mac上的Safari浏览器打开,选择开发 -> iPhone,就出现调试界面了,在iPhone上也能断点调试js了。

注意:

Mac上可以使用Simulator模拟器(需要先安装Xcode),可以模拟调试多个版本iPhone手机,还可以配合Safari来调试页面,此模拟器的完成度几乎可以替代真机。

转载请说明出处内容投诉
CSS教程_站长资源网 » 移动webH5真机调试方案

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买