Reveal是一个iOS程序界面调试工具。使用Reveal,我们可以在iOS开发时动态地查看和修改应用程序的界面。
对于动态或复杂的交互界面,手写UI是不可避免的。通过Reveal,我们可以方便地调试和修改应用界面,免去了每次修改代码后重新启动的痛苦。
Reveal简介
Reveal (http://revealapp.com/) 是一个界面调试工具。使用Reveal,我们可以在iOS开发时动态地查看和修改应用程序的界面。它类似Chrome的“审查元素”功能,我们不但可以在运行时看到iOS程序的界面层级关系,还可以实时地修改程序界面,不用重新运行程序就可以看到修改之后的效果。
在使用时,我们将Reveal连接上模拟器或真机上正在运行的iOS程序,然后就可以查看和调试iOS程序的界面。
上图是Reveal的运行界面,其界面主要分成3部分:
左边部分是整个界面的层级关系,在这里可以以树形级层的方式来查看整个界面元素。
中间部分是一个可视化的查看区域,用户可以在这里切换2D或3D的查看方式,这里看到的也是程序运行的实时界面。
右边部边是控件的详细参数查看区域,当我们选中某一个具体的控件时,右边就可以显示出该控件的具体的参数列表。我们除了可以查看这些参数值是否正确外,还可以尝试修改这些值。所有的修改都可以实时反应到中间的实时预览区域。
Reveal工具适合调试非Interface Builder创建的界面,Interface Builder中创建的xib和storyboard在企业开发中并不是总能胜任。
一方面的原因是企业开发常常是多人协作,xib和storyboard对于版本管理工具并不友好,例如xib和storyboard中有编辑者使用的操作系统和Xcode的版本号,这样一旦协同开发者的操作系统版本或Xcode版本不一致,则每次即使是打开xib和storyboard不做任何操作都会修改其内容。
另一方面是由于商业应用的界面复杂性,xib和storyboard并不能方便地提供更细粒度的模块复用。例如我们在开发猿题库时,为了复用,我们将很多按钮风格都进行了定制,如果使用xib或storyboard,则不能很好的管理这些按钮。
使用Reveal可以很好地调试使用代码编写的UI界面,下面我们来看具体如何使用Reveal来进行界面调试。
Reveal的使用
用Reveal连接模拟器调试
Reveal官方介绍了好几种办法使Reveal连接模拟器,都需要修改工程文件。但如果修改了工程文件,就需要参与项目开发的所有人都装有Reveal,这其实是相当不友好的。本节要介绍一种不修改任何工程文件的办法,在实际使用中,这种办法最简单方便。该方法的步骤如下:
首先打开Terminal,输入 vim ~/.lldbinit
创建一个名为.lldbinit
的文件,然后将如下内容输入到该文件中:
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调试功能
接下来,我们在AppDelegate类的 application: didFinishLaunchingWithOptions:
方法中,作如下3步操作(如下图所示):
点击该方法左边的行号区域,增加一个断点,之后右击该断点,选择“Edit Breakpoint”。
点击”Action”项边右的”Add Action”,然后输入“reveal_load_sim”
勾选上Options上的”Automatically continue after evaluating”选项。
之后我们运行模拟器,然后打开Reveal,就可以在Reveal界面的左上角,看到有模拟器可以连接调试,选择它,则可以在Reveal中查看和调试该iOS程序的界面了。
用Reveal连接真机调试
要用Reveal连接真机调试,我们需要先把Reveal的动态链接库上传到真机上。由于iOS设备有沙盒存在,所以我们只能将Reveal的动态链接库添加到工程中。
点击Reveal菜单栏的”Help”->”Show Reveal Library in Finder”选项(如下图所示),可以在Finder中显示出Reveal的动态链接库:libReveal.dylib
我们将libReveal.dylib文件拖动到目标Xcode工程中,Xcode默认情况下错误地将libReveal.dylib设置到了”Link Binary With Libraries”下,我们需要进行一下调整,将其中”Link Binary With Libraries”中删除,然后将其添加到“Copy Bundle Resources”下面。
之后用Reveal连接真机的方式和连接模拟器的方式类似,我们只需要把上一节提到的断点Action的内容从reveal_load_sim
改成reveal_load_dev
即可。
用Reveal调试其它应用界面
如果你的设备越狱了,那么还可以用Reveal来”调试“其它应用界面,什么时候会有这种奇怪的需求呢?——当我们想学习别人是如何实现界面效果的时候。iOS设备的目录/Library/MobileSubstrate/DynamicLibraries
下存放着所有在系统启动时就需要加载的动态链接库,所以我们只需要将Reveal的动态链接库上传到该目录即可。
对于越狱的设备,我们可以在安装OpenSSH之后,用scp来上传该文件。具体步骤如下:
将
libReveal.dylib
上传到/Library/MobileSubstrate/DynamicLibraries
如果
libReveal.dylib
没有执行权限,用chmod +x libReveal.dylib
命令,给其增加执行权限执行
killall SpringBoard
重启桌面
下图是我学习网易新闻客户端iPad版时的截图:
总结
除了Reveal(http://revealapp.com/)外,PonyDebugger(https://github.com/square/PonyDebugger)和Spark Inspector(http://sparkinspector.com/)也是同类型的界面调试工具,可以在程序运行时动态调试iOS应用界面。其中PonyDebugger是免费并且开源的,Reveal和Spark Inspector是收费的,不过功能相对更加强大。
对于动态或复杂的交互界面,手写UI是不可避免的。通过Reveal,我们可以方便地调试和修改应用界面,免去了每次修改代码后重新启动的痛苦。