Home

使用safari调试iphone上的Hybrid App

注意：该调试方案无需借助XCode 调试分两大类

• Xcode模拟器+Safari调试
• iphone+Safari调试

有Xcode环境的同学可以看看《基于XCode模拟器调试JavaScript.docx》 这里我们讲解一下使用真机iphone＋safari对混合（Hybrid）开发的调试方案。

调试前环境准备

1. 拥有自己对Apple开发者账号及开发者证书（即Development证书）
2. Mac及safari浏览器（随OSX自带的即可）
3. 真机（iphone）一台
4. 真迹数据线，用于连接真机和Mac

调试过程

基于safari对真机调试过程大致分为如下步骤：

1. 制作自己的证书
2. 上传自己的证书至打包服务器
3. 使用自己的证书对代码工程进行云打包
4. 安装打包好的app至iphone
5. iphone连接mac，使用safari进行调试

开发者账号和证书的说明

一个开发团队（组织或个人）应有自己的开发者账号和开发者证书。证书分为Development和Production证书，前者用于开发调试等，后者用于正式发布app并上架AppStore使用。
有人要问为什么需要有自己的账号和证书？
一句话，这就是App开发规范，这也保证了你的团队（或个人）开发出来的app能上架AppStore并仅仅属于你的资产。
关于开发者账号和证书建议你先看看这篇文章
注意，调试的时候必须使用开发者证书（即Development证书）

如何制作证书及上传证书

如何制作证书参看制作ios证书

如何使用iuapmobile云编译及证书上传参看开发者账号相关

真机调试步骤

• 先说一下真机调试的坑（特别注意）

只有使用自己的开发者证书打出来打app，安装到手机后，才可以借助safari进行调试。
这里需要说明的是：
mac上的safari的版本和手机iphone的ios版本是有关系的。
具体的这里就不详细赘述了，总之一句话，不要让mac上的safari版本和iphone上的ios版本差的太大，例如iPhone的ios版本为11.x.x，mac上safari版本为9.0.x，亲测就不行，safari在［开发］找不到iphone，无法调试，但是iphone的ios为10.x.x或9.x.x的话，就可以正常调试。

• 真机调试的具体步骤

1. safari打开开发功能
   打开Safari偏好设置，选中“高级菜单“，在页面最下方看到“在菜单中显示开发菜单”的复选框，在复选框内打钩，这样设置完毕就能在Safari菜单中看到开发菜单了
2. iphone开启调试
   打开手机进入设置->Safari->高级（最下面）->Web检查器打开，JavaScript开关打开
3. iphone连接mac使用safari调试 iphone数据线连到mac上，打开safari浏览器，运行手机app到要调试到要调试到页面，在safari开发菜单中选择连接的iphone，找到调试的网页，点击就能在safari里面调试了。

其实，真机调试的具体步骤，网上还是有不少文章的。不清楚的可以看看下面这些链接:

• safari调试iPhone app web页面
• 利用Safari调试APP WebView界面

调试中的注意事项（程序员的血泪史）

• 一定要使用开发者（Development）证书打包APP，不能使用Puduction证书
• safari浏览器如果始终不现实iphone一级菜单，可以检查一下是不是safari版本和ios版本差的过大造成的兼容问题
• 只有app打开的页面才能在safari中看到
• 如果先调试页面初始化、加载等逻辑，应先打js断点，然后通过safari的刷新功能来使页面重新加载进而调试
• 只能调试web页面，不能调试原生的UI
• 多看看safari提供的调试功能很有必要