Dev Panel Debugging

The Dev Panel is a tool for debugging your interface at runtime. It’s part of the Preview Tool.

Accessing the Dev Panel

When built in debug mode, the app contains an additional panel with several controls to help testing.

To access the Dev Panel, press F3, F13, or CTRL+` (Ctrl + Backtick); or triple-click in any corner of the app’s screen.

From the available options, here are a few that are frequently used by designers:

Assets Viewer

Displays the app’s loaded assets and memory usage. Sometimes the page takes a long time to load which can be due to large asset file sizes. This panel helps in identifying such assets and you can refactor or resize such assets (in this case mostly PNGs).

Scene Tree Viewer

This panel comes in handy especially when there are multiple complex nested compositions on screen and you want to quickly find details related to one of these comps or a comp nested inside it. It’s very easy to point to the composition with your mouse display all related information such as its name, class, parent and all transformation properties.

View Outlines

This is one of the most frequently used panels by designers. As the name suggests, it highlights the outlines/bounding boxes of each element on screen. And if you expand the panel further, it offers a whole range of more specialized options.

Time Dilation

This panel helps to manipulate animation speed in order to troubleshoot or refine the details.