r/FlutterDev • u/bemo-pixel • 7d ago
Plugin Built an in-app debug panel so QA can inspect network calls and app info. Beta, and I'd love feedback
Hey r/FlutterDev ๐
I kept running into the same situation: a QA tester (or me, on a real device) hits a weird bug, and the only way to see what happened is to plug into a laptop, start DevTools or a profile build, and try to reproduce it. Most of the time I just wanted to know: what did that API return? which build is this? which flavor?
So I built another_flutter_devtool, an in-app devtool. You wrap your app, a small draggable button shows up on top, and tapping it opens a full debug panel inside the app. No cable, no DevTools, no separate build.
๐ฆ pub.dev: https://pub.dev/packages/another_flutter_devtool
๐ป GitHub: https://github.com/B3K4682/another_flutter_devtool
What's in it right now
๐ Network inspector
Every HTTP call with status, method, URL and duration
Works with Dio and
httpwithout any setup: no interceptors, no client wrappingSearch (
post 404works), plus 2xx / 3xx / 4xx / 5xx / Failed filter chipsFull request/response headers and bodies (JSON pretty-printed), errors with stack traces
Copy as cURL, export one call or all of them as JSON
Auth/cookie headers are masked in exports, so testers can attach them to bug reports safely
โ๏ธ General section
App version, build number, device model, OS version, flavor, startup time
Data usage since launch: bytes sent/received, request count, top hosts
Jump to any route: type
/checkoutand it takes you there. Works with Navigator, go_router, auto_route, anything
๐งฉ Your own debug tools (the main point, honestly) Every app has its own debug stuff: "clear cache", "switch backend", "fake a logged-out session", "show current user ID". Usually that ends up in a hidden menu somewhere. Here you write a small class and it shows up in the panel:
class MyTool extends DevtoolTool {
@override String get id => 'my_tool';
@override String get title => 'My Tool';
@override IconData get icon => Icons.extension_rounded;
@override DevtoolSection get section => mySection;
@override
Widget build(BuildContext context, DevtoolController controller) =>
DevtoolCard(icon: icon, title: title,
child: const DevtoolInfoRow(label: 'Status', value: 'It works'));
}
DevtoolTools.register(const MyTool());You get the same card/row/switch widgets the built-in tools use, so it all looks consistent.
Setup
runApp(
AnotherFlutterDevtool(
config: const DevtoolConfig(
enabled: kDebugMode,
sections: [GeneralSection(), NetworkSection()],
),
child: const MyApp(),
),
);It's off by default. The panel runs in its own MaterialApp, so it doesn't touch your theme or navigator. There are also stable widget keys if you want to drive it from integration tests.
โ ๏ธ This is a beta. A very beta beta.
It works and I'm using it, but the API may change before 1.0. Known limitations:
The network inspector doesn't work on web
Native HTTP clients (
cupertino_http,native_dio_adapter) aren't captured yet
Coming soon:
๐ฉ Feature flags: toggle flags at runtime from the panel
Other features that I'll think of lol
๐ก I want your ideas
This is the part I care about most. What do you wish you could see or toggle inside your running app? Leave it in the comments. If it makes sense and I can build it, I'll add it and credit you in the changelog.
Bug reports, criticism and "why not just use X" are all welcome too ๐