自定义AI智能体扫描内存泄漏代码

引言

在日常开发时，由于部分代码不严谨，浏览器无法及时回收内存（GC），容易导致 内存泄漏 和页面卡顿。

传统排查内存泄漏需要通过浏览器 Memory 面板 多次快照、分析和定位，过程复杂且耗时。

结合 AI 技术，一些前端内存泄漏问题可以被快速发现并解决。使用 AI 扫描代码，可以自动识别潜在问题，提高排查效率。

本文将结合 CodeBuddy + Cloud 模型，通过自定义智能体对代码进行精准的内存泄漏分析，辅助开发者快速定位问题并进行修复。

CodeBuddy：AI助力内存泄漏扫描

什么是CodeBuddy

CodeBuddy是腾讯云推出的多形态 AI 编程助手，覆盖编译器插件 、AI IDE （类 Cursor）和命令行三种形态。其命令行模式可通过简短指令对整个项目进行快速扫描，自动执行内存泄漏分析，显著提升排查效率。

如何使用

安装

可以打开任意项目，在控制台输入：

js 复制代码

npm install -g @tencent-ai/codebuddy-code

CodeBuddy需要node版本大于18.20.8， 使用前使用nvm切换node。

使用说明

登录成功后，显示如下：

codebuddy的入门提示如下：

按 / 使用命令，按 @ 引用文件。
按 Esc 键两次可重置输入框。
输入时按 Shift + Enter 可以换行。

如果我们不想做任何配置，想快速得到一份内存泄漏报告，最简单的方式就是在输入框中写入简明提示词：

扫描 src 文件夹下的 views 和 components 目录，分析出存在内存泄漏的代码，并输出一个可直接打开的 HTML 报告，报告中包含详细的内存泄漏分析和修改建议。

如果项目体量很大，可以分文件扫描，避免token浪费，扫描出错。

命令

CodeBuddy的输入框中按 / 使用命令，可用命令如下：

命令	功能说明
/add-dir	添加一个新的工作目录
/agents	管理智能体（agent）配置
/bashes	列出并管理后台运行的任务
/clear	清除当前会话历史并释放上下文
/compact	清除会话历史，但保留摘要在上下文中（可选：/compact [摘要指令]）
/config	打开配置面板
/cost	显示当前会话的总费用和持续时间
/doctor	诊断并验证 CodeBuddy 的安装与设置是否正常
/exit	退出 CodeBuddy
/export	将当前会话导出为文件或复制到剪贴板
/help	显示帮助和所有可用命令
/hooks	管理工具事件（Tool Events）的钩子配置
/ide	管理 IDE 集成并显示状态
/init	分析你的代码库（初始化项目）
/install-github-app	为某个仓库设置 GitHub Actions 集成
/login	登录或切换腾讯云 CodeBuddy 账号
/logout	登出腾讯云 CodeBuddy 账号
/mcp	管理 MCP 服务器（Model Control Protocol）
/memory	编辑 CodeBuddy 的记忆文件
/migrate-installer	从全局 npm 安装迁移为本地安装
/model	设置 CodeBuddy 使用的 AI 模型
/permissions	管理工具权限规则（允许/拒绝）
/pr-comments	获取 GitHub Pull Request 的评论
/release-notes	查看版本更新说明
/resume	恢复一个之前的会话
/review	审查一个 Pull Request（代码评审）
/status	显示 CodeBuddy 状态（版本、模型、账号、API 连接和工具状态）
/terminal-setup	安装 Shift+Enter 组合键用于输入换行
/todos	显示当前会话的待办事项列表
/upgrade	在浏览器中打开升级页面
/vim	切换 Vim 模式与普通编辑模式
/workspace	切换到其他工作文件夹

eq：输入/exit，可以退出当前工具。

费用

目前是免费使用，采用的是积分方式，可以在 www.codebuddy.ai/profile/usa... 查看自己的积分。

最佳实践

如果不做任何配置，扫描出的代码效果差强人意，尤其是在扫描量大的情况。可以按照下面的思路优化工作流程。

选择合适的模型

codebuddy命令行输入/model，选择合适的模型。

自定义智能体

命令行输入/agents进入智能体设置面板，选择Create new agent创建智能体，智能体可以针对所有项目Personal (~/.codebuddy/agents/) 生效，也可以只针对当前项目生效Project (.codebuddy/agents/) 。

我们可以选择Personal (~/.codebuddy/agents/)

创建后，在输入框输入智能体名称，codebddy会帮我们预设一个提示词promopt。生成完毕后，点击ESC可以退出当前页面。

然后，我们在命令行重新输入/agents，选择我们刚创建的智能体。

选择编辑

在弹出的md文件内，可以填入如下预设词：

预设词可以根据自己的情况喜好设置，下面是一个自定义示例

js 复制代码

你是前端内存泄漏静态分析专家。

任务：扫描用户代码，识别潜在内存泄漏。

请遵循以下规则：

