【Xcode】Capture View Hierarchyでビュー階層を3D可視化&UIクラスを特定するデバッグ方法
概要
この記事を執筆している現在ではiOSアプリのUIを開発する際はSwiftUIを使用することが一般的になりつつあると思いますが、UIKitも混ざり合ったプロダクトはまだまだ多く存在するかと思います。
そんな中で新規参画した際に、特にUIKitで作成されたViewはどのクラスで定義されているのか探すのが大変なケースがあります。そんな時はCapture View Hierarchy[1]を使用することで、シミュレーターで表示されている画面がどのクラスで定義されているものか一発で分かります。
そんなCapture View Hierarchyの使用方法について紹介します。
Capture View Hierarchyの使い方
Capture View Hierarchyとは?
Capture View Hierarchy は、Xcodeに標準搭載されているビュー階層のデバッグ機能です。
シミュレーターや実機でアプリを実行した状態でこの機能を有効にすると、
- どのクラス(UIViewやUILabelなど)がどの階層に配置されているのか
- Autolayoutの制約状況や描画領域
- SwiftUIでラップされたUIKitの要素 がどのようにホストされているか
などを、3Dビューや階層ツリーの形で可視化できます。
新規参画したプロジェクトでは「この画面の修正をお願い!」と言われた際に、「そもそも実装がどこにあるのか」 を調べるのが大変なケースがあります。
そんなときに Capture View Hierarchy を利用すると、現在表示されている画面の階層をリアルタイムに丸ごと 確認できるため、「このUIはどのファイルで定義されている?」という疑問を一気に解決できます。
使い方
-
アプリを実行する
Xcodeから シミュレーター あるいは 実機 でアプリをビルド&実行します。
ビルド後、対象の画面を表示させます。 -
Xcodeでビュー階層をキャプチャする
対象の画面が表示されている状態で、Xcode上部のメニューから
Debug → View Debugging → Capture View Hierarchy
をクリックします。
- 3Dビュー/階層構造をチェックする
Capture View Hierarchy を実行すると、Xcodeのデバッグ画面が自動的に「View Hierarchy」タブに切り替わります。
ここで、
- 3D表示:各Viewがどの階層で乗っているかが視覚的にわかるモード
- ツリー表示:左側のパネルにすべてのSubviewが階層構造で並ぶテキストリスト
の2つを切り替えながら、表示されている画面を俯瞰することができます。
左ペインもしくは右ペインでビューを選択すると、"Custom Class" の欄に具体的なクラス名 (MyCustomView, UILabel, UIHostingController<SomeSwiftUIView> など) が表示されます。
おわりに
Capture View Hierarchy は、
- UIKitだけのプロジェクトでも、複雑なView階層を瞬時に可視化できる
- SwiftUIとUIKitが混在したプロジェクトでも、どの要素がSwiftUIで定義されたものか、UIKitのどのクラスが使われているかを簡単に把握できる
といったデバッグ機能を持っているので、クラス名を特定してからソースを検索するだけで、UI調査にかかる時間を大幅に短縮できるのでとても便利です。
-
以前は Debugging View Hierarchies でした。 ↩︎
Discussion