UI Builder の中で UI をテストし、デバッグツールを使ってスタイルを調べることができます。
UI ビルダー内で UI をテストするには、Canvas 内で直接、Viewport のツールバーにある Preview モードを有効にします。Preview モードでは、UI Builder 固有の選択オーバーレイとハンドルが Canvas から削除されます。Preview モードが有効になっているかどうかは、Viewport 全体をオレンジ色の境界線で囲んでいるかどうかでわかります。
Preview モードを有効にすると、以下をテストできます。
Foldout
のような状態ベースのコントロールは、クリックすることで展開し、UI の他の部分の反応を見ることができます。IntegerField
のような入力フィールドは、入力検証をテストすることができます。ScrollView
のような大きなコンテナでは、スクロールの上下をテストすることができます。:hover
疑似状態は、ホバー専用のスタイルを確認できます。Preview モードでも、UI を操作することは可能です。ただし、Canvas の選択とマニピュレーターは Preview モードではオフになります。
スタイルがどこから来たのかわからない場合は、UI Builder の Inspector の Matching Selectors セクションで要素のスタイルを見つけることができます。
Matching Selectors セクションに以下が表示されます。
ノート: リストの下位に表示される USS セレクターは、常に上位の USS セレクターの同じスタイルプロパティをオーバーライドします。
Matching Selectors セクションで十分な情報が得られない場合は、UI Toolkit Debugger を使うことができます。UI Toolkit Debugger は、UI エレメントをリアルタイムで検査し、デバッグするために使用するツールです。UI 階層を視覚的に表現します。これを使用して、各 UI 要素の状態とプロパティを調べます。