Advanced In-App Debugging Console for Flutter Applications with Network Monitoring
- In-app console: Monitor your app inside your app
- Network inspector: Track API calls and responses with beautiful formatting
- Custom FAB: Use your own floating action button design
- Auto-stash: FAB automatically hides to screen edge after inactivity
- Search & filter: Find specific logs quickly
- Copy & export: Share debug logs with your team
- Pretty logging: Beautiful formatted console output
- Performance optimized: Lightweight and efficient
- Theme support: Adapts to your app's theme
| Console | Network Logs | Custom FAB |
|---|---|---|
 |
 |
 |
dependencies:
tracex: ^1.1.2Then run flutter pub get.
Create a global TraceX instance:
final TraceX tracex = TraceX(
// Pretty logger for beautiful console output
logger: TraceXPrettyLogger(
enabled: kDebugMode,
compact: true,
maxWidth: 100,
),
// Custom floating action button
customFab: (isOpen) => MyCustomFab(isOpen: isOpen),
// Button size and edge margin
buttonSize: 48.0,
edgeMargin: 6.0,
// Log buffer length
logBufferLength: 2500,
);Attach the floating button to the widget tree:
@override
void initState() {
super.initState();
tracex.attach(
context: context,
visible: kDebugMode,
);
}tracex.openConsole(context);dio.interceptors.add(TraceXDioInterceptor(tracex));// After your HTTP request:
tracex.network(
request: NetworkRequestEntry(
method: 'POST',
url: endpoint,
headers: headers,
body: body,
),
response: NetworkResponseEntry(
statusCode: response.statusCode,
headers: response.headers,
body: response.body,
),
);tracex.log('Hello World!');class MyCustomFab extends StatelessWidget {
final bool isOpen;
const MyCustomFab({
super.key,
required this.isOpen,
});
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: isOpen
? [const Color(0xFFe74c3c), const Color(0xFFc0392b)]
: [const Color(0xFF667eea), const Color(0xFF764ba2)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(28),
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(50),
blurRadius: 8,
offset: const Offset(0, 4),
),
],
),
child: Icon(
isOpen ? Icons.close_rounded : Icons.bug_report_rounded,
color: Colors.white,
size: 28,
),
);
}
}TraceX includes a beautiful pretty logger inspired by PrettyDioLogger:
final TraceX tracex = TraceX(
prettyLogger: TraceXPrettyLogger(
enabled: true,
compact: true,
maxWidth: 90,
request: true,
requestHeader: true,
requestBody: true,
responseHeader: true,
responseBody: true,
),
);The FAB automatically stashes to the nearest screen edge after 3 seconds of inactivity and can be unstashed by tapping.
- Search through logs by text
- Filter by log type
- Clear search to show all logs
TraceX automatically adapts to your app's theme using Material 3 design principles.
See the complete example in the /example folder of this repository.
MIT License - see LICENSE file.
Contributions are welcome! Please feel free to submit a Pull Request.
If you encounter any problems or have suggestions, please file an issue at the GitHub repository.
TraceX - Making Flutter debugging beautiful and efficient! 🚀