DevTools & Fluxy Inspector

The Fluxy Inspector provides a premium, glassmorphic debugging interface with real-time feedback and advanced productivity features.

Enable Inspector

To activate the high-end debugging interface, wrap your root application with Fluxy.debug:

runApp(Fluxy.debug(child: MyApp()));

Core Inspector Modules

1. Premium Glassmorphic HUD

A Floating Action Button appears in debug mode. Tapping it opens the primary inspector shield, featuring a modern glassmorphic UI with high-performance blur effects and real-time system mirrors.

2. Flux Registry (Search & Live Edit)

Inspect every registered flux/signal in your system.

Search & Filter: Find fluxes by name or ID instantly.
Live Value Editing: Update boolean, string, and numeric values directly from the UI to test edge cases without hot-reloads.
Update Flashing: Signals now briefly flash blue in the list when their value changes.

3. DI Registry Inspector

Inspect every registered dependency within the FluxyDI container.

Lifecycle Scopes: View app, route, and factory scopes.
Initialization Tracking: Check initialization status and lazy-loading states.
Auto-Cleanup: Monitor dependencies that are disposed when routes are popped.

4. Network Activity Logs

A specialized engine that monitors all HTTP traffic.

JSON Prettifier: Request and response bodies are automatically formatted with indentation.
Clipboard API: One-tap copy for headers, bodies, and URLs.
Latency Tracking: See exactly how long each request takes.

5. State Update Timeline

A real-time ticker showing every flux update across the system.

Timeline Controls: Search, pause/resume, and clear functionality.
Trace Origins: Identify exactly when and where state changes occurred.

6. State Snapshots (Time Travel)

Capture the exact state of your application at any point in time and restore it instantly with a single tap.

Save State: Take a snapshot of all active signals in the app.
Time Travel Restore: Instantly revert your application state to any previous snapshot for rapid bug reproduction.

[!IMPORTANT] Labels Matter! For a flux to be eligible for Snapshot Capturing and to appear clearly in the timeline, you must assign it a label:
final counter = flux(0, label: "CounterState"); // ✅ Captured by Snapshots
final hidden = flux(0); // ❌ Ignored by Snapshots

As of v0.2.1, the Inspector is fully context-independent. It no longer requires a ScaffoldMessenger, Overlay, or MaterialLocalizations in your app tree to function, making it safe to use even in minimal app configurations.

Global Error Pipeline (`Fx.onError`)

Starting from v0.2.0, you can pipe all framework and platform errors to a single expressive sink:

void main() {
  Fx.onError((error, stack) {
    // Pipe to Sentry, Firebase, or your own backend
    print("Intercepted Error: $error");
  });
  
  runApp(Fluxy.debug(child: MyApp()));
}

This pipeline captures:

Flutter framework exceptions (Widget errors).
Asynchronous errors (Future/Stream failures).
Platform-level exceptions.

The Master DevTools Implementation

To get the most out of the Fluxy Inspector, including the time-traveling State Snapshots, you should consistently label your fluxes and set up your entry point to conditionally wrap the app in debug mode.

import 'package:flutter/material.dart';
import 'package:fluxy/fluxy.dart';

// 1. Properly Labeled State (Essential for Snapshots)
class AppState {
  static final themeMode = flux<ThemeMode>(ThemeMode.light, label: "App_ThemeMode");
  static final currentUser = flux<String?>("Guest", label: "App_CurrentUser");
  static final notifications = fluxList<String>([], label: "App_Notifications");
}

void main() async {
  // 2. Initialize Fluxy Kernel
  await Fluxy.init();
  
  // 3. Register global error sink
  Fx.onError((error, stack) {
    Fluxy.log("CRASH_HANDLER", "ERROR", error.toString());
  });

  // 4. Wrap with Fluxy.debug in development
  const isProd = bool.fromEnvironment('dart.vm.product');
  
  runApp(
    isProd 
      ? const MainApp() 
      : Fluxy.debug(child: const MainApp())
  );
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return FluxyApp(
       title: "DevTools Demo",
       // ... other app configs
    );
  }
}

When running in debug mode, the Fluxy Inspector FAB will float over your app. Because themeMode, currentUser, and notifications all have a label, you can click "Capture Snapshot", interact with your app to change these values, and then restore the entire state matrix exactly back to where it was for instant bug reproduction.

DevTools & Debugging