InAppViewDebugger：iOS应用内视图调试利器深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00428/article/details/148942212

InAppViewDebugger：iOS应用内视图调试利器深度解析

InAppViewDebugger A UIView debugger (like Reveal or Xcode) that can be embedded in an app for on-device view debugging 项目地址: https://gitcode.com/gh_mirrors/in/InAppViewDebugger

项目概述

InAppViewDebugger是一款创新的iOS视图调试工具库，它允许开发者直接在设备上查看和调试应用的视图层级结构，无需依赖Xcode或外部工具。该工具提供了与Xcode内置视图调试器相似的3D快照视图和层级结构视图功能，但具有更高的灵活性和便捷性。

核心功能

1. 3D快照视图

基于SceneKit实现，支持手势操作
支持缩放、平移和旋转视图
直观展示视图层级间的空间关系

2. 层级结构视图

树状结构展示视图层级
与3D视图同步选择
支持快速定位特定视图

3. 多设备适配

专为iPhone和iPad设计的界面布局
在不同尺寸设备上都有良好的用户体验

4. 高度可扩展

基础实现支持UIView层级
可扩展支持其他UI框架（如CoreAnimation、SpriteKit等）

技术实现细节

架构设计

InAppViewDebugger采用模块化设计，主要包含以下几个核心组件：

Element协议：定义视图元素的基本接口
ViewElement类：UIView的具体实现
Snapshot类：表示UI元素的递归快照
Configuration类：提供自定义配置选项

核心协议与类

Element协议

public protocol Element {
    var identifier: ObjectIdentifier { get }
    var displayName: String { get }
    var className: String { get }
    var frame: CGRect { get }
    var children: [Element] { get }
    var snapshot: UIImage? { get }
    var label: ElementLabel? { get }
}

ViewElement类

作为Element协议的具体实现，ViewElement封装了UIView的基本信息，包括：

视图标识符
显示名称
类名
框架位置
子视图
快照图像

使用教程

基础集成

Swift集成

import InAppViewDebugger

@IBAction func showViewDebugger(sender: AnyObject) {
    InAppViewDebugger.present()
}

Objective-C集成

@import InAppViewDebugger;

- (IBAction)showViewDebugger:(id)sender {
    [InAppViewDebugger present];
}

高级用法

调试特定视图

InAppViewDebugger.present(for: specificView)

调试特定视图控制器

InAppViewDebugger.present(for: viewController)

使用自定义配置

let config = Configuration()
// 自定义配置项
InAppViewDebugger.present(configuration: config)

操作指南

视图聚焦

在3D视图或层级视图中长按目标元素
从弹出菜单中选择"Focus"
系统将聚焦显示该元素的子层级

层级间距调整

使用底部左侧滑块调整层级间距
向右滑动增加间距，向左滑动减少间距

可见层级控制

使用底部右侧范围滑块控制显示的层级范围
可精确控制显示哪些深度的视图

显示/隐藏元素信息

长按3D视图空白区域
选择显示/隐藏元素标题或边框

自定义配置

InAppViewDebugger提供了丰富的自定义选项，包括：

颜色配置：修改背景色、边框色等
字体配置：调整标题字体大小和样式
布局参数：控制3D视图的默认间距和角度

示例配置代码：

var config = Configuration()
config.snapshotView.backgroundColor = .darkGray
config.snapshotView.borderColor = .cyan
InAppViewDebugger.present(configuration: config)