【VSCode 扩展】一个 Flutter log 格式化扩展

可能做过Flutter的人都知道，flutter的log输出有长度限制，无法输出超长json。

那么做网络请求开发时候，要怎么获取完整的响应json调试用呢？

对的，分段输出，再拼起来。

但是好麻烦的对吧？

于是这个扩展诞生了——

https://github.com/iwpz/flutter-log-formatter

可以直接在VSCode插件市场里搜 Flutter Log Formatter

使用方法

方法 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. 扩展将使用你的自定义配置来解析日志

支持的日志格式

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

iOS Flutter 日志：

```text
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 调试，可以从调试控制台复制日志