iOS开发 视图层级调试技巧 Debug View Hierarchy

iOS开发 视图层级调试技巧 Debug View Hierarchy

 (2016-12-08 14:37:06)

转载▼

标签： 

debug

分类： iOS实用功能

前言

做iOS开发经常会遇见这种情况，产品汪拿着你做的东西过来对你说：“这个Label的字体大小不对，我的效果图里明明标注的是20px，这个大小肯定不是20px”，于是你便跟他争论起来，我代码里设的确实是20px，为了证明你的判断，于是你开是在代码中查找设置字体的地方。这时就有一个问题，如果代码是你写，你也许可以很快的定位到相应的代码，但如果代码不是你写的，那么你就得废一会功夫才能找到响应的设置代码，如果项目非常大，那就更麻烦了。有没有一种更快的办法可以让我们很快的查看UI界面上的一些设置以及UI的一些层次结构呢？当然有，这就是XCode的DebugViewHierarchy功能。

简介

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

详细介绍

为了简单起见，这里我使用SB快速搭建了一个简单的UI，如下图：

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

然后，点击调试窗口的DebugViewHierarchy按钮，

就可以看到整个界面的3D效果图，如下图

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

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

选中3D视图中的某个视图，可以在右侧的inspector中看到该视图的详细信息

3D视图的下面还有一排操作的按钮和进度条，可以调节3D视图的大小，显示层次，间隔等，具体可以实际操作一下就明白了。

总结

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