资源覆盖率分析工具 (Coverage Analyzer)

这是一个基于 Puppeteer 的命令行工具，被设计为在Cursor等对话式AI环境中交互使用，用于分析指定网页上CSS和JS资源的实际使用率。

特点

- 对话式交互: 通过一问一答的方式，引导用户输入分析所需的URL、Cookie等信息。
- 深度交互分析: 在静态分析完成后，可选择性地通过模拟用户交互，来获取更深层次、更准确的覆盖率数据。
- 会话模拟: 通过传入会话Cookie，可以分析需要登录才能访问的页面。
- 机器友好报告: 输出JSON格式的报告，便于其他工具进行解析和二次处理。

在对话式AI环境中使用 (例如Cursor)

$3

直接通过 @ 符号调用此工具，无需附带任何参数。

示例:
``
@Coverage Analyzer
`

$3

1. 启动工具: 当您执行上述命令后，工具会启动并开始与您对话。
2. 提供信息: 工具会依次询问您以下信息，请按提示输入：
- 要分析的页面URL
- 会话Cookie (如果不需要，可直接回车跳过)
- 要分析的文件名列表 (用逗号分隔)
3. 查看静态报告: 提供完信息后，工具会立即开始分析，并首先返回页面初始加载时的覆盖率报告。
4. 进行交互分析: 随后，工具会询问您是否希望进行交互式分析。根据您的选择，它会引导您完成后续步骤。
5. 查看最终报告: 所有交互完成后，您会收到一份包含累积覆盖率的最终报告。

直接通过命令行使用 (高级)

你也可以直接在终端中运行此工具。

$3

`bash
npm install
`

$3

`bash
node index.js
`
工具启动后，会以交互式问答的方式要求你输入所需参数。

在 Cursor 中作为 MCP 工具使用

您可以将此工具配置为 Cursor 的自定义命令 (MCP Tool)。

$3

1. 打开 Cursor 的设置 (Cmd + , 或 Ctrl + ,)。
2. 在左侧菜单中找到 "MCP Tools" -> "Custom"。
3. 点击 "Add Custom Tool" 添加一个新的自定义工具。
4. 填写以下信息：
- Tool Name: Coverage Analyzer (或您喜欢的任何名称)
- Description: 通过对话收集参数，分析页面初始加载及交互后的JS/CSS代码覆盖率。
- Command: node {{workspace_folder}}/coverage-analyze/index.js

配置完成后，即可通过 @Coverage Analyzer 开始使用。

功能

- 通过会话Cookie模拟登录，访问需要授权的页面。
- 支持分析一个或多个目标URL。
- 同时分析CSS和JavaScript文件的代码覆盖率。
- 生成清晰的覆盖率报告，帮助识别未使用的代码（技术债务）。

安装

1. 确保你的电脑上已经安装了 Node.js (v16或更高版本) 和一个可用的Chrome浏览器。
2. 进入本目录，安装项目依赖：
`bash
# 如果你的网络环境无法直接下载Puppeteer内置的Chromium，请使用这条命令
PUPPETEER_SKIP_DOWNLOAD=true npm install

# 如果网络良好，可以直接使用
npm install
`

配置

在运行工具之前，请修改 config.js 文件：

1. cookie:
- 在浏览器中手动登录你的目标网站。
- 打开开发者工具(DevTools) -> Application -> Cookies。
- 找到并复制关键的会话Cookie字符串，粘贴到这里。

2. urls:
- 一个包含一个或多个你想要分析的完整页面URL的数组。

3. filesToAnalyze:
- 一个包含你想要追踪的CSS和JS文件名（或部分名称）的数组。

4. chromeExecutablePath:
- 你的Chrome浏览器可执行文件的绝对路径。文件内已提供macOS和Windows的常见路径作为参考。

运行

完成配置后，在终端中运行以下命令即可开始分析：

`bash
npm start
`

工具会为 config.js 中配置的每一个URL生成一份详细的覆盖率报告。

在 Cursor 中作为 MCP 工具使用

您可以将此工具配置为 Cursor 的自定义命令 (MCP Tool)，以便在 IDE 中通过 @ 符号快速调用。

$3

1. 打开 Cursor 的设置 (Cmd + , 或 Ctrl + ,)。
2. 在左侧菜单中找到 "MCP Tools" -> "Custom"。
3. 点击 "Add Custom Tool" 添加一个新的自定义工具。
4. 填写以下信息：
- Tool Name: Coverage Analyzer (或您喜欢的任何名称)
- Description: 分析页面初始加载及交互后的JS/CSS代码覆盖率。
- Command: node {{workspace_folder}}/coverage-analyze/index.js --url="{{url}}" --cookie="{{cookie}}" --files="{{files}}"

$3

配置完成后，您可以在 Cursor 的聊天或代码编辑窗口中通过 @Coverage Analyzer (或您设置的名称) 来调用此工具。

工具需要以下三个参数：

- --url: (必需) 您要分析的页面的完整 URL。
- --cookie: (必需) 用于身份验证的会话 Cookie 字符串。
- --files: (必需) 您关心的、需要分析覆盖率的文件名列表，用逗号分隔 (例如 app.js,main.css)。

$3

`
@Coverage Analyzer --url="https://example.com/dashboard" --cookie="session_id=abc123xyz" --files="dashboard.js,dashboard.css"
``

工具会首先进行静态分析，然后会以交互方式询问您是否要通过模拟用户交互来进一步提升覆盖率分析的准确性。