Skip to content
| Marketplace
Sign in
Visual Studio Code>Debuggers>Flutter Log FormatterNew to Visual Studio Code? Get it now.
Flutter Log Formatter

Flutter Log Formatter

iwpz

|
69 installs
| (0) | Free
Format Flutter console output into readable JSON with configurable markers and multi-language support
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Flutter Log Formatter

English | 中文


English

A VS Code extension for formatting Flutter console output, specifically designed to extract and beautify JSON response data.

Features

  • 🚀 Automatically identify and extract JSON data from Flutter logs
  • 📋 One-click copy formatted JSON to clipboard
  • 🎨 Beautiful interface that supports VS Code themes
  • 📝 Provides sample data for testing
  • 🌐 Multi-language support (English/Chinese)
  • ⚙️ Configurable markers and patterns
  • 💡 Includes helper code for generating compatible logs

Usage

Method 1: Manual Input (Recommended)

  1. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the command palette
  2. Type Flutter Log Formatter: Open Formatter and press Enter
  3. Paste your Flutter console output in the opened panel
  4. Click the "Format Logs" button
  5. The formatted JSON will be displayed below, click "Copy JSON" to copy to clipboard

Method 2: Using Sample Data

  1. Open the formatter panel
  2. Click the "Load Sample Data" button to load sample data
  3. Click "Format Logs" to see the effect

Method 3: Configuration Settings

  1. Open VS Code settings and search for "Flutter Log Formatter"
  2. Configure custom start marker, end marker, and path pattern
  3. The extension will use your custom configuration to parse logs

Supported Log Formats

The extension recognizes the following log formats:

Standard Flutter logs:

