【Unity】【UI Toolkit】UI Toolkit Debuggerを使って表示されているUIをデバッグする

UnityのUI ToolkitのUI Toolkit Debuggerを使って表示されているUIをデバッグする方法です。

Unity 2022.2.19

UI Toolkit Debuggerを使うと、表示されているUIをデバッグすることができます。
主に以下のことを行えます。

使い方としては、まず Window > UI Toolkit > Debugger から UI Toolkit Debugger のウィンドウを開きます。

次に左上の Select a panel からデバッグしたいパネルを選択します。
試しに InspectorWindow を選択すると、InspectorのUIの階層構造を表示することができます。

左側のヒエラルキーから Visual Element を選択すると、実際のパネル（今回はInspectorウィンドウ）上でその Visual Element がハイライトされます。

次に下図のようにもう少しシンプルな EditorWindow を作ってこれを UI Debugger でデバッグしてみます。

UI Debugger の表示は以下の通りです。
右側のペインを見ると、marginなどのレイアウト情報と適用されているスタイルシート、セレクタ、インラインスタイルなどが表示されていることがわかります。

このスタイルはデバッグ用に書き換えることができます。
例として下図のように、TextInput の background-color を赤色に変更してみます。

対象の EditorWindow を見ると、対象のUIが赤くなっていることを確認できます。

ちなみにこの変更はあくまでデバッグ用のものであるため適用は一時的なものです。
UIの再生成が行われるタイミング（ドメインリロードなど）で元に戻ります。