flutter_vscode_logger #

A Flutter logging package that integrates with VS Code for real-time log viewing.

Features #

• Multiple log levels (debug, info, warning, error, fatal)
• Tag support for categorizing logs
• Stack trace capture for errors
• Extra metadata support (displayed as formatted JSON in VS Code)
• Cross-platform (Android, iOS, Web, Desktop)
• Zero configuration - works automatically with VS Code debug sessions

Installation #

Add to your pubspec.yaml:

dependencies:
  flutter_vscode_logger: ^1.0.2

Then run:

flutter pub get

Usage #

Initialize #

import 'package:flutter_vscode_logger/flutter_vscode_logger.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  VscodeLogger.instance.init(
    appName: 'My App',
    minLevel: LogLevel.debug,
    printToConsole: false, // Set to false to hide human-readable logs
  );

  runApp(MyApp());
}

Basic Logging #

logger.debug('Debug message');
logger.info('Info message');
logger.warning('Warning message');
logger.error('Error message');
logger.fatal('Fatal message');

With Tags #

logger.info('User logged in', tag: 'AUTH');
logger.debug('API response received', tag: 'NETWORK');

Error Logging #

try {
  // code that might throw
} catch (e, stackTrace) {
  logger.error(
    'Operation failed',
    tag: 'API',
    error: e,
    stackTrace: stackTrace,
  );
}

With Extra Metadata #

Extra metadata is displayed as formatted JSON when you click on the log entry in VS Code.

logger.info(
  'Purchase completed',
  tag: 'PAYMENT',
  extra: {
    'orderId': '12345',
    'amount': 99.99,
    'currency': 'USD',
    'items': ['Product A', 'Product B'],
  },
);

Listen to Logs Locally #

VscodeLogger.instance.logStream.listen((entry) {
  print('New log: ${entry.message}');
});

Configuration #

Console Output Behavior #

• printToConsole: true - Shows human-readable logs like [INFO] [TAG] message
• printToConsole: false - Hides human-readable logs

Note: JSON data for VS Code extension communication always appears in debug console. This is required for the extension to capture logs.

Log Levels #

VS Code Extension #

To view logs in VS Code, install the companion extension from VS Code Marketplace:

Flutter VSCode Logger

GitHub: flutter-vscode-logger-ext

Extension Features (v1.1.0) #

The VS Code extension provides:

• Modern Log Detail Panel - Click any log to see full details with gradient header, navigation between logs, collapsible sections
• Statistics Dashboard - Visual charts showing log level distribution, activity by hour, top tags
• Multiple Export Formats - Export to JSON, Text, CSV, or Markdown
• Context Menu - Right-click to copy logs or messages
• Quick Filters - Filter by level, tag, or search term
• Keyboard Navigation - Use arrow keys to browse logs in detail panel

How to Use #

1. Install the VS Code extension
2. Open your Flutter project in VS Code
3. Run your app in debug mode (F5)
4. Open the Flutter Logger panel from the Activity Bar
5. Logs appear automatically
6. Click on logs to see full details with extra data

How It Works #

The package outputs structured JSON logs via dart:developer. The VS Code extension captures these from the debug session and displays them in a tree view with rich formatting. No network ports or WebSocket connections are needed.

License #

MIT