04-Debug调试@UI-Lookin UI调试工具：从原理到实践Lookin UI 调试工具：从原理到实践 📋 目

Lookin UI 调试工具：从原理到实践

📋 目录

一、概述与历史演进
二、核心原理与架构
三、获取、安装与集成
四、使用流程与操作步骤
五、功能体系与数据表示
六、关键概念图示与流程
七、应用场景与最佳实践
- 7.4 官方文档与进阶技巧导读
- 7.5 安全与版本规范
八、伪代码与算法说明
九、与其它 UI 调试工具的对比
参考文献

一、概述与历史演进

1.1 工具简介

Lookin 是一款免费的 macOS 端 iOS 视图调试应用，与 LookinServer（嵌入 iOS 工程的 Framework）配合使用，可查看与修改 iOS App 内的 UI 对象——包括视图层级结构、视图与控件属性、布局与约束等，功能定位类似 Xcode 自带的 UI Inspector 或商业软件 Reveal [1][2][3]。

Lookin 由 QMUI 团队（曾隶属微信读书等产品）开源并维护：LookinServer 为 iOS 端 SDK（GitHub: QMUI/LookinServer），Lookin 为 macOS 端桌面应用（GitHub: hughkli/Lookin）。官网为 lookin.work/；集成后支持模拟器与真机，并可在无 Mac 连接时通过 App 内摇一摇等方式使用内置调试界面 [1][2][4][5]。

1.2 历史与版本脉络

时期/版本	事件
开源发布	Lookin / LookinServer 以免费、开源形式发布，填补 Xcode UI Inspector 能力有限、Reveal 收费等需求 [1][2]
仓库与官网	iOS 端 QMUI/LookinServer、Mac 端 hughkli/Lookin；官网 lookin.work 提供集成指南与 FAQ [1][2]
集成方式演进	支持 CocoaPods（ObjC / Swift 子库）、Swift Package Manager、手动集成（Framework + Run Script）[1][2][4]
1.0.6+ 安全要求	禁止在 Release/App Store 构建中集成 LookinServer；不要使用早于 1.0.6 的版本，旧版存在严重 Bug 可能导致线上事故 [2][6]
文档与技巧	官方与社区提供「自定义信息展示」「更多成员变量」「Swift 优化」等进阶文档（如字节飞书文档汇总）[2]

1.3 典型应用场景

视图层级与结构排查：查看完整 UI 树（含屏幕外、hidden 视图）、UITableViewCell 的 indexPath、嵌套层级与折叠级别，定位视图遮挡、层级错误或约束冲突。
属性查看与修改：实时查看 frame、bounds、backgroundColor、alpha、约束等；在 Mac 端或控制台修改属性并立即在设备上生效，用于快速验证布局与样式。
导出与协作：将当前页面的 UI 信息导出为文件，脱离 Xcode 与设备单独查看或分享给他人分析。
方法监听与堆栈：监听指定方法调用并打印堆栈，辅助定位触发时机与调用链。
无 Mac 场景：在真机上通过摇一摇等触发 App 内 Lookin 界面，不依赖 Mac 连接即可做基础审查。

二、核心原理与架构

2.1 双端架构：LookinServer（iOS）与 Lookin（macOS）

Lookin 采用 「iOS 端 SDK + macOS 端桌面应用」 的 C/S 式架构 [1][2][4][5]：

LookinServer（iOS）：以 Framework 形式嵌入目标 App（仅 Debug 配置）。在 App 进程内通过 Objective-C Runtime 与反射获取当前 UI 层级与视图属性，将数据序列化后通过进程间/网络通信发送给 Mac 端。
Lookin（macOS）：在 Mac 上运行，发现并连接同一网络或通过 USB 转发的 iOS 设备/模拟器上的 LookinServer，接收序列化数据后反序列化并渲染为 2D 层级树 与 3D 视图，支持属性编辑与指令回传。

因此，不集成 LookinServer 的 App 无法被 Mac 版 Lookin 连接；集成后，模拟器或真机与 Mac 需处于可发现/可通信环境（如本机模拟器、同网段或 USB 连接）[1][2][4]。

2.2 视图信息的获取与序列化（概念）

iOS 的 UI 层级根植于 UIWindow / UIViewController 及其 view 层级。LookinServer 在 App 进程内 [4][5]：

