DevFlow Quick Start

Inspect your running .NET MAUI apps in real-time — visual tree, network traffic, Blazor WebView DOM, and more.

What is DevFlow?

MauiDevFlow is a lightweight agent that runs inside your .NET MAUI app during development. It exposes an HTTP API that MAUI Sherpa connects to, giving you powerful debugging tools without attaching a debugger.

Visual Tree

Browse UI hierarchy with live screenshots

WebView / DOM

Inspect Blazor content via CDP

Network

Capture HTTP requests and responses

Logs

Stream native & WebView console logs

Setup Guide

Add the DevFlow agent to your MAUI app in three steps. It only runs in Debug builds.

Install NuGet Packages

Add the MauiDevFlow packages to your MAUI project. Use the .Blazor package if your app uses BlazorWebView.

Terminal 
# Required: Core agent
dotnet add package Redth.MauiDevFlow.Agent

# Optional: Blazor WebView support (DOM, console, CDP)
dotnet add package Redth.MauiDevFlow.Blazor

Tip

For macOS AppKit apps (using Platform.Maui.MacOS), the standard packages include macOS support automatically. For Linux/GTK apps, use Redth.MauiDevFlow.Agent.Gtk and Redth.MauiDevFlow.Blazor.Gtk instead.

Register in MauiProgram.cs

Add the DevFlow agent registration inside a #if DEBUG block so it's never included in release builds:

C# 
public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder.UseMauiApp<App>();

#if DEBUG
    // Add DevFlow agent for remote inspection
    builder.AddMauiDevFlowAgent();

    // If using BlazorWebView:
    builder.AddMauiDevFlowBlazor();
#endif

    return builder.Build();
}

Run Your App & Connect

Build and run your MAUI app normally. The DevFlow agent starts automatically and registers with the local broker daemon.

Terminal 
# Build and run on your target platform
dotnet build -f net10.0-ios -t:Run
dotnet build -f net10.0-android -t:Run
dotnet build -f net10.0-maccatalyst -t:Run

Then in MAUI Sherpa:

  1. Navigate to DevFlow in the sidebar
  2. Click Connect — your app should appear in the agent list
  3. Click on your app to open the inspector
DevFlow connected agents showing running MAUI apps

Android Note

For Android emulators, you'll need to set up port forwarding so the emulator can reach the broker running on your host machine:

Terminal 
adb reverse tcp:19223 tcp:19223

Mac Catalyst Note

Mac Catalyst apps need the com.apple.security.network.server entitlement to allow the DevFlow agent to accept connections. Add this to your Entitlements.plist.

Inspector Features

Once connected, the inspector gives you deep visibility into your running app.

  Visual Tree

Browse the full MAUI visual hierarchy. Select any element to see its properties, bounds, and relationship to other elements. The tree auto-captures a screenshot of the window the selected element belongs to, with the element highlighted.

  • Expand/collapse entire sub-trees with one click
  • Auto-switch screenshots when selecting elements across windows
  • Search by type, AutomationId, or text content
  • View element properties, bounds, and visibility state
DevFlow visual tree inspector with element hierarchy and live screenshot

  Network Capture

See every HTTP request your app makes — URL, method, status code, timing, headers, and full request/response bodies with syntax highlighting. Works automatically with HttpClient registered through DI.

  • Filter requests by URL, method, or status code
  • Syntax-highlighted JSON/XML/HTML response bodies
  • Request timing and size information
  • Click any request for full detail view
DevFlow network inspector showing captured HTTP requests and response details

  WebView / Blazor

For Blazor Hybrid apps, inspect the WebView content via Chrome DevTools Protocol (CDP). Browse the DOM, run JavaScript, view console output, and switch between multiple WebView instances.

  • DOM snapshot in accessible text format
  • Live JavaScript evaluation
  • WebView console log streaming
  • Multi-WebView target switching
DevFlow WebView inspector showing Blazor DOM content

  Application Logs

Stream logs from both native ILogger output and WebView console.* calls. Filter by level (Debug, Info, Warning, Error) and source (Native, WebView).

  • Auto-polling for new log entries
  • Filterable by log level and source
  • Sortable columns with resizable widths
  • Exception stack trace display
DevFlow application logs with level filtering and stack traces

Command-Line Interface

MauiDevFlow also includes a powerful CLI for terminal-based inspection, perfect for CI/CD pipelines and AI-assisted development.

Terminal 
# Install the CLI
dotnet tool install --global Redth.MauiDevFlow.CLI

# Wait for app to connect
maui-devflow wait

# Browse visual tree
maui-devflow MAUI tree

# Take a screenshot
maui-devflow MAUI screenshot --output screen.png

# Inspect Blazor DOM
maui-devflow cdp snapshot

# Read application logs
maui-devflow MAUI logs --limit 50

See the MauiDevFlow repository for full CLI documentation.