- bbqbbq-v2ex2026-09-07
在开始之前，先贴上公开地址：
- 公开产物 / Release （直接下载安装）：https://github.com/izhuyan/SuperNetDev
- Release 下载页：https://github.com/izhuyan/SuperNetDev/releases
如果这个工具帮你省过联调时间，欢迎 Star ⭐️；想交流用法或提需求
📖 简介
SuperNetDev 是一款面向前端调试的 Chrome DevTools 扩展面板。它把「看请求」和「改接口」放在同一块面板里：既能像 Network 一样浏览 Fetch / XHR ，又能用持久化规则对命中的接口做延迟、改头、改体、整段 Mock 。
前端日常最烦的几件事，它基本都对上了：
- 后端接口还没好，页面卡死跑不起来
- 某个字段偶发报错，想临时改响应验证 UI
- 要给接口加延迟，模拟弱网 / loading / 超时
- Chrome Network 能看，但不能「改完立刻生效」
装上扩展 → F12 → 选 SuperNetDev → 从请求一键建规则。Done.
✨ 核心特性
- 📡 网络列表：Name / Status / Type / Initiator / Size / Time ，支持 All 、Fetch/XHR 、Doc 、CSS 、JS 、Font 、Img 、Media 、WS 、Other
- 🎯 多种匹配：模糊包含、通配符、正则、精确；命中后 Name 列出现铅笔图标，可直接编辑规则
- ⏱️ 请求延迟：按毫秒延迟，方便测 loading 、骨架屏、超时提示
- 🛠 改头改体：增删改请求头 / 响应头，替换请求体
- 🎭 Mock 响应：整段 Mock ，可不发真实请求
- 🔀 双栏 Diff：相对原始响应有改动时，左右对比（原始 / 当前），行级高亮
- 📝 字段备注：Response JSON 键旁可加备注，按接口维度持久化
- 📁 规则场景组：规则分组、颜色、折叠；一键启停 / 切换联调场景
- 🔍 全局搜索：
Ctrl+F搜请求；在 JSON 区悬停时走本地查找- 🔔 版本提醒：远端有新版本时，「关于工具」显示红点，可一键跳转下载
说明：拦截通过注入页面的
fetch/XMLHttpRequest实现，主要覆盖 XHR 与 Fetch。静态资源仍可在列表中查看，但默认不会被改写。技术选型
SuperNetDev 采用 TypeScript 全链路，面板用现代 React 技术栈，扩展侧走 Chrome Manifest V3 。
🎨 面板端（ DevTools Panel ）
Vite + React 19
面板 UI 基于 Vite 构建，开发时可用本地预览快速迭代界面；打包时再输出到扩展目录，保证调试体验和产物一致。
Tailwind CSS 4 + shadcn/ui
界面尽量贴近 DevTools 工作流：列表、详情、规则表单、分组切换，少花哨、好扫一眼。组件层用 shadcn/ui + Radix ，交互稳定、可维护。
CodeMirror 6
JSON / 脚本编辑、查找、双栏 Diff 都建立在 CodeMirror 上，方便在响应体里直接改 Mock 、对比改写前后差异。
⚙️ 扩展端（ Chrome Extension MV3 ）
DevTools 面板 + Background
面板负责展示请求、编辑规则； Background 负责设置持久化、与 content / injected 脚本通信，以及把 Mock 命中的请求回传到面板。
Content Script + Injected Script
在页面上下文里拦截
fetch/XMLHttpRequest：匹配规则后可延迟、改写请求头/体、返回 Mock 响应。关闭 DevTools 后，已启用规则仍可继续生效（由注入脚本在页面侧工作）。CI 自动发版
main分支 push / merge 会触发 GitHub Actions：版本号 +1 → 构建扩展 → 推送到公开产物仓 → 创建 Release ，方便用户直接下 ZIP 安装。功能介绍
网络列表：像 Network ，但更适合联调
打开任意页面，F12 切到 SuperNetDev，顶部切到 网络列表，过滤选 Fetch/XHR，刷新即可看到接口流。
点选一条请求，可以查看 Headers / Payload / Response 。和原生 Network 不同的是：这里可以直接 从此请求创建规则，把当前接口变成可重复使用的拦截配置。
从请求一键建规则
最省事的路径：
- 点列表里的一条接口
- 点「新建规则」或详情里的创建按钮
- 自动带上请求体 / 响应体草稿
- 改延迟、Mock 、改头改体，
Ctrl+S保存- 确认顶部 拦截 开关已打开，刷新验证
匹配默认是模糊的——填
getStudentInfo往往就够命中对应接口。模糊 / 通配符 / 正则 / 精确
方式 |
例子 |
说明 |模糊 |
getStudentInfo|
可命中/cs-api/student/getStudentInfo?studentId=20240001|通配符 |
*/cs-api/course/*|*匹配任意片段 |正则 |
transcript$|
按正则匹配 URL |精确 |
完整 URL 或 pathname |
完全一致才命中 |命中已启用规则的请求，会在 Name 列显示铅笔图标，点击即可编辑该规则。
延迟、改写与 Mock
针对命中规则的接口，你可以：
- Delay：加几百毫秒到几秒，测 loading / 超时文案
- 改请求头 / 响应头：增删改任意 Header
- 替换请求体：联调时临时改入参
- Mock 响应：整段替换响应体，甚至不发真实请求
适合「后端还没好」「只想验证前端分支」「临时绕过某个错误字段」这些场景。
双栏 Diff
当响应被改写或 Mock 后，面板可以对「原始响应」和「当前响应」做左右对比，行级高亮差异。改完字段马上能看出动了哪里，不用来回复制到外部 Diff 工具。
字段备注
在 Response JSON 上，可以给字段加「备」注，并且按接口维度记住。下次再打开同一接口，字段含义还在，适合记一些业务字段的临时说明。
规则场景组
规则可以按场景分组（例如：登录联调、成绩页 Mock 、弱网模拟），支持颜色与折叠，一键启停整组。切需求时不用一条条开关规则。
版本提醒
打开面板会对比公开 Release 的最新版本。若远端更新，「关于工具」会出现小红点，点进去可跳转下载最新 ZIP ，解压覆盖后在扩展页重新加载即可。
🚀 快速开始
方式一：下载 Release （推荐，不用编译）
- 打开 Releases，下载最新
SuperNetDev-Extension.zip- 解压到任意目录
- 打开 Chrome →
chrome://extensions- 开启 开发者模式
- 加载已解压的扩展程序 → 选择解压后的文件夹
- 打开任意网页 → F12 → 顶部面板选 SuperNetDev
⚠️ 使用注意
- 关闭 DevTools 后，已启用的拦截规则仍然生效（注入脚本在页面侧继续工作）
- 不需要拦截时，请关闭顶部「拦截」开关，或停用相关规则
- 拦截主要覆盖 Fetch / XHR ；图片、脚本等静态资源默认只看不改
技术栈一览
- Vite 8 + React 19 + TypeScript
- Tailwind CSS 4 + shadcn/ui + Radix
- CodeMirror 6（ JSON / 脚本编辑、查找、Diff ）
- Chrome Extension Manifest V3（ DevTools 面板 + content script 注入）
未来计划
- 更细的规则优先级与冲突提示
- 规则导入 / 导出，方便团队共享联调场景
- 更丰富的 Mock 模板与示例库
- 面板体验持续打磨（搜索、Diff 、备注）
欢迎在 GitHub Issues / Discussions 提想法。
📬 联系方式
- 公开下载：izhuyan/SuperNetDev
- 问题反馈：GitHub Issues
如果 SuperNetDev 帮你省了联调时间，欢迎在面板里点 赞助作者，请作者喝杯咖啡 ☕
<sub>Made for frontend debugging · SuperNetDev</sub>
主楼 - 暂无回复