遍历视图树：从 keyWindow（或指定 window）的 rootViewController 出发，递归访问 view.subviews，得到整棵视图树；可配置折叠深度、是否包含 hidden 视图等。
提取属性：对每个 UIView（及其子类）利用 Runtime 读取属性（如 frame、bounds、backgroundColor、layer 信息、约束等），以及自定义的 LKS_Config 等扩展属性。
序列化：将树形结构及属性编码为可在进程间或网络上传输的格式（如自定义二进制或 JSON），并发送给 Mac。
Mac 端反序列化与展示：Lookin 收到数据后重建树结构，在 2D 面板展示层级、在 3D 视图展示空间关系，并支持点击选中、属性面板编辑。

修改回写：用户在 Mac 上修改某视图属性（如 frame、backgroundColor）时，Lookin 将修改指令发回 LookinServer，LookinServer 在 App 主线程对对应视图执行 setter（如 view.frame = ...），实现实时生效 [4][5]。

2.3 三种使用模式：2D、3D、Export

Lookin_2D：在 Mac 或 App 内以树形列表形式展示视图层级，点击节点可查看/编辑属性，对应「审查元素」。
Lookin_3D：将视图层级以三维空间形式展示，便于观察重叠、遮挡与 z-order。
Lookin_Export：将当前 UI 快照（层级与属性）导出为文件，可在未连接设备时用 Lookin 打开查看 [1][4][5]。
触发方式：除在 Mac 或 App 内点击对应入口外，可通过代码发送通知触发，例如（Objective-C）： [[NSNotificationCenter defaultCenter] postNotificationName:@"Lookin_Export" object:nil];
同理可触发 Lookin_2D、Lookin_3D [1][5]。

2.4 数据流概览

flowchart LR
    subgraph iOS App
        A[UIWindow / ViewController]
        B[LookinServer]
        C[Runtime / 视图树遍历]
    end
    subgraph 传输
        D[序列化]
        E[IPC / 网络]
    end
    subgraph Mac
        F[Lookin]
        G[反序列化 / 2D·3D 展示]
        H[属性编辑回写]
    end
    A --> C
    C --> B
    B --> D
    D --> E
    E --> F
    F --> G
    G --> H
    H --> E
    E --> B

三、获取、安装与集成

3.1 前置条件

项目	说明
Mac	安装 Lookin 桌面应用（从官网或 GitHub Release 下载）[1][2]
Xcode	用于编译运行 iOS 工程；LookinServer 仅需在 Debug 配置下集成 [1][2]
iOS 项目	支持 Objective-C 或 Swift；Swift 项目需使用 Swift 子库或 SPM [2]

3.2 获取 Lookin 桌面应用

官网下载：lookin.work/
或从 Lookin macOS 仓库的 Release 获取。
安装后将 Lookin.app 放入「应用程序」即可。

3.3 集成 LookinServer 到 iOS 项目（官方方式 [1][2]）

重要：仅在 Debug 配置下集成；不要使用早于 1.0.6 的版本 [2][6]。

通过 CocoaPods

Objective-C 项目：在 Podfile 中增加
pod 'LookinServer', :configurations => ['Debug']
然后 pod install。
Swift 项目：
pod 'LookinServer', :subspecs => ['Swift'], :configurations => ['Debug']

若项目使用自定义 xcconfig，需将所有 Debug 相关配置名列入 configurations，例如：
pod 'LookinServer', :configurations => ['Debug', 'Debug-Staging']
否则 Release 或其它配置可能误链 LookinServer，存在上线风险 [4][7]。

通过 Swift Package Manager

在 Xcode 中：File → Add Package Dependencies，填入
https://github.com/QMUI/LookinServer
并选择仅在 Debug 配置下链接该依赖。

手动集成

从 LookinServer 仓库获取 LookinServer.framework（或源码），加入工程。
通过 Run Script 在构建时按配置条件嵌入；需定义宏（如 SHOULD_COMPILE_LOOKIN_SERVER）确保 Release 不包含。详见官网集成指南与 Run Script 说明 [2][4]。

3.4 集成后验证

用 Debug 配置编译并运行到模拟器或真机（真机与 Mac 需同网或通过 USB 等可发现方式）。
打开 Mac 上的 Lookin，应能自动发现并列出当前运行中的 App。
选择对应设备与 App，连接成功后即可看到 2D 层级与 3D 视图；若无法发现，请检查网络、防火墙及是否确为 Debug 包且已包含 LookinServer。

四、使用流程与操作步骤

4.1 基本使用流程（Mac + 模拟器/真机）

