Xcode视图调试Debug View Hierarchy

前言

工作中，领导想看看没有真机情况下,模拟器对应的UI层级关系,每层的显示情况？位置前后？怎么办？

简介

DebugViewHierarchy（视图调试)是XCode6新出的一项功能，它可以让开发者在程序运行时，动态的查看当前界面的显示情况，包括视图的层次，控件的大小和位置，而且会以3D效果显示当前视图的层次。下面就一起来看一下如何进行视图调试吧。

图1.视图调试各按钮功能

我把图中分为 5个区域分别作出讲解， 如图1所示：

①区域. 
 第一个区域左右滑动可以调整视图层级之间的距离

②区域. 
  第二个区域的三个按钮分别是现实省略隐藏的内容、显示依赖关系、第三个里边有三个选项分别是显示视图里边内容、显示视图的线框轮廓、以及显示视图的线框轮廓和视图中内容。

③区域.  
  第三个区域是显示视图层级的大小

④区域.    
第四个区域或者拖动视图，可以随意旋转

⑤区域.  
第五个区域是视图2D视角和3D视角的相互切换，上图是3D模式视角的显示。

⑥区域
视图局部显示+隐藏

案例讲解

为了简单起见，这里我使用代码建立一个工程demo下载，运行如图2所示：

图2.动态操作效果图

• 步骤：

  • 运行demo 【command+R】

  • 调试窗口的DebugViewHierarchy按钮

  • 拖动鼠标，可以切换不同的3D视角。

  • 3D效果图：

    • 在左侧的调试导航栏中，选择View UI Hierarchy，可以看到整个界面的视图层次列表：
    • 左侧代码看右侧UI
    • 右侧UI看左侧代码

  • 3D视图的下面还有一排操作的按钮和进度条，可以调节3D视图的大小，显示层次，间隔等,如图4所示

  

  图4.3D缩放藏显

• 注意：

• 这里使用的时模拟器，因为只有在模拟器 的情况下才能使用DebugViewHierarchy功能。

• 有关demo界面逻辑分析，如图6所示

• 若下载的demo出现lldb崩溃情况，请点击强制运行按钮如图5所示

图5.强制运行+视图调试

图6.逻辑层次展示

总结

有了DebugViewHierarchy功能，我们就可以很直观地``检验我的UI布局，查看各个视图的属性，确实能够带来很大的方便性。 其实，iOS6出来之前，就已经出现了许多第三方的界面调试工具，例如大名鼎鼎的Reveal`，它不但可以查看UI布局，还可以实时修改，这样就不用每次都重新编译运行，但它是收费的（可以免费使用30天），59美元对我等刚入行的码农来说确实有点贵。不过对于一般的界面调试，使用XCode自带的DebugViewHierarchy已经足够了，使用mbp重新编译运行也不会太慢。

参考链接

XCode中的Debug View Hierarchy功能
芒果iOS开发bug调试技巧之Debug View Hierarchy