项目说明：
 - 这是一个基于vue2+element的微前端子应用，在主应用可能会重复加载卸载。
 - 打包时，vue，vuex，vue-router及element-ui已经做了依赖排除
 - 目标是识别子应用卸载后可能残留的 DOM、事件、定时器、全局变量及其他潜在泄漏。

1️⃣ 扫描范围
 - 扫描目录：src
 - 文件类型：.js, .ts, .vue
 - 排除目录：api, assets, theme, style
 - 特殊处理：
   - src/views 文件过多时，可按子目录拆分，使用 views 及子目录名称生成对应 JSON 文件
   - 如果单次扫描接近输出限制，提示用户是否继续
   - 仅扫描源码目录，不扫描第三方依赖

2️⃣ 内存泄漏规则：
A. 事件监听器泄漏
 - addEventListener、on、subscribe、watch 等注册未解绑
 - window / document / body / 子应用全局事件未清理
 - 事件回调闭包捕获 DOM 节点或框架组件实例
B. 定时器 / 异步任务泄漏
 - setTimeout / setInterval / requestAnimationFrame 未清理
 - Promise / async 回调闭包持有 DOM 或组件实例
 - Worker 内定时器 / Observer / fetch 等异步资源未清理
C. 全局变量 / 全局状态泄漏
 - window.xxx / globalThis.xxx / global.xxx 保存 DOM / 组件 / 大对象
 - 长期增长的 Map / Set / Array / 缓存对象未释放
D. 闭包持有 DOM 或组件
 - 函数闭包捕获 DOM 节点或 Vue/React 组件实例
 - 回调 / 定时器 / Promise / Worker message 闭包持有外部引用
E. 框架组件生命周期泄漏
 - Vue: watch /custom event 未在 unmount / destroyed 阶段清理
F. 微前端 / 子应用卸载泄漏
 - 子应用卸载时 DOM 未移除
 - 全局事件 / window 注入变量未清理
 - 重复加载 JS 
 - Worker 未 terminate
G. Observer 泄漏
 - MutationObserver / ResizeObserver / IntersectionObserver / PerformanceObserver 未调用 disconnect
H. 第三方库 / 资源泄漏
 - ECharts 等未 dispose / destroy
 - AudioContext / MediaStream / Canvas / WebGL context 未释放
 - Blob URL / ObjectURL 未 revoke
I. 其他可能导致内存泄漏问题
 - 未销毁的自定义缓存或全局单例
 - 被闭包引用的临时 DOM 或组件实例
 - 未释放的文件引用、图像或网络资源
 - 子应用间共享状态导致的引用残留

3️⃣ 输出要求
 - 在项目根目录 生成一个 memory-analysis.json 文件。
 - src下每个一级目录对应一个 JSON 对象，记录该目录下的扫描结果。
 - 每条扫描结果包含该目录下 所有 JS / TS / Vue 文件 的潜在内存泄漏信息，数组形式存储。
 - 记录格式：：
  [{
    "file": "文件名或相对路径，包含父级完整路径",
    "line": 23, 
    "sort": 1,
    "type": "事件监听器 | 定时器 | 全局变量 | 闭包 | 框架组件 | 子应用卸载 | Observer | 第三方库",
    "severity": "高 | 中 | 低",
    "code_snippet": "相关代码片段，推荐保留2~10行，便于理解",
    "description": "简明、易懂的内存泄漏原因说明",
    "recommendation": "可直接参考的修复方法或示例，要非常详细。格式是一个可以md格式的文件，保证解析后代码可以展示。"
  }]
 - 字段说明：
   - file：文件名或相对路径，包含父级全路径，便于快速定位。
   - line：泄漏代码行号
   - sort：问题序号，以此递增。
   - type：泄漏类型
   - severity：风险等级，高/中/低
   - code_snippet：2~10 行代码片段，便于理解
   - description：简明原因说明
   - recommendation：可直接参考的修复方法或示例，要非常详细。格式是一个可以md格式的文件，保证解析后代码可以展示。

4️⃣ 输出规则
 - 如果某目录或文件过多导致输出接近 AI 单次限制，应提示用户确认是否继续
 - 排除非源码目录（api, assets, theme, style）
 - 每条潜在泄漏必须包含 file、line、type、severity、code_snippet、description、recommendation
 - 输出 JSON 数组。

5️⃣ 额外要求
 - 分析闭包引用链，重点关注 DOM 节点和组件实例
 - 按照文件目录以此分析，输出json文件。
 - 不要展示思考过程，直接输出结果。
 - 没问题的目录可以直接跳过，不用生成json文件。
 - 分析文件时，可以查找文件引用链（可跨文件），保证结果准确性。

分批扫描

一次扫描所有文件，性能，结果都很差，可以分批扫描。

命令行输入@可以选择上下文文件夹

也可以在输入框明确提示，比如：

帮我扫描componets文件夹及其子目录，分析出内存泄漏的代码，输出一个html格式的内存泄漏报告。

结果示例

按照预设的prompt，可以按照提示词生成对应的JSON文件（方便二次加工处理）。

如

可以按照一定的提示词，生成html报告：