Layout Debugger
Wiki ▸ Documentation ▸ Layout Debugger
When you're creating layouts or working on CSS it some times help to be able to visualise the scene graph and make live changes to the node properties of your layout. The absolutely best tool for this job is definitely the Scenic View tool from FX Experience, but some times you just need to get a quick overview as fast as possible.
Simply hit Alt-Meta-J to bring up the built in debugging tool Layout Debugger. The debugger attaches to the currently active Scene and opens a new window that shows you the current scene graph and properties for the currently selected node.
While the debugger is active you can hover over any node in your View and it will be automatically highlighted in the debugger window. Clicking a node will also show you the properties of that node. Some of the properties are editable, like backgroundColor, text, padding etc.
When you hover over the node tree in the debugger, the corresponding node is also highlighted directly in the View.
Close the debugger window by hitting Esc and the debugger session ends. You can debug multiple scenes simultaneously, each debugging session will open a new window corresponding to the scene you debug.
The default shortcut for the debugger can be changed by setting an instance of KeyCodeCombination into FX.layoutDebuggerShortcut. You can even change the shortcut while the app is running. A good place to configure the shortcut would be in the init block of your App class.
While this debugger tool is in no way a replacement for Scenic View, we will add features based on reasonable feature requests. If the feature adds value for simple debugging purposes and can be implemented in a small amount of code, we will try to add it, or better yet, submit a pull request. Have a look at the source code to familiarise yourself with the tool.
Next: Charts