H5页面地址嵌入IOS WebView中如何调试?

5,361 阅读1分钟

webView加载H5页面有两种方式:

  1. 在H5页面开发完成后,打包丢入一个静态资源服务器。将页面对应的地址提供给native端开发人员。
  2. 将打包后的文件直接提供给native, 后续APP打包时,将静态资源直接打包进APP内部。

调试开发程序有两种方式:

  1. 通过Xcode的模拟器进行调试
  2. 通过真机测试

打包环境准备:

  1. 使用XCode打开ios项目的workspace文件
  2. 将密钥添加到XCode

1. 通过模拟器调试:

进入加载H5的页面

2. 通过真机调试:

 设备连接

移动设备通过数据线连接到电脑上。否则无法通过Safari调试。

打开APP中有H5的页面

使用Safari浏览器调试代码

  • 打开iPhone/IPad的Safari配置

设置 - >  Safari浏览器 ->  高级 -> 打开web检查器

  •  打开已安装的APP

打开APP,进入待调试的使用Webview加载的页面

  • 打开Safari浏览器
开发 - > XXX的iPhone/iPad -> 打开对应的网址 -> 可打断点进行调试

如果在safari中看不到“开发”菜单,可以通过如下步骤设置:

safari浏览器 - > 偏好设置 - > 高级 -> 勾选☑️“在菜单栏中显示开发菜单”