步骤	操作	说明
1	以 Debug 配置运行 iOS App	模拟器或真机均可；真机与 Mac 需可通信（同网或 USB）
2	打开 Mac 上的 Lookin	从应用程序或官网下载的 app 启动
3	在 Lookin 中选择设备与 App	列表中选中当前运行中的 App，建立连接
4	选择 2D 或 3D 模式	2D：树形层级与属性面板；3D：空间关系与遮挡
5	在层级树或 3D 视图中选中视图	右侧或面板中显示该视图属性，可编辑并实时生效
6	（可选）使用控制台或方法监听	执行代码或监听方法调用与堆栈
7	（可选）导出	使用 Export 将当前 UI 快照导出为文件，便于离线查看或分享

4.2 无 Mac 连接：App 内使用

在已集成 LookinServer 的 App 中，可通过摇一摇（或配置的其它手势）调起 Lookin 内置的调试界面 [3][5]。
或通过代码发送通知触发 2D/3D/Export：
- Lookin_2D：审查元素
- Lookin_3D：3D 视图
- Lookin_Export：导出文件
  这样可在真机或他人设备上不连 Mac 也能做基础 UI 审查与导出。

4.3 导出（Lookin_Export）

在 Mac 或 App 内触发 Export 后，当前页面的 UI 层级与属性会保存为 Lookin 可识别的文件格式。
导出文件可在未连接设备时用 Lookin 打开，用于归档、协作或问题复现 [1][5]。

五、功能体系与数据表示

5.1 功能总览

功能	说明
视图层级展示	树形结构展示 UI 层级，支持折叠级别、显示 hidden 视图、屏幕外视图；可显示 UITableViewCell 的 indexPath 等 [1][4]
属性查看与编辑	查看 frame、bounds、backgroundColor、alpha、约束等；在 Mac 或控制台修改后实时回写到 App [1][4][5]
2D 审查	对应 Lookin_2D，以列表+属性面板形式审查元素
3D 视图	对应 Lookin_3D，以三维形式展示视图堆叠与遮挡关系
导出	将当前 UI 快照导出为文件，脱离设备与 Xcode 查看 [1][5]
控制台	输入代码访问当前选中视图或类，执行方法或读取属性 [1][4]
方法监听	监听特定方法调用并打印堆栈，辅助定位调用链 [1][4]
自定义展示	通过 LKS_Config 等接口在 Lookin 中展示自定义信息或更多成员变量 [2]

5.2 与 Xcode UI Inspector 的差异（概念）

范围：Lookin 可展示比 Xcode UI Inspector 更大范围的视图（不限于当前屏幕可见区域），且可配置折叠与 hidden 视图 [1][4]。
形态：Lookin 提供独立的 Mac 应用与 2D/3D/Export 多种形态；Xcode 的 UI Inspector 嵌入在 Debug 会话中。
集成：Lookin 需主动集成 LookinServer；Xcode 对任意 Debug 运行中的 App 均可使用 UI Inspector，但功能相对简单。

六、关键概念图示与流程

6.1 双端与数据流

flowchart TB
    subgraph iOS
        APP[App 进程]
        RT[Runtime / 视图树]
        LKS[LookinServer]
    end
    subgraph 传输
        S[序列化]
        C[连接]
    end
    subgraph macOS
        LK[Lookin]
        UI[2D / 3D / 属性面板]
    end
    APP --> RT
    RT --> LKS
    LKS --> S
    S --> C
    C --> LK
    LK --> UI
    UI -->|编辑回写| C
    C --> LKS

6.2 使用流程简图

sequenceDiagram
    participant U as 用户
    participant M as Mac Lookin
    participant I as iOS App + LookinServer

    U->>M: 打开 Lookin，选择设备与 App
    M->>I: 建立连接
    I->>I: 遍历视图树，序列化
    I->>M: 发送 UI 数据
    M->>U: 展示 2D/3D 与属性
    U->>M: 编辑属性或触发 Export
    M->>I: 回写修改或请求导出
    I->>M: 确认或返回导出文件

七、应用场景与最佳实践

7.1 视图层级与布局调试

使用 2D 检查嵌套层级、view 的父子关系与同层顺序，结合 3D 查看重叠与遮挡。
利用「显示 hidden 视图」「折叠级别」减少噪音，快速定位目标 view；通过属性面板查看 frame、constraints、autoresizing 等，判断布局异常原因。

7.2 属性实时修改与验证

在属性面板直接改 frame、backgroundColor、alpha 等，无需改代码重新运行，适合快速验证样式与布局假设。
注意：修改仅对当前运行实例生效，不会写入源码；需将确认后的值同步到代码或约束中。

7.3 导出与协作

