ConsolePatrol 技能

名称

console-patrol

描述

面向 Web 应用的 AI 优先控制台错误与警告检测工具。自动扫描网页以识别控制台中的错误和警告，并针对 Ant Design、React 和 Element UI 等框架提供专用检测规则。

适用场景

当用户提出以下请求时，使用该技能：

• “检查控制台错误”
• “扫描页面中的警告”
• “审计 Web 应用”
• “查找应用中的问题”
• “调试控制台输出”
• 修复 React / antd / Element UI 相关警告

前提条件

该技能依赖 console-patrol 包：

pip install console-patrol
playwright install chromium

核心工作流

1. 快速扫描（推荐）

from console_patrol import ConsolePatrol

patrol = ConsolePatrol()
result = patrol.scan(
    url="http://localhost:3000",
    routes=[
        "http://localhost:3000/",
        "http://localhost:3000/dashboard",
        "http://localhost:3000/settings",
    ],
    wait_time=2.0,
)

print(f"发现问题数量：{result.report.total_issues}")
for issue in result.issues:
    print(f"[{issue.severity.value}] {issue.rule_id}")
    print(f"  修复建议：{issue.suggestion}")

2. 自动发现路由

from console_patrol import ConsolePatrol

patrol = ConsolePatrol()
result = patrol.scan(
    url="http://localhost:3000",
    router_type="react",
    base_path="/admin",
    auto_discover=True,  # 自动发现常见路由
)

3. 启用框架自动识别

result = patrol.scan(
    url="http://localhost:3000",
    routes=["http://localhost:3000/"],
    detect_framework=True,  # 自动识别 UI 框架
)
print(f"识别到的框架：{result.framework_info.ui_framework}")

4. CLI 使用方式

# 启用自动发现进行扫描
console-patrol scan http://localhost:3000 --router-type react --auto-discover

# 扫描指定路由
console-patrol scan http://localhost:3000 --routes "/,/dashboard,/about"

# 出错时自动截图
console-patrol scan http://localhost:3000 --screenshot

# 输出格式选项
console-patrol scan http://localhost:3000 --format markdown

检测规则

严重性等级

内置规则

Ant Design

• antd-useForm-unhooked（P1）：form.getFieldValue() 在 Form 组件外部被调用
• antd-modal-context（P1）：在 React 18 中使用静态 Modal
• antd-tree-missing-keys（P1）：Tree 组件中使用通配符 key
• antd-table-duplicate-key（P0）：Table 组件中存在重复 key

React

• react-uncaught-error（P0）：未捕获的 JS 异常
• react-chunk-load-error（P0）：模块加载失败
• react-hooks-rules（P1）：违反 React Hooks 规则
• react-list-missing-key（P2）：列表项缺少 key 属性

响应格式

当检测到问题时，请按如下格式响应：

## ConsolePatrol 扫描结果

**已扫描页面数：** N  
**总问题数：** N  

| 严重性 | 数量 |
|--------|------|
| P0（致命） | N |
| P1（警告） | N |
| P2（提示） | N |

### 问题详情

**[P0] react-uncaught-error**  
- 消息：错误描述  
- 位置：页面 URL  
- 修复建议：建议内容  

**[P1] antd-useForm-unhooked**  
- 消息：错误描述  
- 位置：页面 URL  
- 修复建议：在渲染逻辑中改用 state，避免直接调用 form.getFieldValue()

重要说明

1. 等待时间：默认为页面加载完成后等待 2 秒。对于采用懒加载的单页应用（SPA），请适当增加该值。
2. 截图功能：使用 --screenshot 参数可在出错时自动截取当前页面快照。
3. 框架限定：可通过 --frameworks antd,react 显式指定启用的规则集，限制检测范围。
4. 退出码：可用于 CI/CD 流程判断，例如：if [ $? -gt 0 ]; then echo "发现问题"; fi

Agent 环境安装

若尚未安装 console-patrol，请执行以下代码完成安装：

import subprocess
subprocess.run(["pip", "install", "console-patrol"], check=True)
subprocess.run(["playwright", "install", "chromium"], check=True)

边界情况处理

• 页面无法加载：默认超时时间为 30 秒。请确认本地开发服务正在运行。
• 未发现任何问题：报告扫描成功，无需进一步操作。
• P0 级别问题：始终标记为关键问题，并建议立即修复。
• 未能识别框架：回退至默认规则集（antd、react、element）。