Adding Network Inspection to the Debug Panel

Pro

What you'll learn

• Generating the network inspector sub-brick for app_debugger
• Choosing between Dio and http adapters
• Attaching Alice to your MaterialApp and HTTP client
• Stripping Alice completely from release builds

Prerequisites

• app_debugger brick already installed (see App Debugger Setup)
• Network SDK (Dio or http) already generated and registered

Step 1: Generate the Brick

archipelago generate app_debugger_network

You will be prompted for:

• networkLibrary — dio or http (auto-detected from archipelago.yaml if present, defaults to dio)

Or pass it directly:

archipelago generate app_debugger_network --var networkLibrary=dio

Step 2: Understand the Generated Packages

infrastructure/
├── app_debugger_network_api/     # Inspector contract
│   └── lib/src/
│       └── network_inspector_sdk.dart
├── app_debugger_network/         # Debug tab implementation (Alice)
│   └── lib/src/
│       ├── network_inspector_sdk_impl.dart
│       ├── alice_dio_adapter.dart      # present when networkLibrary=dio
│       ├── alice_http_adapter.dart     # present when networkLibrary=http
│       └── di/network_inspector_module.dart
└── app_debugger_network_noop/    # Release no-op
    └── lib/src/
        └── network_inspector_sdk_noop.dart

Step 3: Configure build_prepare

# build_prepare.yaml
flavors:
  debug:
    app_debugger_network:
      dependency: app_debugger_network
  release:
    app_debugger_network:
      dependency: app_debugger_network_noop

Alice is not compiled into the release binary at all — not just hidden behind a flag.

Step 4: Attach the Navigator Key

Alice needs a reference to the navigator to push its detail screens. Pass it through builder on your MaterialApp:

// In your shell app widget
MaterialApp.router(
  routerConfig: router,
  builder: getIt<Alice>().buildWithNavigatorObserver,
)

Step 5: Attach the Network Adapter

Dio

// In your network module or bootstrap
final dio = getIt<Dio>();
dio.interceptors.add(getIt<AliceDioAdapter>());

http

The http package has no interceptor concept. Call the adapter after every response:

final uri = Uri.parse('https://api.example.com/users');
final response = await http.get(uri);
getIt<AliceHttpAdapter>().onResponse(response);

Wrap this in a utility client so you don't repeat it across every call site.

Step 6: Verify in Debug Mode

Run the app and make any network request. Open the debug panel and tap Network — you should see the request with status code, headers, request body, and response body.

Tap any row to drill into the full request/response detail view that Alice provides.

Common Issues

Symptom	Likely Cause
Panel tab appears but no requests shown	Adapter not added to dio.interceptors
Alice detail screen doesn't open	buildWithNavigatorObserver not wired in MaterialApp
Requests visible in debug but not release	Expected — noop is active in release

Next Steps

• Set up App Debugger if you haven't already
• Configure Network SDK to adjust timeouts and base URLs