DevTools - Two is better than one

Avalonia Accelerate customers get a great, new DevTool but what if you want to use the old one as well? You can actually have both.

Introduction

Avalonia is an (MIT) open source UI framework which also includes a DevTool to inspect UI elements, events, styles, etc.

The company which maintains the UI framework, also has a commercial offering called Accelerate which offers a brand new DevTool.

Setup both DevTools

To setup both DevTools in your project, you can actually register the DevTools with different Gesture configurations.

Register the Legacy Developer Tools

As mentioned in the docs, you can get the Legacy Developer Tools by adding the Avalonia.Diagnostics package and call this.AttachDevTools();. So, if you hit the F12 key, the Legacy DevTool should open.

Register the Accelerate Developer Tools

For the new DevTool, you need the AvaloniaUI.DiagnosticsSupport package. But for this, we call the AttachDeveloperTools method slightly differently:

1
2
3
4
5
6
7

#if DEBUG
        // dev tools package is only available in DEBUG configuration
        this.AttachDeveloperTools(options =>
        {
            options.Gesture = KeyGesture.Parse("F11");
        });
#endif

Hitting the F11 key is now opening the new DevTool. Of course, you can use whatever key you want to invoke the new one.

Why?

You may be wondering why you still want to use the old DevTool? The answer is quite simple: some stuff in the new tool is not yet working well. Since it’s a new tool, it still needs some time to iron out some kinks. If you are working with the Overlay layer or the Adorner layer, the new DevTool may not work well yet (at least at the time of this writing). Also freezing popups doesn’t seem to work for me in the new one, so the old one still has some value.

I’m sure there will be a time when I can remove the old DevTool completely.