Debug Log Viewer
实时捕获 VSCode 调试控制台日志,用结构化、可过滤、可搜索的面板替代原始控制台输出,让高频调试日志看得清、找得到、不卡顿。

功能特性
- 实时同步:通过 VSCode Debug API(DAP
output 事件、自定义调试事件)与文件监听(fs.watch tail)三种通道捕获日志,调试一开始即在后台运行,不丢日志。
- 结构化 UI 与级别高亮:TRACE / DEBUG / INFO / WARN / ERROR / FATAL / OUTPUT 各级别用图标与圆点配色区分;可选让正文文字也按级别上色。
- 多维过滤:关键字、日志级别、正则表达式(多条件可用
| 组合)自由叠加。
- 搜索与定位:全文搜索,上一条 / 下一条快速跳转,命中处高亮。
- 虚拟滚动:仅渲染可视区域,数万条日志也流畅;支持自动换行。
- Flutter / Android 友好:一键隐藏
I/flutter ( 5959):、 flutter: 等前缀;可组合显示「全部 / 时间 / 包名」。
- OUTPUT 颜色自定义:大多数日志是 OUTPUT 级别,可在工具栏用调色板选取,或在设置
debugLogViewer.outputColor 中填写任意 CSS 颜色(#b9b9b9、rgb(...)、lightgreen 等)。
- [GETX] 自动归类:以
[GETX] 开头的日志统一归类为 WARN,便于关注路由/状态变化。
- 文件监听:粘贴日志文件绝对路径,实时 tail 追加内容。
- 复制隔离:单行文本选择不会误选其它行。
使用方式
- 用 VSCode 打开本扩展后,启动任意调试会话(如 Flutter / Dart / Node),Debug Log Viewer 面板会在调试开始时自动打开。
- 若需手动打开:命令面板执行
Debug Log Viewer: 打开日志面板。
- 监听日志文件:在工具栏「日志文件绝对路径」输入框填入路径,点击「监听文件」。
命令
| 命令 |
说明 |
Debug Log Viewer: 打开日志面板 |
打开 / 聚焦日志面板 |
Debug Log Viewer: 清空当前会话日志 |
清空当前已捕获的日志 |
设置项
| 设置 |
默认值 |
说明 |
debugLogViewer.outputColor |
#b9b9b9 |
OUTPUT 级别日志的显示颜色,支持任意 CSS 颜色值。也可在面板工具栏用「输出色」调色板直接选取。 |
工具栏说明
- 搜索 / ↑ / ↓:在当前日志中检索并逐条跳转。
- 级别徽章:点击切换显示 / 隐藏对应级别。
- 关键字 / 正则:维度过滤;勾选「正则」后按正则匹配(多条件用
| 分隔)。
- 全部 / 时间 / 包名 / 去前缀 / 自动换行 / 自动滚动:行内列显隐与展示模式,可组合。
- 输出色:原生调色板,选取 OUTPUT 级别颜色。
- 监听文件 / 清空:tail 日志文件 / 清空面板。
已知限制
- 启动前的历史调试输出不会回灌(捕获从扩展激活后开始)。
- 面板为内存视图,刷新 / 重载窗口会清空当前会话日志。
发布说明
0.1.0
- 首次发布:实时捕获、结构化 UI、级别高亮、多维过滤、搜索定位、虚拟滚动、Flutter/Android 前缀清理、OUTPUT 颜色自定义、[GETX] 自动归类、文件 tail。
许可证
MIT
| |