如何在SwiftUI中借助视图层级调试查找关联视图与代码？

在UIKit里可以通过Debug Navigator查看ViewController来定位代码，SwiftUI里虽然没有ViewController的概念，但可以用下面几种方法快速找到视图对应的代码位置，尤其适合接手他人项目时使用：

• 使用调试视图层级（Debug View Hierarchy）
  运行App后点击暂停按钮（或按Cmd+\），再点击Xcode工具栏里的「Debug View Hierarchy」按钮（图标是带箭头的方块）。左侧面板会展示完整的SwiftUI视图层级，选中目标视图后，右侧「Identity Inspector」（⌘+⌥+3）里会显示视图的类型名称，右键点击这个名称选择「Jump to Definition」就能直接跳转到对应的代码文件。
  注：自定义视图会显示你定义的结构体/类名，系统自带视图（如Text、VStack）会显示SwiftUI框架里的类型。

• 借助预览（Preview）快速跳转
  如果项目里有视图的Preview，直接点击画布上的目标视图，按住Cmd点击视图并选择「Jump to Source」，就能直接定位到代码。如果没有Preview，也可以给目标视图临时添加Preview代码，比如在视图结构体下方添加：

  struct HomeView_Previews: PreviewProvider {
      static var previews: some View {
          HomeView()
      }
  }
  

  之后通过预览画布就能快速跳转。

• 给视图添加调试标识符
  给关键视图添加accessibilityIdentifier，方便在调试层级里快速识别：

  struct ProfileView: View {
      var body: some View {
          VStack {
              Text("My Profile")
                  .accessibilityIdentifier("ProfileTitle")
          }
          .accessibilityIdentifier("ProfileMainContainer")
      }
  }
  

  在Debug View Hierarchy里，通过搜索这些标识符就能快速找到目标视图，再跳转代码。

• 断点结合调用栈定位
  在目标视图的onAppear回调里添加断点：

  struct SettingsView: View {
      var body: some View {
          Text("Settings")
              .onAppear {
                  // 这里添加断点
                  let _ = "SettingsView loaded"
              }
      }
  }
  

  当页面展示时触发断点，查看Xcode底部的Call Stack，找到对应视图结构体的调用记录，点击就能跳转到代码位置。

内容的提问来源于stack exchange，提问作者Zhou Haibo