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.1

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 expand the log entry in VS Code.

logger.info(
  'Purchase completed',
  tag: 'PAYMENT',
  extra: {
    'orderId': '12345',
    'amount': 99.99,
    'currency': 'USD',
  },
);

Listen to Logs Locally

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

Configuration

Parameter	Type	Default	Description
appName	String	'Flutter App'	Application name shown in VS Code
minLevel	LogLevel	LogLevel.debug	Minimum level to log
printToConsole	bool	true	Print human-readable logs to debug console
useDevLog	bool	true	Use dart:developer log
maxHistorySize	int	1000	Maximum logs to keep in memory

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

Level	Priority	Use Case
debug	0	Detailed debugging information
info	1	General information
warning	2	Warning conditions
error	3	Error conditions
fatal	4	Critical failures

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

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 with extra data to see formatted JSON

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. No network ports or WebSocket connections are needed.

License

MIT