Skip to main content

Crate dioxus_inspector

Crate dioxus_inspector 

Source
Expand description

§Dioxus Inspector

HTTP bridge for inspecting and debugging Dioxus Desktop apps. Embed this in your app to enable MCP-based debugging from Claude Code.

§Quick Start

use dioxus::prelude::*;
use dioxus_inspector::{start_bridge, EvalResponse};

fn main() {
    dioxus::launch(app);
}

fn app() -> Element {
    use_inspector_bridge(9999, "my-app");
    rsx! { div { "Hello, inspector!" } }
}

fn use_inspector_bridge(port: u16, app_name: &str) {
    use_hook(|| {
        let mut eval_rx = start_bridge(port, app_name);
        spawn(async move {
            while let Some(cmd) = eval_rx.recv().await {
                let result = document::eval(&cmd.script).await;
                let response = match result {
                    Ok(val) => EvalResponse::success(val.to_string()),
                    Err(e) => EvalResponse::error(e.to_string()),
                };
                let _ = cmd.response_tx.send(response);
            }
        });
    });
}

§Architecture

Claude Code <--MCP--> dioxus-mcp <--HTTP--> dioxus-inspector <--eval--> WebView
  1. Call start_bridge with a port and app name
  2. Poll the returned receiver for EvalCommands
  3. Execute JavaScript via document::eval() and send responses back

§HTTP Endpoints

EndpointMethodPurpose
/statusGETApp status, PID, uptime
/evalPOSTExecute JavaScript in webview
/queryPOSTQuery DOM by CSS selector
/domGETGet simplified DOM tree
/inspectPOSTElement visibility analysis
/validate-classesPOSTCheck CSS class availability
/diagnoseGETQuick UI health check
/screenshotPOSTCapture window (macOS only)
/resizePOSTResize window (requires app handling)

§Platform Support

  • Screenshot capture: macOS only (uses Core Graphics)
  • All other features: Cross-platform

Structs§

BridgeState
Shared state for the HTTP bridge.
EvalCommand
Command sent from HTTP server to Dioxus app for JavaScript evaluation.
EvalRequest
Request to evaluate JavaScript in the webview.
EvalResponse
Response from JavaScript evaluation.
QueryRequest
Query request for CSS selector.
ResizeRequest
Request to resize the window.
ResizeResponse
Response from resize operation.
StatusResponse
Status response showing bridge health.

Functions§

start_bridge
Start the inspector HTTP bridge.