界面调试工具Reveal的使用

前言

Reveal(https://revealapp.com)是一个iOS程序界面调试工具。使用Reveal,我们可以在iOS开发时动态的查看和修改应用程序的界面。

在开发中,对于动态或者复杂的交互界面,手写UI的不可避免的。通过Reveal,我们可以很方便的调试和修改应用页面,免去了每次修改之后还要重新启动程序的痛苦。


一. Reveal简介

Reveal类似Chrome的“审查元素”功能,使我们不但可以在运行时看到iOS程序的界面层级关系,还可以实时的修改程序界面,不用重新运行程序就可以看到修改之后的结果。

在使用时,我们将Reveal连接上模拟器或真机上正在运行的iOS程序,然后就可以查看调试iOS程序的界面。

下图是Reveal的运行界面,其界面主要分成三个部分:

1. 左边部分是整个界面的层级关系,在这里可以以树形层级的方式查看所有的界面元素。

2. 中间部分是可视化查看区域,用户可以在这里切换2D或者3D的查看方式,这里也能看到程序运行的实时界面。

3. 右面部分是控件详细的参数查看区域,当我们选中其中某个控件的时候,右边就可以显示出该控件的详细参数列表。除了在查看这些参数值以外,还可以修改这些值,所有的修改会实时的反应到中间的预览区域。


二. Reveal的使用

Reveal官方介绍的方法大多数需要修改工程文件,由于目前团队开发居多,那么如果修改了工程文件,就需要团队中其他人也都装Reveal,这是很不友好的。下面介绍不修改任何工程文件的情况下完成对模拟器和真机的调试方法。

2.1 创建.lldbinit文件,并编辑

打开终端,输入 vi ~/.lldbinit,创建一个.lldbinit文件,然后将如下内容输入到该文件中,并:wq保存退出。

command alias reveal_load_sim expr (void *)dlopen("/Applications/Reveal.app/Contents/SharedSupport/iOS-Libraries/libReveal.dylib", 0x2);

command alias reveal_load_dev expr (void *)dlopen([(NSString *)[(NSBundle *)[NSBundle mainBundle] pathForResource:@"libReveal" ofType:@"dylib"] cStringUsingEncoding:0x4], 0x2);

command alias reveal_start expr (void)[(NSNotificationCenter *)[NSNotificationCenter defaultCenter] postNotificationName:@"IBARevealRequestStart" object:nil];

command alias reveal_stop expr (void)[(NSNotificationCenter *)[NSNotificationCenter defaultCenter] postNotificationName:@"IBARevealRequestStop" object:nil];

该步骤其实是为lldb设置了4个别名,这样可以方便后续操作,这4个别名意义如下:

reveal_load_sim 为模拟器加载reveal调试用的动态链接库。

reveal_load_dev 为真机加载reveal调试用的动态链接库。

reveal_start 启动reveal调试功能。

reveal_stop 停止reveal调试功能。

注:reveal_load_sim等别名可以根据自己的喜好设置。

2.2 模拟器调试

在AppDelegate类的application: didFinishLaunchingWithOptions:方法中,进行如下三个步骤:

1. 在方法内部第一行增加一个断点,并编辑该断点“Edit Breakpoint”;

2. 单击“Action”右面的“Add Action”按钮,然后输入模拟器加载动态库的别名:“reveal_load_sim”;

3. 勾选“Option”上的“Automatically continue after evaluating actions”选项

设置调试模拟器断点

之后运行iOS程序,并打开Reveal,在Reveal界面的左上角看到是否有模拟器可以连接调试,如果有选择它,查看并调试iOS程序。

Reveal模拟器调试界面

2.3 真机调试

在开发中,大部分的调试设备是没有越狱的设备,那么使用Reveal来调试UI的步骤稍微复杂一些的。

要用Reveal连接真机调试,需要把Reveal动态链接库上传到真机上,由于iOS设备有沙盒存在,那么只能将Reveal的动态链接库添加到工程中,步骤如下:

1. 选择Reveal菜单栏中的“Help” -> “Show Reveal Library in Finder” -> “iOS Library”。

找到Reveal中iOS动态链接库

2. 找到iOS动态链接库libReveal.dylib库

libReveal.dylib库

3. 把libReveal.dylib库拖入到工程如图位置中

libReveal.dylib库位置

注:libReveal.dylib库必须在 “Copy Bundle Resources” 下,如果在“Link Binary With Libraries”中,必须删除。

4. 导入时选择“Copy items if needed”选项

Copy items if needed”选项

5. 由于连接模拟器的方式和连接真机方式类似,只需要吧AppDelegate断点Action内容从reveal_load_sim改为reveal_load_dev即可。

6. 添加Reveal运行脚本选项

添加脚本选项

7. 添加脚本内容

添加脚本内容

脚本内容如下:

set -e

if [ -n "${CODE_SIGN_IDENTITY}" ]; then

codesign -fs "${CODE_SIGN_IDENTITY}" "${BUILT_PRODUCTS_DIR}/${FULL_PRODUCT_NAME}/libReveal.dylib"

fi

8. 真机调试

真机调试成功

2.4 真机调试说明

1. 真机调试必须保证开发者电脑和手机都在统一wifi环境下;

2. 开发者证书必须和钥匙串中证书保持一致,而且只有一个,因为Reveal只能识别一个证书,如果在钥匙串中有多个以iPhone Developer开头的证书,先删除其他的,否则调试可能会不成功。

工程中的证书
钥匙串中的证书

三.总结

除了Reveal还有其他的调试工具,如PonyDebugger(https://github.com/square/PonyDebugger),也可以调试iOS应用界面,是免费而且是开源的,Reveal是收费的,不过功能相对强大。

推荐阅读更多精彩内容

  • Reveal是iOS开发工具中的神器之一,它能够在应用程序运行过程中调试应用程序界面。 通过Reveal我们可以连...
    jackfrued阅读 10,143评论 2 48
  • Reveal Reveal是分析、调试iOS应用UI的利器。 Reveal能够在运行时调试和修改iOS应用程序。它...
    fakepinge阅读 1,297评论 0 5
  • 最近不是特别忙闲来无事,研究一下,上网一看好的教程,但是都不是最新的,而且根据网上的教程坐下来根本就不行,直接上官...
    Zax_Smile阅读 9,136评论 6 15
  • 为一树金桂遮雨 只因你喜爱花香的馥郁 为一片星光辗转 只因你向往银河的璀璨 为一匹烈马试鞍 只因你渴望驰骋的快感 ...
    璇紫阅读 259评论 2 4
  • 儿时,总觉得长大了会幸福吧 于是我们拼命的想要长大, 可是,当你真正长大之后, 才发现,原来长大意味着永远失去那种...
    柠檬灯塔阅读 145评论 0 1