Pontx Network Inspector

Chrome DevTools 扩展，用于监控和检测 XHR/Fetch 网络请求，支持与 PontxSpec API 规范自动匹配。

功能特性

• 网络请求捕获 — 自动监听 XHR/Fetch 请求，展示 Method、URL、Status、耗时等信息
• PontxSpec 匹配 — 导入 PontxSpec JSON，自动将网络请求与 API 定义匹配
• URL 过滤规则 — 支持白名单/黑名单模式，使用 Glob 模式匹配域名
• 请求详情查看 — 查看请求/响应头、参数、Body，支持 JSON 可视化
• Debug 工具 — 基于匹配的 API 定义，可编辑参数并重新发送请求

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

安装到 Chrome

1. 运行 npm run build 生成 dist/ 目录
2. 打开 Chrome，访问 chrome://extensions/
3. 开启「开发者模式」
4. 点击「加载已解压的扩展程序」，选择 dist/ 目录
5. 打开 DevTools（F12），切换到 Pontx Network 面板

使用说明

导入 Spec

点击工具栏的 Import Spec 按钮，粘贴 PontxSpec JSON 并导入。导入后，匹配的请求会自动显示 API 名称。

过滤规则

点击工具栏的 Filter Rules 按钮，添加白名单或黑名单规则。支持 Glob 模式，例如 *.example.com。

技术栈

• React 19 + TypeScript
• Zustand（状态管理）
• Tailwind CSS 4
• Vite 8
• Chrome DevTools API（Manifest V3）

项目结构

src/
├── background/          # Service Worker
├── devtools/            # DevTools 面板注册
├── panel/               # 主界面 React 应用
│   ├── components/      # UI 组件
│   ├── stores/          # Zustand 状态管理
│   └── hooks/           # 网络捕获逻辑
└── shared/              # 共享类型和匹配引擎

License

MIT