Kwai-Log - Visual Studio Code 扩展

专为快手（Kwai）项目打造的智能日志管理工具，提供标准化的日志操作流程和可视化统计能力。

✨ 最新更新 (v0.0.8)

🎉 智能工作区管理：全面升级工作区切换体验

• 🔄 自动检测工作区变化，实时更新数据统计
• 📡 优化通知机制，告别手动刷新的烦恼
• 🌐 智能端口适配，无惧端口冲突问题
• ⚡ 性能优化，响应更快更稳定

功能特性

📝 快速插入标准化日志

• klog：插入本地调试日志（默认分组：LogGroup: default）
• klogn：
  • 移动端模式：插入客户端日志（默认分组：NativeGroup: default，优先级：P3）
  • PC 端模式：插入 Log.i 日志，自动处理导入和 logTag 定义
• klogr：插入雷达日志（默认分组：RadarGroup: default，优先级：P3）
• 自动生成标准格式：[函数名][优先级][调用时间][调用文件地址][日志类型标识][符号] <message>

🛠️ 智能日志管理

• 右键菜单支持：
  • 🗑️ 一键注释/取消注释日志
  • ⚡ 快速删除指定日志语句
  • 🔍 定位日志上下文
• 智能检测：自动识别日志类型并应用对应规则

🎨 完美主题兼容

• 多主题支持：完美适配 VSCode 的浅色、深色和高对比度主题
• 动态颜色适应：所有文字、边框、背景色都会根据当前主题自动调整
• 一致性保证：确保在任何主题下都有良好的可读性和视觉效果

📊 可视化侧边面板

• 实时统计：展示当前统计路径下的日志分布
  • 按类型（调试/客户端/雷达）分类统计
  • 按优先级分组显示
• 智能工作区管理：
  • 🔄 支持多工作区环境，切换工作区时自动更新数据
  • 📡 实时响应工作区变化，无需手动刷新
  • 🌐 内置 Web 服务器自动适配可用端口（8080、8081、8082...）
• 快捷操作：
  • 🎯 点击日志条目快速跳转到代码位置
  • ⚙️ 动态修改配置参数：
    • 设备模式设置（移动端/PC 端）
    • 客户端日志函数名（默认：logRecovery）
    • 雷达日志函数名（默认：weblogger.radarEvent）
    • 统计路径配置
    • 优先级映射关系

🚀 快速开始

安装

1. 打开 VS Code 扩展商店
2. 搜索 "kwai-log"
3. 点击安装按钮

基本使用

1. 插入日志：

   - 在编辑器中输入命令前缀后按 `Tab` 键：
       - `klog` → 调试日志
       - `klogn` → 根据设备模式插入客户端日志或Log.i日志
       - `klogr` → 雷达日志
   - 示例输出：`// LogGroup: insert-plugin
   

   console.log( '【17:2:40】【insert-plugin/index.ts】😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀', );`

2. 管理日志：

   • 右键点击日志语句 → 选择操作：
     • "注释 console.log"（注释/取消注释）
     • "删除 console.log"（删除日志）

3. 设备模式设置:

   • 在侧边栏的设置面板中可选择"移动端模式"或"PC 端模式"
   • 移动端模式下：
     • 客户端日志方法名默认为"logRecovery"
     • klogn 命令插入标准的客户端日志
   • PC 端模式下：
     • 客户端日志方法名自动设置为"Log.i"
     • klogn 命令智能插入 Log.i 日志，自动添加导入、logTag 定义和日志语句

4. 侧边栏操作：

   • 点击状态栏图标打开日志面板
   • 修改配置 → 自动刷新统计结果
   • 点击统计条目跳转到对应代码位置

📸 界面预览

侧边栏统计面板

实时日志统计与快速跳转功能

快速插入演示

通过命令快速插入标准化日志

❓ 常见问题

Q：为什么命令不生效？
A：请确保：

1. 文件类型在支持列表中（.js/.ts/.vue/.jsx/.tsx）
2. 未处于只读模式

Q：如何修改统计路径？
A：侧边栏顶部输入框 → 输入新路径 → 按 Enter 确认

Q：在白色主题下看不清文字怎么办？
A：从 v0.0.7 版本开始，插件已完美支持所有 VSCode 主题。如果仍有显示问题：

1. 重启 VSCode 确保样式生效
2. 检查是否为最新版本
3. 如问题持续，请提交 Issue 并附上主题名称

Q：不同设备模式下命令的行为有什么区别？
A：

• klog 命令在任何模式下都插入 console.log 调试日志
• klogr 命令在任何模式下都插入雷达日志
• klogn 命令在移动端模式下插入 logRecovery 客户端日志，在 PC 端模式下插入 Log.i 日志

Q：PC 端模式下的 klogn 具体会做什么？
A：会自动：

1. 检查并添加import { Log } from '@common/utils/log'（Vue 文件在<script>标签后插入）
2. 检查并添加const logTag = Log.makeTag('文件名')在 import 语句后（对于*module.ts 文件，不会添加此行）
3. 在光标位置插入Log.i(logTag, )日志，并将光标定位在逗号后（对于*module.ts 文件，使用this.logTag而非logTag）

Q：切换工作区后数据没有更新怎么办？
A：从 v0.0.8 版本开始，插件已支持智能工作区管理：

1. 工作区切换会自动触发数据更新，无需手动操作
2. 如果遇到更新延迟，请等待几秒钟让系统完成同步
3. 确保使用最新版本以获得最佳体验

Q：Web 服务器端口被占用怎么办？
A：插件会自动处理端口冲突：

1. 默认尝试使用 8080 端口
2. 如果被占用，会自动尝试 8081、8082 等端口
3. Web 页面会自动适配实际使用的端口，无需手动配置

🤝 参与贡献

欢迎提交 Issue 和 PR：
GitHub Repository

许可证

MIT License © 2023 zhuhong07