Skip to content

INSTALL.md

Latest commit

 

History

History
170 lines (133 loc) · 4.35 KB

INSTALL.md

File metadata and controls

170 lines (133 loc) · 4.35 KB
Raw

API调试器插件 - 安装和使用指南

📦 安装步骤

1. 准备插件文件

确保你已经下载了完整的插件文件夹，包含以下文件：

api-debugger-extension/
├── manifest.json
├── devtools.html
├── devtools.js
├── panel.html
├── popup.html
├── background.js
├── content.js
├── injected.js
├── styles/panel.css
├── scripts/panel.js
├── scripts/popup.js
└── icons/icon.svg

2. 在Chrome中安装插件

  1. 打开Chrome扩展管理页面

    • 在地址栏输入：chrome://extensions/
    • 或者：菜单 → 更多工具 → 扩展程序

  2. 启用开发者模式

    • 在页面右上角找到"开发者模式"开关
    • 点击开启开发者模式

  3. 加载插件

    • 点击"加载已解压的扩展程序"按钮
    • 选择 api-debugger-extension 文件夹
    • 点击"选择文件夹"

  4. 确认安装

    • 插件会出现在扩展程序列表中
    • 确保插件状态为"已启用"

🚀 使用方法

基础使用流程

  1. 打开目标网页

    • 访问任何包含API请求的网页
    • 例如：后台管理系统、SPA应用等

  2. 打开开发者工具

    • 按 F12 键
    • 或右键 → 检查元素

  3. 找到API调试器面板

    • 在DevTools顶部标签栏找到"API调试器"
    • 点击进入插件面板

  4. 开始捕获请求

    • 在网页中进行操作（登录、查询、提交等）
    • 插件会自动捕获API请求
    • 请求会实时显示在左侧列表中

详细功能使用

查看请求详情

  1. 在左侧请求列表中点击任意请求
  2. 右侧会显示详细信息：
    • 基本信息（方法、URL、状态码、耗时）
    • 请求头
    • 请求体
    • 响应头
    • 响应体

重放请求

  1. 选择要重放的请求
  2. 点击"重新发送"按钮
  3. 插件会使用相同参数重新发送请求
  4. 查看新的响应结果

编辑并发送请求

  1. 选择要编辑的请求
  2. 点击"编辑请求"按钮
  3. 在弹出窗口中修改：
    • 请求方法
    • URL地址
    • 请求头（JSON格式）
    • 请求体
  4. 点击"发送请求"执行修改后的请求

搜索和过滤

  • 搜索：在搜索框中输入URL或方法名进行搜索
  • 过滤：使用方法下拉框过滤特定类型的请求（GET、POST等）

数据管理

  • 清空请求：点击"清空请求"按钮删除所有捕获的请求
  • 导出数据：点击"导出"按钮将请求数据保存为JSON文件
  • 导入数据：点击"导入"按钮加载之前导出的数据

🔧 高级功能

右键菜单（开发中）

在Network面板中右键点击请求，选择"捕获此请求到API调试器"

批量操作（计划中）

  • 批量重放多个请求
  • 批量导出选中的请求
  • 请求分组管理

环境变量（计划中）

  • 设置不同环境的API地址
  • 动态替换请求中的变量

🐛 常见问题

Q: 插件无法捕获请求

A: 检查以下几点：

  1. 确保插件已正确安装并启用
  2. 刷新页面后重新操作
  3. 检查请求是否为AJAX/Fetch请求
  4. 某些CORS限制可能影响捕获

Q: DevTools中找不到"API调试器"标签

A:

  1. 确认插件已安装并启用
  2. 关闭并重新打开DevTools
  3. 刷新页面后再次尝试

Q: 重放请求失败

A:

  1. 检查请求URL是否正确
  2. 确认请求头和参数格式
  3. 某些请求可能需要特定的认证信息

Q: 插件影响页面性能

A:

  1. 插件会拦截网络请求，可能轻微影响性能
  2. 可以在不需要时禁用插件
  3. 插件只存储最近1000个请求以控制内存使用

📊 支持的请求类型

✅ 支持

  • XMLHttpRequest (AJAX)
  • Fetch API
  • 所有HTTP方法（GET、POST、PUT、DELETE、PATCH等）
  • JSON、XML、Form Data等数据格式

❌ 暂不支持

  • WebSocket连接
  • Server-Sent Events (SSE)
  • 某些第三方库的特殊请求方式

🔒 隐私和安全

  • 所有数据仅存储在本地浏览器中
  • 不会上传任何请求数据到外部服务器
  • 可以随时清空存储的数据
  • 插件仅在当前标签页中工作

📞 技术支持

如果遇到问题：

  1. 查看浏览器控制台是否有错误信息
  2. 尝试重新安装插件
  3. 提交Issue到项目仓库
  4. 联系开发者获取帮助

提示: 这是一个开发版本，如果发现bug或有功能建议，欢迎反馈！