Flutter Log Explorer
Structured Capture, Smart Classification & Real-Time Log Explorer for Flutter & Dart in VS Code
🚀 Overview
Flutter Log Explorer is a high-performance VS Code extension designed to replace the messy, unstructured, and noisy Debug Console when developing Flutter and Dart applications.
It automatically captures logs via both the Debug Adapter Protocol (DAP) and the Dart VM Service WebSocket, intelligently reassembles fragmented output chunks, deduplicates overlapping streams, and presents your logs in an interactive, color-coded, real-time viewer right in your VS Code Activity Bar.
✨ Why Flutter Log Explorer?
| Feature |
Default Debug Console |
Flutter Log Explorer |
dart:developer log() support |
⚠️ Often stripped or missing |
✅ Captured in full via VM Service |
| Output Chunk Reassembly |
❌ Chunks can break mid-line |
✅ Multi-chunk LineBuffer normalization |
| Log Classification |
❌ Flat monochrome text |
✅ Automatic ERROR, WARN, INFO, NETWORK, FIREBASE, NAV |
| Stream Controls |
❌ Uncontrolled auto-scrolling |
✅ Pause/Resume, Scroll-Lock, "↓ New logs" pill |
| Hot Reload / Restart Tracking |
❌ Blended output stream |
✅ Generational awareness (Hot Reload vs Hot Restart) |
| Memory & Performance |
⚠️ Can freeze on heavy loops |
✅ Configurable ring-buffer store (default 50,000 logs) |
| Privacy & Security |
✅ Local |
✅ 100% Local-first, zero telemetry, zero cloud calls |
⚡ Quick Start (1-Minute Setup)
1. Requirements
2. Usage
- Open any Flutter project in VS Code.
- Click the Flutter Log Explorer icon on the Activity Bar (left sidebar).
- Press F5 to start debugging your Flutter app as usual.
- Watch structured, classified logs stream in real-time!
import 'dart:developer' as developer;
// Standard prints
print("User logged in successfully");
// Rich structured logs (captured via Dart VM Service)
developer.log(
"Failed to fetch user profile",
name: "auth.service",
level: 1000, // Mapped automatically to ERROR
error: Exception("401 Unauthorized"),
);
🔍 Key Features
📡 Zero-Config Dual-Collector Engine
Captures logs simultaneously from:
- Debug Adapter Protocol (DAP): Intercepts stdout, stderr, process output, and framework diagnostic events.
- Dart VM Service WebSocket: Connects directly to the Dart VM Service to capture
dart:developer log() entries with custom levels, logger names, error objects, and stack traces.
🏷️ Intelligent Automatic Classification
Logs are analyzed and tagged with contextual metadata:
- 🔴 ERROR / FATAL: Unhandled exceptions, error objects, 5xx responses, RenderFlex errors.
- 🟡 WARNING: Deprecations, framework alerts, 4xx responses.
- 🔵 INFO / DEBUG: Standard
print(), debugPrint(), debug events.
- 🌐 NETWORK: HTTP / REST / GraphQL queries, status codes, endpoints.
- 🧭 NAVIGATION: Route changes, push/pop events, deep links.
- 🔥 FIREBASE: Authentication, Firestore, Remote Config, Analytics logs.
- ⚙️ SYSTEM: App lifecycle, debug session start/stop, hot reload, hot restart.
🛡️ Smart Deduplication & Chunk Assembly
When the same log line is emitted through both DAP and the VM Service, the built-in Deduplicator matches and suppresses the duplicate within a 1.5s sliding window while preserving naturally repeating application logs.
⏸️ Interactive Stream Controls
- Pause / Resume: Freeze the live view to inspect logs while the background collector continues buffering.
- Auto-Scroll Lock: Scrolling up locks the view; a "↓ New logs" pill alerts you when new lines arrive.
- Clear Logs: Instant reset of buffer and counters.
🏗️ Architecture
Flutter Application (F5 Debug Session)
│
├────────────────────────────────────────┐
▼ ▼
Debug Adapter Protocol (DAP) Dart VM Service
(stdout / stderr / framework) (Logging / Stdout / Stderr)
│ │
▼ ▼
LineBuffer LineBuffer
│ │
└───────────────────┬────────────────────┘
▼
Deduplicator
▼
LogStore (In-Memory)
▼
Flutter Log Explorer Panel
(VS Code Activity Bar Webview)
⚙️ Configuration Settings
Customize Flutter Log Explorer via VS Code Settings (Cmd+, or Ctrl+, > search flutterLogExplorer):
| Setting |
Type |
Default |
Description |
flutterLogExplorer.maxLogs |
number |
50000 |
Maximum number of logs retained in memory. Oldest logs are evicted first; error counters and session history remain intact. |
flutterLogExplorer.vmService.enabled |
boolean |
true |
Connects to the Dart VM Service WebSocket when detected to capture dart:developer log() streams. |
flutterLogExplorer.diagnostics.logDapTraffic |
boolean |
false |
Dumps raw Debug Adapter Protocol traffic to the "Flutter Log Explorer (Diagnostics)" Output channel for troubleshooting. |
⌨️ Available Commands
Access these commands from the VS Code Command Palette (Cmd+Shift+P / Ctrl+Shift+P):
Flutter Log Explorer: Open — Focus and open the Log Explorer view.Flutter Log Explorer: Clear Logs — Clear all logs and reset counters.Flutter Log Explorer: Pause Collection — Temporarily pause timeline rendering.Flutter Log Explorer: Resume Collection — Resume live log streaming.Flutter Log Explorer: Restart Collector — Reconnect to active debug sessions and VM Service.
❓ FAQ & Troubleshooting
Why do some logs show up under WARNING or ERROR automatically?
The built-in classifier scans log content and VM Service levels. Lines containing exceptions, stack traces, 5xx HTTP codes, or level >= 1000 are labeled as ERROR, while 4xx codes or framework warnings are labeled as WARNING.
Does Flutter Log Explorer work with physical devices and emulators?
Yes! As long as you run your Flutter app in debug mode (F5) through VS Code on an Android Emulator, iOS Simulator, physical device, macOS, Windows, Linux, or Web, logs are captured automatically.
Are my logs private?
100% Yes. Flutter Log Explorer operates entirely locally within your VS Code instance. No analytics, no telemetry, and no external network calls are made. Logs are stored strictly in local memory and are never persisted to third-party servers.
Where can I see raw adapter diagnostic logs?
Open the Output panel in VS Code (View > Output) and select "Flutter Log Explorer (Diagnostics)" from the dropdown.
🛣️ Roadmap
- [x] Milestone 1: Zero-config DAP + Dart VM Service collectors, in-memory store, live Webview stream, deduplication, pause/resume.
- [x] Milestone 2: Regex classifier engine, categorized severity tags (Network, Firebase, Navigation, System).
- [ ] Milestone 3: Advanced search syntax (
level:error category:network text), stack-trace click-to-source navigation.
- [ ] Milestone 4: Session selector, incident reporting, network payload viewer & sensitive data auto-redaction.
- [ ] Milestone 5: Export logs (JSON, CSV, Plaintext), custom user classification rules.
📄 License
This extension is licensed under the MIT License.
Developed with ❤️ for the Flutter & Dart community.
| |
