Flutter VSCode Logger
A powerful VS Code extension for viewing Flutter application logs in real-time with a modern, feature-rich interface.
Features
Core Features
- Real-time log viewing from Flutter debug sessions
- Color-coded log levels (debug, info, warning, error, fatal)
- Search and filter capabilities
- Tag support for log categorization
- Stack traces for error logs
- Extra metadata displayed as formatted JSON
- No network configuration required
Modern Log Detail Panel
- Beautiful gradient header with level-based colors
- Relative time display ("Just now", "2m ago", "1h ago")
- Navigate between logs with keyboard arrows or buttons
- Collapsible sections for Extra Data and Stack Trace
- Copy individual sections or entire log
- Export single log to JSON file
- Open log in VS Code editor
Statistics Dashboard
- Log level distribution with visual bar charts
- Activity by hour visualization
- Top tags ranking
- Apps breakdown with log counts
- Quick stats: Error rate, logs with stack traces, extra data count
Export Options
- JSON - Structured format with all data
- Text - Human-readable format
- CSV - For spreadsheets and data analysis
- Markdown - Formatted documentation
Right-click on any log entry to:
- Copy Log (JSON) - Full log as JSON
- Copy Message - Just the message text
- Show Log Details - Open detail panel
Installation
From VS Code Marketplace
Search for "Flutter VSCode Logger" in VS Code Extensions or install directly:
Flutter VSCode Logger
From VSIX
code --install-extension flutter-vscode-logger-ext-1.1.0.vsix
Flutter Package
This extension works with the companion Flutter package:
flutter_vscode_logger on pub.dev
GitHub: flutter-vscode-logger
Setup in Flutter App
- Add the package to your Flutter project:
dependencies:
flutter_vscode_logger: ^1.0.2
- Initialize in your app:
import 'package:flutter_vscode_logger/flutter_vscode_logger.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
VscodeLogger.instance.init(
appName: 'My App',
minLevel: LogLevel.debug,
);
runApp(MyApp());
}
- Use the logger:
logger.debug('Debug message');
logger.info('Info message');
logger.warning('Warning message');
logger.error('Error message', error: e, stackTrace: stackTrace);
logger.fatal('Fatal error');
// With tags
logger.info('User logged in', tag: 'AUTH');
// With extra metadata (shown as formatted JSON)
logger.info('Purchase completed', extra: {'orderId': '123', 'amount': 99.99});
Usage
- Open your Flutter project in VS Code
- Run your app in debug mode (F5)
- Open the Flutter Logger panel from the Activity Bar
- Logs appear automatically as your app runs
- Click on any log entry to see full details
- Use keyboard shortcuts to navigate between logs
Keyboard Shortcuts (in Detail Panel)
| Key |
Action |
← |
Previous log |
→ |
Next log |
Ctrl+C |
Copy selected text |
Commands
| Command |
Description |
| Flutter Logger: Start Listening |
Start capturing logs |
| Flutter Logger: Stop Listening |
Stop capturing logs |
| Flutter Logger: Clear Logs |
Clear all logs |
| Flutter Logger: Filter by Level |
Filter logs by minimum level |
| Flutter Logger: Search Logs |
Search in log messages |
| Flutter Logger: Export Logs |
Export logs to file |
| Flutter Logger: Show Statistics |
Open statistics dashboard |
| Flutter Logger: Filter by Tag |
Filter by specific tag |
| Flutter Logger: Show Errors Only |
Quick filter for errors |
| Flutter Logger: Show Warnings and Above |
Quick filter for warnings+ |
| Flutter Logger: Reset All Filters |
Clear all filters |
Settings
| Setting |
Default |
Description |
flutterLogger.maxLogs |
5000 |
Maximum logs to keep in memory |
flutterLogger.autoStart |
true |
Auto-start listening when VS Code opens |
flutterLogger.showTimestamp |
true |
Show timestamp in log entries |
flutterLogger.colorize |
true |
Color-code log entries by level |
flutterLogger.compactMode |
false |
Truncate long messages in tree view |
flutterLogger.timestampFormat |
"time" |
Format: "time", "datetime", or "relative" |
Screenshots
Log Tree View
The sidebar shows all captured logs with icons, timestamps, and tags. Hover over any log to see a detailed tooltip.
Detail Panel
Click any log to open the detail panel with full information, navigation controls, and copy buttons.
Statistics Dashboard
View log analytics including level distribution, activity patterns, and tag usage.
How It Works
The extension listens to the VS Code debug adapter and captures log output from Flutter apps. The Flutter package outputs structured JSON logs using dart:developer, which the extension parses and displays in a tree view.
No network ports or WebSocket connections are needed - logs are captured directly from the debug session.
Development
git clone https://github.com/nurlangarash/flutter-vscode-logger-ext
cd flutter-vscode-logger-ext
npm install
npm run compile
npm run watch # for development
npm run package # to create VSIX
License
MIT
