API-DOT是一款纯HTML/JavaScript实现的API检测工具，专为开发人员设计，无需安装和外部依赖。只需将单个HTML文件放入项目目录并在浏览器中打开，即可自动扫描、分析项目中的API调用，并生成详细的可视化报告。该工具帮助团队快速识别潜在问题，提高API集成质量。
- 零安装零配置：单个HTML文件，无需NPM、无需构建、无需配置
- 文件系统访问：使用现代浏览器File System Access API直接读取项目文件
- 全面API检测：支持多种前后端API调用模式自动识别
- 智能问题诊断：检测API调用中的常见问题和安全漏洞
- 交互式可视化报告：直观展示API健康状态和问题分布
- 本地运行保隐私：所有分析在浏览器内完成，代码不离开您的电脑
- 跨项目兼容：支持JavaScript、TypeScript、React、Vue等多种框架项目
- 自动识别多种HTTP客户端库调用
- 检测RESTful和GraphQL API端点
- 提取URL、请求方法、参数结构
- 识别API版本和环境配置
- 标记API调用位置和上下文
- URL格式和有效性验证
- HTTP vs HTTPS安全检查
- 错误处理完整性分析
- 硬编码API密钥和凭证检测
- 参数验证和卫生检查
- 认证配置检测
- API版本不一致识别
- 重复请求模式检测
- 总体API健康评分
- 分类问题统计和严重性分级
- 交互式API端点列表
- 代码上下文查看
- 问题修复建议
- 自定义筛选和搜索
- 从GitHub下载
api-dot.html文件 - 将文件复制到您的项目根目录
- 使用支持的浏览器(推荐Chrome/Edge)打开该文件
- 点击界面上的"启动扫描"按钮
- 在弹出的文件选择器中，选择并授权访问您的项目文件夹
- 等待扫描和分析完成(大型项目可能需要几分钟)
- 查看生成的API健康报告
虽然API-DOT默认无需配置即可使用，但您可以通过界面调整以下选项：
- 扫描深度：限制目录递归扫描的深度
- 文件筛选：自定义要扫描的文件类型和扩展名
- 排除路径：添加不需要扫描的目录路径
- 检测灵敏度：调整问题诊断的严格程度
API-DOT基于多种现代Web技术实现：
- File System Access API：安全访问本地文件系统
- JavaScript模块系统：组织代码结构
- 正则表达式引擎：识别API调用模式
- 简化静态分析：执行基础代码分析
- Canvas/SVG绘图：生成可视化图表
- 响应式CSS：实现跨设备UI适配
- 文件系统访问：获取用户授权并读取项目文件
- 文件过滤：根据文件类型和路径规则筛选相关文件
- 代码解析：读取文件内容并识别潜在API相关代码
- API检测：应用多种模式检测识别API调用和定义
- 健康分析：对每个API调用执行问题检测和诊断
- 报告生成：整合分析结果并构建交互式可视化报告
// Fetch API
fetch('https://api.example.com/data')
.then(response => response.json())
// Axios
axios.get('https://api.example.com/users')
axios.post('https://api.example.com/create', data)
// jQuery
$.ajax({
url: 'https://api.example.com/products',
method: 'GET'
})
// XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/status');// Node.js原生http
http.get('http://api.example.com/data', (res) => {})
// Request库
request('https://api.example.com/v1/items', (err, res, body) => {})
// Express路由定义
app.get('/api/users', (req, res) => {})
app.post('/api/users', (req, res) => {})| 问题类别 | 严重性 | 检测示例 |
|---|---|---|
| 无效URL格式 | 错误 | fetch('http:invalid-url') |
| HTTP明文传输 | 警告 | fetch('http://api.example.com') |
| 缺少错误处理 | 警告 | fetch(url).then(r=>r.json()) |
| 硬编码API密钥 | 错误 | headers: {'api-key': '1234567890'} |
| URL参数注入风险 | 警告 | fetch('api.com/'+userInput) |
| 重复API调用 | 提示 | 多处使用相同URL但不同参数 |
| 浏览器 | 最低版本 | 状态 | 备注 |
|---|---|---|---|
| Chrome | 86+ | ✅ 完全支持 | 推荐使用最新版本 |
| Edge | 86+ | ✅ 完全支持 | 基于Chromium版本 |
| Firefox | 90+ | 需在about:config启用相关flag | |
| Safari | 15+ | ❌ 有限支持 | 文件系统API支持不完整 |
| Opera | 72+ | ✅ 支持 | 基于Chromium |
- 工具依赖现代浏览器API，旧版浏览器无法运行
- 静态分析无法检测所有运行时或动态生成的API调用
- 极大型项目(超过10,000个文件)可能导致浏览器性能问题
- 复杂的代码模式和高度抽象的API调用可能检测不完整
- 当前版本不支持远程API健康检查(仅静态分析)
- 文件系统访问需要用户显式授权
API健康总览:
------------------------
总API端点: 35
健康API: 24 (68.6%)
警告API: 8 (22.9%)
错误API: 3 (8.5%)
常见问题统计:
------------------------
缺少错误处理: 5
使用HTTP非HTTPS: 3
无效URL格式: 2
硬编码API密钥: 1
参数验证不足: 2
API端点分布:
------------------------
内部API: 18
第三方API: 12
未知/其他: 5
Q: 为什么选择单HTML文件格式而不是NPM包?
A: 我希望提供真正零依赖、即插即用的工具，无需任何安装步骤，降低使用门槛。
Q: API-DOT会将我的代码或API信息发送到任何服务器吗?
A: 绝对不会。所有分析都在您的浏览器中本地进行，不会向任何外部服务器发送数据。
Q: 如何处理大型项目的性能问题?
A: 使用扫描配置中的目录排除和深度限制选项，可以显著提高大型项目的扫描性能。
Q: 工具识别不了我的自定义API调用模式，怎么办?
A: 当前版本专注于常见模式。计划在未来版本中添加自定义模式支持。
开始使用API-DOT，只需下载单个文件夹，无需安装，即可获取项目API调用的全面分析！如有问题或反馈，请访问我们的GitHub页面。