UI Toolkit Debugger
Use the UI Toolkit Debugger to inspect and debug your UI elements in real-time.
읽는 시간 2분최근 업데이트: 25일 전
The UI Toolkit Debugger is a tool that you can use to inspect and debug your UI elements in real-time. It provides a visual representation of your UI hierarchy. You use it to examine the state and properties of each UI element.
When you open the UI Toolkit Debugger, it displays a window that shows a live view of your UI hierarchy. You can select any element in the hierarchy to inspect its properties and state. The debugger also displays any errors or warnings related to your UI elements.
One of the key features of the UI Toolkit Debugger is the ability to view and edit the styles that are applied to your UI elements. This is done through the Style Inspector, which allows you to see all the style properties that are applied to a particular element. You can also edit these properties in real-time to see the effect they have on your UI.
To use the UI Toolkit Debugger:
-
Select Window > UI Toolkit > Debugger to open the UI Toolkit Debugger window.
-
Do the following:
- To debug elements in UI Builder, in the window of the UI Builder, click Preview interactions to enable preview mode. Preview mode turns off the invisible elements in the Canvas. Those invisible elements absorb all mouse events and are used to pick elements for editing. UI Toolkit Debugger will pick them instead of your actual elements if they're not turned off.Viewport
?
- To debug elements in the scene view, select the GameObject and enter Play mode.
- To debug elements in UI Builder, in the
-
In the UI Toolkit Debugger window, select Pick Element.
-
In the Canvas of the UI Builder or in the Game view, select the element that you want to debug. The UI Toolkit Debugger window shows a live view of your UI hierarchy and displays the following:
- All child elements of the
VisualElement - All USS selectors for each component of the
VisualElement - Detailed information for each USS selector
- All child elements of the

Another option to open the UI Debugger window
Color preferences
You can customize the highlight, repaint, layout, and wireframe overlay colors that the UI Toolkit Debugger uses. For more information, refer to UI Toolkit Debugger color preferences.