DEV Community

Cover image for How to Use AvaloniaUI Developer Tools
Ingvar
Ingvar

Posted on

10 1

How to Use AvaloniaUI Developer Tools

Hello, in this post I will briefly explain how to install and use developer tools in your AvaloniaUI project. As always, I will use my app Camelot as working example.

What is developer tools window?

Developer tools window is similar feature to Chrome developer console. It allows you to observe tree of elements, their styles and positions, including margins/paddings etc. Also it has ability to log UI events and even to show FPS!

Alt Text

How to add it

Add following lines of code inside your main window code behind class inside constructor:



#if DEBUG
    this.AttachDevTools();
#endif


Enter fullscreen mode Exit fullscreen mode

Example of code

Usage

Open developer tools window using F12.

Watch visual tree and edit controls parameters:

Alt Text

Watch events:

image

Check FPS:
image

Highlight elements in tree:

image

Official documentation

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
hanuman profile image
Etienne Charland •

Thank you for taking the time to write such well-written documentation! Some of the links to the official doc are broken though.