flutter: path:/app/v3/my/service/detail/get
flutter: 🚀🚀🚀response start🚀🚀🚀
flutter: {"jsonrpc":"2.0","id":123...
flutter: ......
flutter: ... age":12 }
flutter: 🚀🚀🚀response end🚀🚀🚀

Android Flutter logs:

I/flutter (1626): path:/app/v3/my/service/detail/get
I/flutter (1626): 🚀🚀🚀response start🚀🚀🚀
I/flutter (1626): {"jsonrpc":"2.0","id":123...
I/flutter (1626): ......
I/flutter (1626): ... age":12 }
I/flutter (1626): 🚀🚀🚀response end🚀🚀🚀

How to Generate Compatible Logs

To generate logs that work with this extension, add the following helper method to your Flutter/Dart project:

Step 1: Create a Helper Method

import 'console_tool.dart' as ct;

static void longPrint(String msg) {
  int maxStrLength = 500;
  while (msg.length > maxStrLength) {
    ct.debugPrint(msg.substring(0, maxStrLength));
    msg = msg.substring(maxStrLength);
  }
  ct.debugPrint(msg);
}

Step 2: Use the Helper Method

In your HTTP request handling code, wrap your response logging like this:

// Example usage in your API call
longPrint("path:$path");
longPrint("🚀🚀🚀response start🚀🚀🚀");
longPrint("$response");
longPrint("🚀🚀🚀response end🚀🚀🚀");

This will generate logs that are perfectly compatible with the Flutter Log Formatter extension.

How It Works

  1. Scan the input text for start markers (configurable)
  2. Collect all Flutter log lines between start and end markers
  3. Remove the flutter: or I/flutter (xxxx): prefix from each line
  4. Merge multiple lines into a complete JSON string
  5. Format and display the result
  6. Optionally extract path information for API route detection

Commands

  • Flutter Log Formatter: Open Formatter - Open the main formatting panel
  • Flutter Log Formatter: Start Monitoring - Start terminal monitoring (limited support)
  • Flutter Log Formatter: Stop Monitoring - Stop terminal monitoring

Configuration

You can customize the extension behavior in VS Code settings:

  • Start Marker: The marker that indicates the beginning of a response block
  • End Marker: The marker that indicates the end of a response block
  • Path Pattern: Regular expression pattern to extract API path information

Notes

  • Due to VS Code API limitations, direct terminal output monitoring is limited
  • Manual paste method is recommended for processing logs
  • If you're using Flutter debugging, you can copy logs from the debug console

Development Requirements

  • VS Code 1.102.0 or higher
  • Node.js (for development)

Contributing

Issues and Pull Requests are welcome!

License

MIT


中文

一个用于格式化 Flutter 控制台输出的 VS Code 扩展,专门用于提取和美化 JSON 响应数据。

功能特点

  • 🚀 自动识别并提取 Flutter 日志中的 JSON 数据
  • 📋 一键复制格式化后的 JSON 到剪贴板
  • 🎨 支持 VS Code 主题的美观界面
  • 📝 提供示例数据用于测试
  • 🌐 多语言支持(中文/英文)
  • ⚙️ 可配置的标记和模式
  • 💡 包含生成兼容日志的辅助代码

使用方法

方法 1: 手动输入(推荐)

  1. 按 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (Mac) 打开命令面板
  2. 输入 Flutter Log Formatter: Open Formatter 并回车
  3. 在打开的面板中粘贴你的 Flutter 控制台输出
  4. 点击 "Format Logs" 按钮
  5. 格式化后的 JSON 将显示在下方,点击 "Copy JSON" 可复制到剪贴板

方法 2: 使用示例数据

  1. 打开格式化面板
  2. 点击 "Load Sample Data" 按钮加载示例数据
  3. 点击 "Format Logs" 查看效果

方法 3: 配置设置

  1. 打开 VS Code 设置并搜索 "Flutter Log Formatter"
  2. 配置自定义的开始标记、结束标记和路径模式
  3. 扩展将使用你的自定义配置来解析日志

支持的日志格式

扩展会识别以下格式的日志:

标准 Flutter 日志:

flutter: path:/app/my/todo/list
flutter: 🚀🚀🚀response start🚀🚀🚀
flutter: {"jsonrpc":"2.0","id":123...
flutter: ......
flutter: ... age":12 }
flutter: 🚀🚀🚀response end🚀🚀🚀

Android Flutter 日志:

I/flutter (1626): path:/app/my/todo/list
I/flutter (1626): 🚀🚀🚀response start🚀🚀🚀
I/flutter (1626): {"jsonrpc":"2.0","id":123...
I/flutter (1626): ......
I/flutter (1626): ... age":12 }
I/flutter (1626): 🚀🚀🚀response end🚀🚀🚀

如何生成兼容的日志

要生成与此扩展兼容的日志,请在您的 Flutter/Dart 项目中添加以下辅助方法:

步骤 1: 创建辅助方法

import 'console_tool.dart' as ct;

static void longPrint(String msg) {
  int maxStrLength = 500;
  while (msg.length > maxStrLength) {
    ct.debugPrint(msg.substring(0, maxStrLength));
    msg = msg.substring(maxStrLength);
  }
  ct.debugPrint(msg);
}

步骤 2: 使用辅助方法

在您的 HTTP 请求处理代码中,像这样包装您的响应日志记录:

// API 调用中的使用示例
longPrint("path:$path");
longPrint("🚀🚀🚀response start🚀🚀🚀");
longPrint("$response");
longPrint("🚀🚀🚀response end🚀🚀🚀");

这将生成与 Flutter Log Formatter 扩展完全兼容的日志。

工作原理

  1. 扫描输入文本,查找开始标记(可配置)
  2. 收集开始和结束标记之间的所有 Flutter 日志行
  3. 移除每行的 flutter: 或 I/flutter (xxxx): 前缀
  4. 将多行合并为完整的 JSON 字符串
  5. 格式化并显示结果
  6. 可选择提取路径信息用于 API 路由检测

命令列表

  • Flutter Log Formatter: Open Formatter - 打开主要的格式化面板
  • Flutter Log Formatter: Start Monitoring - 启动终端监听(有限支持)
  • Flutter Log Formatter: Stop Monitoring - 停止终端监听

配置选项

你可以在 VS Code 设置中自定义扩展行为:

  • 开始标记: 指示响应块开始的标记
  • 结束标记: 指示响应块结束的标记
  • 路径模式: 用于提取 API 路径信息的正则表达式模式

注意事项

  • 由于 VS Code API 的限制,直接监听终端输出功能有限
  • 推荐使用手动粘贴的方式来处理日志
  • 如果你在使用 Flutter 调试,可以从调试控制台复制日志

开发环境要求

  • VS Code 1.102.0 或更高版本
  • Node.js (用于开发)

贡献

欢迎提交 Issue 和 Pull Request!

许可证

MIT

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft