DCloud_App_Array
DCloud_App_Array
  • 发布:2015-01-20 20:32
  • 更新:2020-05-22 18:01
  • 阅读:140157

Safari调试iOS应用

分类:HTML5+

HBuilder对前端代码的调试方式有边改边看、真机运行、webkit remote debug真机调试3种。
系列文章目录导航:

Safari调试iOS手机概述

对于HTML5的开发,大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验,不仅能快速方便调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式,还能跟踪分析页面资源加载性能等问题。
对于移动平台的开发者来说,从iOS5.0开始,也可以通过Safari的Web Inspector工具连接设备对应用进行调试。

调试效果如图所示:
iOS 调试效果图

我们有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云端打包”界面:
iOS App云端打包
正确配置生成调试包的参数

  • AppID:苹果开发者中心申请的应用标识,必须与申请描述文件时选择的一致
  • 私钥证书:苹果开发者中心申请的Development证书,必须是p12格式证书
  • 私钥密码:导入苹果开发者证书的密码,在导出成p12证书时设置
  • pfofile文件:苹果开发者中心申请的描述文件

提交App云端打包成功后可获取ipa安装包:

使用iTunes或iTools工具安装ipa到设备

开启iOS设备的调试功能

打开“设置”程序,进入“Safari”->“高级”页面开启“Web检查器”:

启动上一步安装的应用,并将设备连接到Mac电脑

模拟器调试环境

使用模拟器调测更为方便。

准备环境

  • Mac OS 10.9以上系统
  • XCode6.0以上程序

安装XCode程序

在Safari中打开XCode下载页面
可以选择通过App Store,按提示一步步安装:

或者可以下载Beta版本dmg文件,在Finder中双击dmg文件按提示一步步安装:

HBuilder中启动模拟器运行

HBuilder中选中要调试的应用,在Mac OS上安装好XCode后会自动检测支持的iOS模拟器。
在菜单中选择“运行”->"手机运行"->"iOS模拟器运行":

或者通过“真机运行”图标打开:

在列表中选择要运行的模拟器后,会自动启动iOS模拟器并运行要调试的应用:

使用Safari调试

打开“开发者”菜单

运行Safari,点击“Safari”菜单下面的“偏好设置(Preferences...)”,切换到“高级选项(Advanced)”:

勾选“在菜单栏显示"开发"菜单(Show Develop menu in menu bar)”,关闭偏好设置。
此时在Safari的工具栏出现“开发(Develop)”菜单:

真机设备连接调试

如果是真机点击“开发(Develop)”弹出菜单会出现设备名称项,进入后显示设备上所有打开的“HTML页面”列表:

点击“HTML页面”列表中的项即可打开Web Inspector调试界面

模拟器连接调试

如果是真机点击“开发(Develop)”弹出菜单会出现“iOS Simulator”项,进入后显示模拟器上所有打开的“HTML页面”列表:

点击“HTML页面”列表中的项即可打开Web Inspector调试界面

Web Inspector调试

打开Web Inspector界面后,即可调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式等操作:
iOS 调试效果图
可通过以下方式切换“DOM树(DOM Tree)”和“源码(Source Code)”方式显示页面:

在“源码(Source Code)”模式可在页面左侧添加断点进行调试。

7 关注 分享
kaiven Nation ___K Charles 超人爷爷 Trust diken

要回复文章请先登录注册

luckgo@21cn.com

luckgo@21cn.com

safari控制台不显示console.log()打印的日志,请问是咋回事?
2020-05-22 18:01
hejun.cn@outlook.com

hejun.cn@outlook.com

回复 hejun.cn@outlook.com:
safari不显示模拟器设备,请问模拟器运行是否需要配置个人证书?
2019-12-24 11:04
hejun.cn@outlook.com

hejun.cn@outlook.com

macOS 10.15.1 safari(on mac) 13.0.3
运行模拟器后无法debug app内置webview
2019-12-24 11:03
camelwoo

camelwoo

无法调试,safari 中显示“无可检查的应用程序”。
2017-12-20 00:03
qq421065846

qq421065846

从七月中旬开始做混合app,到8月中下旬app上线。已经完成了一个简单的app并且在腾讯和苹果appstore上线了,这期间遇到过无数的坑,主要是熟悉和使用mui框架,h5+,以及调用原生api等,入坑已深,现在正准备开发一款旅游类的混合app,原型图已经出。现在准备开工了。同时,希望有一起做混合app的,有兴趣加qq群654230427一起讨论交流学习,爬坑,共同进步。
2017-09-12 11:11
瞳player

瞳player

回复 1055281892@qq.com:
windows没有ios模拟器,但是可以调试10系统以下
2017-08-10 09:03
1055281892@qq.com

1055281892@qq.com

没有mac电脑,只使用windows 版本电脑+iso模拟器能实现吗?
2017-06-21 14:44
竹青

竹青

win系统中简单的iOS证书创建图文工具,可以参考https://ask.dcloud.net.cn/article/1257
2017-04-17 14:12
674797647@qq.com

674797647@qq.com

专业解决iOS开发正证书,描述文件、真机测试、苹果商城上架等问题。请添加QQ:674797647
2017-04-04 01:20
dongjie

dongjie

回复 503633985@qq.com:
把ios端的safari的Web检查器打开,MAC就可以显示手机设备上safari所打开的页面,但是HBuider是个应用,如何调试应用的页面呢?
2016-12-01 21:48