How to inspect HTTP requests in the Flutter debug panel

Docs/Tutorials/app_debugger_network

Pro Reference for app_debugger_network: every variable, option and package it generates. Command: archipelago generate app_debugger_network

Generate the network inspector for app_debugger, choose the Dio or http adapter, attach Alice to your client, and strip it from production flavors.

What you'll learn

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

Prerequisites

• app_debugger already installed (see App Debugger Setup)
• A network SDK, network_sdk_dio or network_sdk_http, already generated

Step 1: Generate the Brick

archipelago generate app_debugger_network

The only variable is networkLibrary, dio or http. The brick reads it from infrastructure.network_library in archipelago.yaml. It falls back to dio when that key is missing. Pass it yourself on an http project without that key:

archipelago generate app_debugger_network --var networkLibrary=http

Step 2: Understand the Generated Packages

features/app_debugger_network/
├── app_debugger_network_api/     # NetworkInspectorSDK contract and models
├── app_debugger_network/         # Debug implementation (Alice) and Network tab
└── app_debugger_network_noop/    # Production-flavor stub

Step 3: Check build_prepare

The brick adds the swap entry to build_prepare.yaml for you:

build_prepare:
  mappings:
    - debug: app_debugger_network
      release: app_debugger_network_noop

The generated Fastfile runs dart run monorepo_toolkit build-prepare --flavor <flavor> before every build. Internal flavors keep the inspector, also in release mode. The production flavor gets the noop. Alice is not compiled into the production binary.

Step 4: Check the Wiring

The hook adds GetIt.I<NetworkInspectorSDK>(); at the archipelago:debug_panel_pages marker in app_debugger's lib/src/di/debug_tools.dart. This makes the Network tab appear.

Alice gets its navigator key from the shared debug navigator. You do not touch MaterialApp.

Step 5: The Adapter Attaches Itself

NetworkInspectorSDKImpl offers Alice's adapter to network_sdk_api's NetworkInterceptorRegistry. DioHttpClient adopts it as an interceptor. DartHttpClient adopts AliceHttpAdapter.onResponse as a response observer. The order of DI registration does not matter. You write no code.

A client you build yourself from plain Dio() or http.Client() is not inspected. The production flavor registers nothing, because the noop twin never touches the registry.

Step 6: Verify in an Internal Flavor

Run the app and make a network request. Open the debug panel and tap Network. The request shows with status code, headers and bodies. Tap a row to open the full Alice detail view.

Testing

Alice starts local notifications when DI builds it. The package ships a test prerequisite for this. Run dart run monorepo_toolkit generate test-harness to add it to the composition-root harness. See Testing.

Common Issues

Symptom	Likely Cause
Tab shows but no requests	The request does not go through DioHttpClient / DartHttpClient
Wrong adapter generated	networkLibrary does not match your network SDK
Requests missing in production	Expected. The noop is active in the production flavor

Next Steps

• Set up App Debugger if you have not already
• Configure the Network SDK to adjust timeouts and base URLs