思路:
搜索一下 hubilder xcode 真机调试
Mac里需要装xcode
注意xcode版本 和huilder版本
出问题可能是xcode和hbuilder版本问题
Google下即可
HBuilder对前端代码的调试方式有边改边看、真机运行、webkit remote debug真机调试3种。
系列文章目录导航:
- 调试方式介绍一 边改边看
- 调试方式介绍二 真机运行
- 调试方式介绍三 webkit remote debug之Chrome调试Android手机
- [调试方式介绍四 webkit remote debug之Safari调试iOS手机]
Safari调试iOS手机概述
对于HTML5的开发,大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验,不仅能快速方便调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式,还能跟踪分析页面资源加载性能等问题。
对于移动平台的开发者来说,从iOS5.0开始,也可以通过Safari的Web Inspector工具连接设备对应用进行调试。
调试效果如图所示:
我们有2种方式,一种是使用xcode iOS模拟器,一种是使用iPhone、iPad、iTouch等真实设备。
如果使用xcode模拟器,可以直接使用safari的控制台debug。
如果使用真机,由于iOS有签名校验机制,正式包不允许safari debug,所以安装在真机上的包必须是测试签名打的包。此时参考如下步骤:
真机调试环境
准备环境
- Mac OS 10.9以上系统。无论使用模拟器还是真机,由于safari只有mac版本,所以必须配备mac电脑。
- xcode iOS模拟器
- 如果使用真实手机debug,还需要:
- 苹果开发者账号,申请苹果开发证书(Certificates)和描述文件(Provisoning Profiles)
- iOS5.0以上设备(iPhone、iPad、iTouch均可)
申请开发证书和描述文件
参考iOS证书(.p12)和描述文件(.mobileprovision)申请
使用HBuilder App云端打包获取调试安装包
在HBuilder中选中要调试的应用,在菜单中选择“发行”->“App打包”,打开“App云端打包”界面:
- AppID:苹果开发者中心申请的应用标识,必须与申请描述文件时选择的一致
- 私钥证书:苹果开发者中心申请的Development证书,必须是p12格式证书
- 私钥密码:导入苹果开发者证书的密码,在导出成p12证书时设置
- pfofile文件:苹果开发者中心申请的描述文件
提交App云端打包成功后可获取ipa安装包:
开启iOS设备的调试功能
打开“设置”程序,进入“Safari”->“高级”页面开启“Web检查器”:
模拟器调试环境
使用模拟器调测更为方便。
准备环境
- Mac OS 10.9以上系统
- XCode6.0以上程序
安装XCode程序
在Safari中打开XCode下载页面 可以选择通过App Store,按提示一步步安装:
或者可以下载Beta版本dmg文件,在Finder中双击dmg文件按提示一步步安装:
HBuilder中启动模拟器运行
使用Safari调试
打开“开发者”菜单
运行Safari,点击“Safari”菜单下面的“偏好设置(Preferences...)”,切换到“高级选项(Advanced)”:
真机设备连接调试
如果是真机点击“开发(Develop)”弹出菜单会出现设备名称项,进入后显示设备上所有打开的“HTML页面”列表:
Web Inspector调试
打开Web Inspector界面后,即可调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式等操作: