🕵️ NoesisGUI Inspector

The Inspector is a remote debugging and profiling tool that connects directly to a live instance of your application. By letting you inspect the visual tree and modify UI state in real time, it drastically reduces iteration times and eliminates the need to restart your app when tweaking properties or hunting down bugs.

Whether you are analyzing complex layouts, tracing events, or monitoring frame performance, the Inspector provides a comprehensive suite of tools designed to streamline your workflow.

Its core capabilities include:

Remote connection to Views.
Global Performance Counters.
Visual Tree inspection with XAML source navigation.
Live Edit Values of objects in the tree, including Reflection Properties.
Frame performance stats.
Hot Reloading of assets.
Event Tracing and Data Breakpoints.
Access to console.

Getting started

To use the Inspector within your application an instrumented Noesis library is necessary. By default, the libraries included in our public SDKs are instrumented and compatible with Inspector. Inspector is enabled by default and it can be disabled before initializing Noesis by calling Noesis::GUI::DisableInspector().

Note

In Unity, only builds with 'Development Build' flag enabled can be used with the Inspector.

For Unreal, Inspector is disabled in Shipping build configurations.

NOTE

We do not recommend distributing official releases of your application with instrumented Noesis library.

Important: Version 4.0 introduces a rewritten, high-performance communication protocol that significantly reduces bandwidth usage and streamlines device discovery. Because of this overhaul, the new protocol is not compatible with previous versions of Noesis.

To inspect a running application, open the Inspector. Upon its first launch, it will automatically perform an initial scan and populate the Connect to... dialog with a list of discovered applications, displaying their IP addresses and platforms. You can click the Refresh button at any time to manually trigger a new scan for applications.

By default, the network discovery drop-down is set to Auto, meaning the scan will look for applications broadcasting on your local network. If you need to restrict the search, you can customize this behavior using the drop-down menu (for example, selecting 127.0.0.1 will filter the search to only scan for local applications).

Once you select a target application from the list and click Connect, the network connection is established and the dialog will close. The Inspector will immediately transition to its main interface, pulling in the live visual tree, real-time performance metrics, and current property states of your application. At this point, you are fully connected and ready to begin debugging and profiling your UI.

Inspector layout

Once a connection is established, you'll be presented with the UI of the Inspector. The top section of the window consists of a minimal toolbar and a set of high-level performance graphs.

The toolbar allows you to open the Connect to... dialog to select a new target, and it displays the name of the currently attached application. It also provides an important drop-down list displaying all the available Views running in the connected application. Alongside this, there are buttons that let you toggle several debug visualization settings: Wireframe, Batches, Overdraw, and Glyph and Gradient Texture Overlays.

Note

The names of the Views displayed in the drop-down list can be explicitly assigned in code when constructing a View. Setting these names is highly recommended, as it makes it much easier to identify specific UI instances when debugging.

The overall performance graphs allow you to see at a glance how your application is performing, by displaying the frames per second, update and render times, as well as the amount of memory that NoesisGUI is using at the moment.

Under these graphs there are a series of tabs: Elements, Live Properties, Events, Performance, Resources and Console. Their utility will be described in the following sections.

Elements tab

The element tab allows you to inspect the Visual tree and the properties of its nodes, as well as modifying said properties values.

On the left you have the Visual tree panel. It displays the hierarchy of Visual nodes of the selected View. For each node, you will see either its explicitly assigned name or, if no name is provided, its type enclosed in square brackets (e.g., [Button]). The number of child nodes under it is displayed next to this identifier. If the node contains source information, a document icon is displayed on the far right of the row. You can click this icon to navigate directly to the specific XAML file, line, and column where that element is located (currently using VS Code). Please, read the Resources tab section for more information about how to edit and reload resources on the fly.

NOTE

The 'Project Path' set in the Resources tab is used to resolve these XAML file locations on disk. Ensure your Project Path is properly configured if source navigation is not opening your files.

Selecting Elements & Layout Visualization

You can select a node in the Visual tree to inspect its properties by clicking it directly. Alternatively, you can use the toolbar buttons for advanced selection and layout visualization:

Mouse Selection: Select an element directly within your application. The element currently under the cursor highlights with a red border; click to select it.
Track Focus: The Inspector will automatically follow and select whichever element currently has keyboard focus as you interact with your application.
Display Layout Adorners: Toggles the visualization of the Padding and Margin of the selected node.
Display Subtree Bounds: Visualizes the bounding box of the entire subtree under the selected node.
Refresh: Synchronizes the contents of the visual tree with the current state of the application.

Inspecting Properties

Once a node is selected, its properties populate the Properties tree. Properties are sorted alphabetically and can be easily found using the filter text box at the top.

In addition to DependencyProperties, reflection properties are now fully exposed. This includes full support for viewing and editing properties like DataContext, VisualStates, and Interactions.

For each property, its name and active value are displayed. Because properties can receive values from multiple sources (e.g., Styles, Triggers, or Local Values), the Inspector provides visual cues to help you understand where a value is coming from:

Value Hierarchy: Use the drop-down list in the middle column to inspect the full stack of providers for a property. Active values (highest priority) are displayed with a white font, while overridden values (lower priority) are displayed in red.
Color-Coded Borders: Borders around values indicate their specific source:
- Light Blue: Frozen value.
- Gold: Data Binding.
- Green: Resource.
Complex Objects: If a value is an object or a collection, you can expand it to inspect its contents hierarchically.

Editing Properties On the Fly

You can modify property values in real time by clicking the Edit Local Value button.

Local Value Indicator (Blue Border): When editing a property, a blue border is placed around the text box. This signifies that the current value is an override local to the Inspector, rather than coming from the application itself.
Applying Changes: Type the new value or select it from a drop-down list (for enumerations, objects, or booleans). Press return to set the value, or escape to cancel.
String Conversion: The input accepts any string that can be converted to the target object's type. For example, typing Red when editing a property of type Brush will automatically create a SolidColorBrush with its Color property set to #ffff0000.
Clearing Values: Click the Clear Local Value button to remove the Inspector's override and restore the original application value.
Editing Collections: If the value is a collection, you can use the UI to add new items or remove existing items individually.
Navigating to Source: If a property value points to another node in the Visual tree, you can click the Go to source button to jump straight to that element in the tree.

Live Properties tab

The Live Properties tab introduces support for data breakpoints. This feature allows you to monitor specific properties and trace exactly what modifies their values in real-time.

To start watching a property:

Locate the property you want to track in the Properties panel (within the Elements tab).
Click the space to the right of the property's value field to toggle a Red Circle indicator.

Once a property is marked, switch over to the Live Properties tab. Here, the Inspector maintains a continuous log of every time that property changes its value, making it incredibly easy to understand when and how a property is being modified. Additionally, while a property is being watched, its value will automatically update in real-time within the Properties panel, without requiring you to manually click the refresh button.

You can stop tracking a property at any time by clicking the close icon (x) next to its name in the list.

Note

This feature is especially powerful when you have a debugger attached to your application (such as Visual Studio). If a watched property changes, the application will automatically trigger a breakpoint in your code. By analyzing the resulting call-stack in your IDE, you can pinpoint the exact code execution that caused the property change.

Events tab

The Events tab allows you to trace routed events in real-time to understand exactly how they propagate through your application's visual tree.

To begin tracking, select the specific events you are interested in from the list within the tab. Once selected, the Inspector will capture and display the lifecycle of those events as they interact with your UI.

For each captured event, the trace output provides detailed routing information:

Header: Displays the name of the routed event, indicates the original element where the event was raised (the source of the route), and identifies exactly which element in the path marked the event as Handled.
Event Route: Below the header, the complete route is displayed, mapping the event's path from the root of the visual tree down to the source element.

For example, if you track a MouseDown event, the trace might show the event originating on a TextBlock. As you follow the route, you can observe it bubbling up the tree, see it get marked as handled by a ToggleButton named "Start", and view the rest of the elements involved in the routing process.

Performance tab

The Performance tab provides comprehensive, frame-by-frame profiling tools to help you identify bottlenecks and optimize your application's UI rendering pipeline. By continuously capturing execution metrics, it allows you to analyze CPU update times, GPU rendering costs, texture management overhead, and memory consumption in real time.

Whether you are investigating sudden frame rate drops, measuring drawing efficiency, or tracking down excessive allocation counts, this tab gives you granular visibility into the inner workings of NoesisGUI. The interface is organized into three main sections: playback performance graphs, detailed per-frame render statistics, and global memory counters, making it easy to isolate whether a performance issue stems from complex layout passes, heavy GPU batching, or overall resource allocation.

Performance Graph (Top)

The top graph visualizes the update and render times for consecutive frames.

Playback Controls: The graph updates continuously by default. You can freeze or resume the capture at any time using the pause and play buttons.
Frame Selection: Click directly on the graph to inspect a specific frame (this automatically pauses the capture). Once a frame is selected, use the arrow buttons to step forward or backward.
Data Filtering: Use the color-coded checkboxes on the left to toggle which specific timing metrics are displayed on the graph.

Frame Statistics (Bottom)

This panel displays detailed rendering metrics. If a specific frame is selected in the graph, it shows the exact data for that frame; otherwise, it displays the average over the last second of runtime.

Rendering Stats: Frames per second, total frame time, and the specific update and render times.
Drawing Stats: Total triangles and primitives drawn, batches submitted to the GPU, paths tessellated, and the total size and number of buffer submissions. Deltas from the previous frame are shown for path tessellation.
Internal Textures: Statistics on gradients updated, as well as glyphs rasterized and discarded from the cache (with deltas shown in parentheses).
Render State: The number of stencil buffer masks, opacity groups, and render target switches required to draw the frame.

Memory Statistics (Right Panel)

The right-hand panel monitors current memory usage.

Metrics: Displays the total amount of memory currently allocated and the number of allocation requests.
Scope: Note that while the rendering statistics apply only to the currently selected View, the memory statistics reflect all NoesisGUI objects across the entire application.

Resources tab

The Resources tab displays all assets currently loaded by your application, organized into three category columns: XAMLs, Textures, and Fonts.

At the top of the tab, the Project Path address bar allows you to type or browse to your project's root directory on disk. This path is combined with relative resource URIs to locate the corresponding source files on your computer.

To open and edit an asset:

Click the pencil edit icon that appears next to any resource when hovering over or selecting it, or double-click the item directly.
The asset will automatically open in your system's default external application for that file type (such as VS Code for XAML or an image editor for textures).
When you save your changes in the external editor, the updated file will automatically be Hot Reloaded in the running target application.

Console tab

The Console tab provides real-time log monitoring and remote command execution for the attached application:

Log Output: Displays console messages, warnings, and system logs generated by the target application in real time.
Command Prompt: Located at the bottom of the tab, this allows you to execute commands directly on the target application while it is running.

📍 On this page

Getting started
Inspector layout