AvaDevTools 12.0.2

AvaDevTools

A free, open analog of the classic Avalonia DevTools (Avalonia.Diagnostics, which stopped at 11.3.x) for Avalonia 12. In v12 the built-in F12 DevTools was replaced by the paid Avalonia Accelerate Developer Tools; this library brings back the essentials, in-process, no license required.

Features

• F12 to open (configurable gesture) — one DevTools window per top level.
• Smart tree inspector — a read-only, code-editor-style view of the UI tree: elements render as syntax-colored pseudo-XAML lines (<Button x:Name="Save" Classes="primary">) with fold chevrons, indent guides and a live Size column that flashes on change. Two structural modes: Visual tree (default — exactly GetVisualChildren) and Logical tree (exactly GetLogicalChildren, as authored in XAML). Placeholders are first-class rows: expanding one materializes only what you asked for. Picking an element (⌖ or Ctrl+Shift) produces a compact view: only the window, your user controls on the path and the picked element stay visible — every run of intermediate wrappers folds into a ⋯ N levels chain chip — including the control that owns a picked template internal (its TemplatedParent). Right-click any line (placeholders included) for the same menu everywhere: Show next ancestor / descendant (steps one level, Alt+↑/↓) · Show descendants (one level / all levels) · Fold descendants into ⋯ · Fold descendants keeping views · Collapse descendants keeping one level · Hide current element (Delete) · Collapse ancestors (keep views / all — the compact view around any element) · Focus to this (folds everything off the root→element path, Exit focus restores the previous state) · Scope to this (re-roots the tree; clickable breadcrumbs MainWindow ▸ … ▸ Slider and Exit scope) · Copy path · Copy as XAML · Select in editor · Properties. Keyboard: ↑ ↓ move, ← → fold/unfold, Space toggle, Enter expands placeholders, Ctrl+↑/↓ parent/child (chooser flyout when several), Ctrl+←/→ siblings, Alt+↑/↓ visual parent/child — inside the compact view this peels folded chains one level at a time, Delete hides the selected element into a ⋯ chip (in the compact view the level merges back into its chain), Enter opens Properties, Ctrl+C copies the path, Ctrl+Shift+C copies as XAML, Ctrl+E opens the editor, F focus, S scope, Esc exits focus/scope, Shift+→/←/↓/↑ show all levels / fold into ⋯ / fold keeping views / collapse ancestors keeping views (Ctrl+Shift+↑/↓ for the all / keep-one-level variants), Ctrl+F search by type/name/class (Enter/F3 cycles matches). The selected line shows ▲▼ step buttons at a fixed spot — plain arrow = pure navigation, 👁 eye = the step reveals a hidden level. The surface is custom-drawn and virtualized — only visible lines are measured, drawn or subscribed, so trees with thousands of nodes fold and scroll without lag.
• Properties tab — styled, direct, attached and plain CLR properties with value, priority and type; live-updates when the selected control's properties change. Edit a value and press Enter (Escape reverts). Supports strings, numbers, enums, Thickness, CornerRadius, Color, brushes, GridLength, FontFamily and anything with a TypeConverter. Attached properties are grouped under their owner (⊕ AutomationProperties) without repeating the prefix per row; kind and priority show as compact glyphs with explanatory tooltips (∅ unset, ● local, ✦ style, ⧉ template, …); Inherited values show the origin element (⇡ Window) — click to select it in the tree; custom (non-framework) types in the Type column link to their C# source.
• Layout tab — interactive box model: editable margin / border / padding bands around the content size, plus Width/Height, Min/Max, Desired, Bounds and alignment summary. Live-updates as the control re-layouts.
• Styles tab — the value frames applied to the element (control theme, styles with their selectors, template and local values) with each frame's setters, binding priority and active state, plus the element's live style/pseudo classes. Setter values are editable (edits apply as local overrides on the element, browser-devtools style), local values have a ✕ clear button, and both the element and each style show their XAML source location (MainView.axaml:15 ↗) — click to open in the editor.
• Typed value editors (Properties + Styles tabs) — Color/brush values get a live swatch with a full color picker flyout (changes apply as you drag), bools get checkboxes, enums (FontWeight, alignments, …) get dropdowns; everything else keeps the monospace text field (Enter commits, Escape reverts).
• Readable values + code hints — markup extensions and templates display as what they mean (Binding Title, TemplateBinding Background, simple type names instead of full namespaces). Values and elements declared in XAML get a </> link that opens a syntax-highlighted excerpt of the actual .axaml source (line numbers, target line highlighted, "Open in editor" button) — including your own DataTemplates and ControlTemplates. Compiled theme templates (no source on disk) show an info card with type and TargetType instead.
• Value chips — special values render as compact chips instead of raw text: ◈ SystemRegionBrush = #FF223344 for DynamicResource (◇ for static) with the key, a swatch and the value resolved against the selected element's theme; ⟨⟩ template chips; ▤ MainView view chips; {} MainViewModel for view models and other plain objects. Chips are clickable when a source location is known — XAML locations come from source info, and C# types (view models) are located by searching the solution tree for TypeName.cs and jumping to the class declaration.
• Open in editor — defaults to JetBrains Rider on macOS (open -na Rider.app --args --line N file); override with AVA_DEVTOOLS_EDITOR="myeditor {file}:{line}". Source info comes from the XAML compiler's AvaloniaXamlCreateSourceInfo, which Avalonia 12 enables by default in Debug builds. AVA_DEVTOOLS_SRC_ROOT helps resolve avares:// paths if needed.
• Events tab — pick routed events from the full registry ("Common" preset included), capture them as they finish routing in the inspected window: timestamp, source element and final handled state. Pause/Clear included.
• Logs tab — live Avalonia logger output (binding errors, layout, property system, …) with Pause/Resume, level, area and text filters. Works even when the app never called LogToTrace(). Captures at Warning by default (AVA_DEVTOOLS_LOG_LEVEL or the combo changes it); entries produced by the DevTools UI itself are dropped and list updates are batched, so verbose logging cannot feed back on itself or freeze the tool.
• 3D tab — exploded 3D view of the window: every visual becomes a textured card (cropped from a live snapshot) lifted by its visual-tree depth. Drag to orbit, wheel to zoom, click a card to select that element in the tree; sliders control layer spacing and card opacity. A tree-mode selector chooses the layer granularity: "Visual · merged" (default — template pass-throughs with identical bounds collapse into their parent layer), "Visual · all" (every visual, matches the tree panel exactly), or "Logical" (elements as authored in XAML, no template internals); "Reset view" restores the default camera.
• Renderer overlays — toggle the built-in FPS meter, layout/render time graphs and dirty-rect flashing on the inspected window (Overlays menu).
• Custom IDE-style theme — the DevTools window forces its own dark variant and re-skins the Fluent controls into a compact Rider/Unity-style look (flat 24px controls, 1px borders, dark input wells, accent focus rings, desaturated selection rows) via Fluent dynamic-resource overrides, plus rounded panel surfaces, syntax-colored tree rows and monospace value fields — all scoped to the tool window only (the host app's theme is untouched).
• Highlight overlay — content (blue), padding (green), margin (orange) bands, red bounds outline and a size label, drawn in the adorner layer of the inspected window.
• Element picker — toggle "⌖ Pick element", hover the app to preview, click to select the element in the tree.
• Ctrl+Shift hover-inspect — hold Ctrl+Shift over the running app and the element under the pointer is selected in the tree, exactly like the classic DevTools gesture.

Usage

// App.axaml.cs
public override void Initialize()
{
    AvaloniaXamlLoader.Load(this);
#if DEBUG
    this.AttachAvaDevTools();                                  // F12 in any window
    // this.AttachAvaDevTools(new DevToolsOptions { Gesture = new KeyGesture(Key.F11) });
#endif
}

Or attach to a single window / top level:

myWindow.AttachAvaDevTools();

Set AVA_DEVTOOLS_AUTO_OPEN=1 in the environment to open DevTools automatically as each window loads (handy for smoke tests).

Notes / limitations

• Desktop only — opening a secondary Window is not supported on mobile/browser targets.
• The DevTools window uses the host application's theme (Fluent, Simple, …) — the app must have one loaded.
• The tree is a snapshot: use ↻ Refresh after the UI changes structurally (property values, by contrast, update live).
• The Styles tab reads Avalonia's value-store frames via reflection, because that API is public at runtime but stripped from the compile-time ref assembly in Avalonia 12.
• The 3D view uses an orthographic projection (no perspective foreshortening) so cards can be drawn with plain affine transforms; it snapshots the window when the tab is opened — press ↻ after UI changes. AVA_DEVTOOLS_TAB=<header> preselects a tab at open.
• Not covered (Accelerate "Complete"-only, out of scope for an in-process tool): asset manager, full profiler, remote/mobile attachment, MCP server.