对难以复现的 UI 问题，使用 Export 导出当前页面快照，将文件发给同事或在未连接设备时用 Lookin 打开分析。
建议在问题复现后立即导出，避免界面变化导致快照与问题现场不一致。

7.4 官方文档与进阶技巧导读

内容	链接或入口
官网与集成	lookin.work；集成指南；CocoaPods；手动集成 Run Script
LookinServer 仓库	GitHub QMUI/LookinServer（iOS 端）
Lookin Mac 应用	GitHub hughkli/Lookin
演示项目	官网提供的 QMUI-Demo 等，可快速体验
进阶	官方与社区文档：在 Lookin 中展示自定义信息、展示更多成员变量、Swift 优化等（见 LookinServer README 中的飞书/字节文档链接）[2]

7.5 安全与版本规范

仅 Debug 集成：通过 :configurations => ['Debug'] 或 SPM/手动时的配置条件，确保 Release/App Store 包不包含 LookinServer [2][6]。
版本：使用 1.0.6 及以上 版本，避免旧版严重 Bug 导致线上风险 [2][6]。
自定义 xcconfig：若存在多种 Debug 配置，务必在 Pod 的 configurations 中全部列出，防止误打到非 Debug 包 [4][7]。

八、伪代码与算法说明

8.1 视图树遍历与属性收集（概念）

函数 collect_view_hierarchy(root, options):
  nodes = []
  函数 visit(view, depth):
    若 options.include_hidden 为假 且 view.hidden 为真: 返回
    若 depth > options.max_depth: 返回
    node = 新建节点()
    node.view_class = view.class
    node.frame = view.frame
    node.bounds = view.bounds
    node.alpha = view.alpha
    node.hidden = view.hidden
    node.backgroundColor = view.backgroundColor
    // 通过 Runtime 读取更多属性、约束等
    node.children = []
    for subview in view.subviews:
      child = visit(subview, depth + 1)
      if child: node.children.append(child)
    nodes.append(node)
    return node
  visit(root, 0)
   return 根节点

8.2 序列化与连接（概念）

函数 send_to_mac(tree):
  将 tree 编码为可传输格式（如二进制或 JSON）
  通过已建立的连接（如 socket / 本地通信）发送到 Lookin Mac 端
  Mac 端反序列化后重建树结构，渲染 2D 树与 3D 视图

8.3 属性修改回写（概念）

函数 apply_edit(view_id, property_key, value):
  LookinServer 在 App 主线程根据 view_id 找到对应 UIView 实例
  根据 property_key 调用对应 setter，例如 setFrame: / setBackgroundColor:
  视图更新后，可选地再次同步当前状态到 Mac

九、与其它 UI 调试工具的对比

维度	Lookin	Xcode UI Inspector	Reveal
费用	免费、开源	随 Xcode 免费	商业收费
集成方式	需集成 LookinServer（Debug）	无需集成，Debug 运行即可	需集成 Reveal SDK 或 Reveal Loader
视图范围	可超出一屏、含 hidden、可折叠	以当前层级为主	完整层级、多窗口
2D/3D	2D 树 + 3D 视图 + Export	以层级与属性为主	2D/3D、时间线等
属性修改	支持实时回写	支持部分修改	支持
控制台/方法监听	支持控制台与方法监听	依赖 LLDB/控制台	部分版本支持
无 Mac 使用	支持 App 内摇一摇等	不适用	依赖 Reveal App

Lookin 适合需要免费、开源、可定制且视图范围与 2D/3D/Export 能力的团队；Xcode UI Inspector 适合快速随 Debug 使用；Reveal 适合对商业支持与高级功能有需求的场景。

参考文献

[1] Lookin 官网. Lookin - Free macOS app for iOS view debugging. lookin.work/
[2] QMUI. LookinServer. GitHub. github.com/QMUI/Lookin…
[3] hughkli. Lookin (macOS app). GitHub. github.com/hughkli/Loo…
[4] 腾讯云开发者社区 / IM Geek / GitCode 等. Lookin 原理与集成（Runtime、序列化、双端通信、CocoaPods/SPM/手动集成）.
[5] 简书. 使用 Lookin 调试 iOS App UI. www.jianshu.com/p/ec5c7e0e7…
[6] LookinServer 官方. 不要使用早于 1.0.6 的版本；不要在 Release 集成. GitHub README 与 Feishu 说明.
[7] GitCode 博客. LookinServer 集成：自定义 xcconfig 配置时的注意事项.
[8] Apple. UI Inspector. Xcode 文档.
[9] Reveal. Reveal - iOS UI Debugger. revealapp.com/