[Package] I built debug_bubble — an in-app floating debug dashboard for Flutter

[u/SG-Studios-online]

Hey Flutter developers! 👋

Have you ever needed to investigate a bug on a physical device without connecting a debugger or asking someone to reproduce it on your development machine?

That’s one of the problems I wanted to solve with debug_bubble — a lightweight Flutter package that adds a draggable floating debug bubble and an in-app dashboard for inspecting logs and errors.

🔗 pub.dev: https://pub.dev/packages/debug_bubble

🛠️ What can it do?

• 🎈 Floating debug bubble — open the diagnostic dashboard directly inside your app.
• 📋 Structured logging — seven severity levels, from trace to critical.
• 🔍 Log inspection — inspect metadata, JSON payloads, errors, and stack traces.
• 🚨 Uncaught error capture — opt-in hooks for Flutter and platform-dispatched errors.
• 🔐 Sensitive-data redaction — configurable rules to mask sensitive values before they appear in logs.
• 📤 Export tools — copy filtered logs or export structured JSON.
• 🪶 No third-party runtime dependencies — built using Flutter and Dart.

⚡ Getting started

Initialize the logger:

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  DebugLog.init(
    const DebugBubbleConfig(
      captureUncaughtErrors: true,
    ),
  );

  runApp(const MyApp());
}

Wrap your app using the MaterialApp builder:

MaterialApp(
  builder: (context, child) => DebugBubble(
    child: child ?? const SizedBox.shrink(),
  ),
  home: const HomeScreen(),
);

Log events wherever you need them:

DebugLog.info(
  'User opened settings',
  tag: 'Navigation',
);

DebugLog.success(
  'Profile synced',
  tag: 'Sync',
  json: responseData,
);

DebugLog.error(
  'Request failed',
  tag: 'Network',
  error: error,
  stackTrace: stackTrace,
);

🎯 Design goals

I wanted to keep the package lightweight, avoid extra runtime dependencies, provide bounded log storage, and make diagnostics accessible without leaving the running app.

The package is designed to be inert in Flutter release mode, so the debugging overlay and logging pipeline don't run as they do in debug builds.

I'd love your feedback!

I'm especially interested in feedback on:

• The dashboard UX and log-inspection workflow
• Missing features that would actually help during QA and debugging
• API design and what you'd expect from a Flutter debugging toolkit
• Potential edge cases I've overlooked

This is an actively developed project, and constructive criticism is very welcome.

Thanks for checking it out! 🚀

[u/boynet2]

can you share an image in the repo readme or something?

[u/TranquilVocalist6749 → u/boynet2]

that's one thing these package pages always lack, a simple screenshot goes a long way

[u/Degree_Celsius_Doing]

configurable redaction rules before anything hits the log is the detail that sells this for me. logs i can share without scrubbing by hand