前端联调不用再求后端：我做了个 Chrome DevTools 网络拦截工具 SuperNetDev

[bbqbbq]

在开始之前，先贴上公开地址：

• 公开产物 / 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 不同的是：这里可以直接 从此请求创建规则，把当前接口变成可重复使用的拦截配置。

从请求一键建规则

最省事的路径：

1. 点列表里的一条接口
2. 点「新建规则」或详情里的创建按钮
3. 自动带上请求体 / 响应体草稿
4. 改延迟、Mock 、改头改体，Ctrl+S 保存
5. 确认顶部 拦截 开关已打开，刷新验证

匹配默认是模糊的——填 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 （推荐，不用编译）

1. 打开 Releases，下载最新 SuperNetDev-Extension.zip
2. 解压到任意目录
3. 打开 Chrome → chrome://extensions
4. 开启 开发者模式
5. 加载已解压的扩展程序 → 选择解压后的文件夹
6. 打开任意网页 → 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 帮你省了联调时间，欢迎在面板里点 赞助作者，请作者喝杯咖啡 ☕

---

_{Made for frontend debugging · SuperNetDev}