You can use the UI Toolkit Debugger to inspect the styles, types, names, classes, and hierarchy of your element. If you've used browser dev tools this should be familiar to you.
You can find the debugger at or depending on Unity version; right-click on an inspector tab and select it, or press CtrlF5.
Select the correct window from the top left of the debugger, and select Pick Element. Hover your element until the portion you wish to work with is highlighted, and select it.
Don't inspect elements directly in the UI Builder for styling.
The UI Builder adds extra elements for resizing and highlighting that will not be present in the final UI.
Now the element has been selected (or something close to it), you can see a hierarchy of all the elements it's made of, their names, and their classes. The text in the hierarchy follows the selector rules we learned earlier.
You can hover over the elements, which will be highlighted in the window you are inspecting.
Here you can see the layout, stylesheets and the order they are applied, matched selectors and their precedence, state, applied classes, styles and how they are matched, and a dump of the UXML.
In the Styles foldout you can override any style temporarily for the element (reload the window or reset its content to reset it).
Adjust the styles of your element, and surrounding elements under the control until you are happy with the outcome.
These adjustments are temporary, note down what adjustments you have made, or perform the next step in parallel.
The UI Toolkit Events Debugger () can help debug issues with element interactions.
If the menu item is not present, enable the debugger in .
Unity, huh, how?