使用Reveal调试第三方UI

即便你没用过Reveal，也一定听说过它。它是一个功能强大的运行时UI调试工具，并且，有两种不同的用法。如果你把它集成到自己的项目中，就可以通过Reveal的GUI方便的调试界面了。但是，如果你有一台越狱的iOS设备，就可以通过一些方法，来调试第三方的App。这样，无论是我们学习别人优秀的UI布局技术，还是要从UI入手做一些代码分析，都是极为方便的。因此，在这一节里，我们就来了解Reveal的这两种不同的用法。

在项目中集成Reveal

先来看如何在正向开发中使用Reveal，当然，安装过程我们就不讲了。为了演示，我们创建了一个叫做RevealDemo的Single View Application。然后，完成下面的操作；

• 在RevealDemo目录中，执行pod init生成一个Cocoapods的配置文件；
• 在生成的Podfile中添加下面的内容，由于在release版本中包含reveal的代码会导致应用无法上架，因此，这里我们加入了:configurations => ['Debug']，这样，就可以只在Debug模式下才集成Reveal了：

target 'RevealDemo' do
  use_frameworks!
  pod 'Reveal-SDK', :configurations => ['Debug']
end

• 执行pod install安装；
• 完成后，用Xcode打开生成的RevealDemo.xcworkspace；
• 按cmd + r直接编译执行；

实际上，就是一套标准的Cocoapods集成方法。我们等App执行起来之后，打开Reveal的客户端，点一下工具条中间的位置，如果一切顺利，就可以在下来菜单中，发现所有可以调试的App。当然，现在我们只有一个，就是RevealDemo。选择它，就可以在这里调试UI了。

image

接下来，我们简单说下这个工具的用法。

理解Reveal UI的构成

image

从上面的图中可以看到，从上到下分成两部分，分别是工具栏和软件的工作区域。我们可以按cmd + k，打开工具栏上的App面板选择要调试的应用。

接下来，工作区域，从左到右分成三部分：

• 左边的部分，叫做Outline，也就是整个UI的树形结构。我们可以按cmd + l切换这部分的显示；
• 中间的部分，叫做Canvas，用于显示调试的结果。App的UI结构会被“分层”绘制出来，方便我们理解UI之间的关系；
• 右边的部分，叫做Inspectors，我们可以按cmd + i切换这部分的显示。根据我们在Outline中选择的对象不同，这部分可以设置的属性也不同；

Outline

了解了整个UI之后，我们来看Outline部分。这部分随着我们不断展开UI列表，中间Canvas的部分也会逐级展开：

image

我们可以通过这样的方式，合并不需要探查的UI。或者，我们也可以双击Outline中的某一层UI，这样Reveal就会单独把它显示出来。例如，这里大家看到的，就是iOS系统状态栏的部分：

image

然后，我们可以按cmd + [跳转到当前view的parent view，也可以按cmd + ]进入到它的下一个subview。

另外，在Outline底部，还有一个筛选器。当我们在这里输入内容之后，Outline和Canvas中就会高亮显示搜索的部分了。

image

Canvas

Reveal的Canvas从上到下也分成三个部分，最顶部的5个按钮用来切换UI透视图的显示方式，我们可以按cmd + 1 / 2 / 3 / 4 / 5切换显示。

中间的部分则是我们已经看到的UI透视图。

底部左边也有三个按钮，从左到右分别是：在透视图上显示约束、在透视图上显示系统View（这个功能我们可以按shift + cmd + t）来切换、显示隐藏的View。

Inspectors

最右边的Inspector区域，分成4大类功能。我们可以按opt + cmd + 1 / 2 / 3 / 4来切换。根据我们在Outline中选择的对象不同，这部分可以设置的内容也有差别。大体上，就是和UI属性以及尺寸有关的内容，大家感兴趣的话可以自己去看看，我们就不在这里展开了。

在越狱设备中使用Reveal

了解了Reveal的基本用法之后你可能会想，我在Xcode里也可以进行类似的调试啊，而且功能也差不多。为什么还要用Reveal呢？接下来，这个理由也许可以打动你。如果你有一台越狱的iOS设备，就可以用类似的方式，来调试第三方应用。

该怎么做呢？

首先，我们要在Cydia中，安装一个叫做Cydia Substrate的插件：

5

这个插件的功能很强大，不过我们先不过多展开，之所以要安装它，只是因为稍后，我们要通过它把Reveal的动态库加载到要调试的目标应用里。

其次，在Reveal的菜单中，我们选中Help -> Show Reveal Library in Finder -> iOS Library：

image

第三，在Finder中，把其中的RevealServer拷贝到一个特定目录，例如/tmp/reveal，并且重命名成libReveal.dylib；

image

第四，同样在/tmp/reveal中，新建一个libReveal.plist文件，在其中添加下面的内容：

Filter = { Bundles = ("com.apple.AppStore"); };

这时，我们的/tmp/reveal目录应该是这样的：

image

第五，把libReveal.plist和libReveal.dylib上传到越狱iOS的*/Library/MobileSubstrate/DynamicLibraries目录下。我们刚才安装的Cydia Substrate会检查这个目录中所有的plist文件。如果我们启动了这个配置文件中的App（例如我们在配置文件中定义的AppStore），Cydia Substrate就会把与plist文件同名的动态库加载到这个App中，在我们的例子中，也就是加载了libReveal.dylib：

scp -P 2333 libReveal.* root@localhost:/Library/MobileSubstrate/DynamicLibraries/

这里使用的scp命令取决于你的连接方式以及目录。

接下来，只要我们在iOS设备上打开AppStore，就可以在Reveal中进行调试了：

image

掌握了这个方法之后，看到好的UI设计，我们就再也不用发愁他是怎么做的了 :)