## 概述

网上关于浏览器扩展的推荐文章很多，但大多面向泛用户：去广告、翻译、倍速。对开发者来说，真正高频的使用场景其实是另外几条——**接口还没好怎么调前端、线上问题怎么在本地复现、别人的站点用了什么技术栈、技术大会的回放怎么看。**

这篇按**开发工作流**组织，而不是按用途罗列。清单来源是我自己机器上长期保留的那一批，筛选原则只有三条：

1. **权限与功能匹配**：要的权限必须是这个功能绕不开的
2. **优先开源或官方出品**：能审计，且不用担心哪天被转手
3. **还在维护**：半年内没有更新的工具，兼容性风险会明显上升

另外有一整节专门讲**哪些事情根本不用装扩展**——DevTools 原生能力被低估得太厉害了。

---

##  接口联调：三个就够

###  Requestly —— 后端没好也能往下写

这是我认为开发者最该装的一个，开源（AGPLv3），商店页面标注有 30 万以上开发者在用。

它解决的是联调期最难受的几件事：

- **Mock API 响应**：后端接口没就绪，或者要复现某个 500 错误，直接把响应体改掉返回给前端
- **改请求/响应头**：调试 CORS、去掉 `Content-Security-Policy` 以便注入脚本、加自定义鉴权头
- **URL 重定向**：把生产环境的某个 JS 请求指向本地 localhost，用线上数据跑本地代码
- **注入脚本**：在生产页面跑一段自己的 JS
- **模拟延迟与错误**：给指定接口加延迟，验证前端的 loading 和超时处理
- **支持从 Charles、ModHeader、Postman 导入配置**，迁移成本低

![Requestly.png](https://developer.qcloudimg.com/http-save/yehe-4105534/e4f1fae3d280036eaddf9d6e556211b9.png)

第三点值得单独说：**线上出 bug 时，把出问题的 JS 映射到本地改过之后的版本，刷新即可验证，不用发包。** 这个用法比它名字听起来强大得多。

> 官网与源码：[requestly.com](https://requestly.com/)、[GitHub](https://github.com/requestly/requestly)

### 2. JSON Formatter —— 看完响应不用再复制进编辑器

Chrome 原生对 JSON 的展示是一坨纯文本。装了这类扩展之后，API 返回的 JSON 会自动格式化、语法高亮、可折叠，还能搜索和校验。

诚实的两个限制：

- **超大响应会卡**。几十 MB 级别的 JSON 展开时明显掉帧，这种量级不如直接落盘用本地工具看
- **不能直接编辑**。只能查看和复制，改数据还得回编辑器

如果你的接口返回经常超过 10 MB，那就别指望浏览器里的格式化工具了。

### 3. Cookie-Editor —— 多环境登录态来回切

联调经常要在测试环境、预发环境的账号之间切换。手动删 cookie 再重新登录非常浪费时间。

这类扩展（Cookie-Editor、EditThisCookie 等）做的事很朴素：**把当前站点的 cookie 导出成 JSON，需要时再导入。** 切换环境、复现"某个用户状态"的问题时很快。

注意一点：**cookie 导出文件里是登录凭据**，别往聊天工具里贴，也别提交进代码仓库。

---

## 二、框架调试：按技术栈装一个

### Vue.js devtools

如果你写 Vue，这个是必装的。它能看组件树、props、事件，配合 Pinia 看状态变更，时间旅行调试可以倒着看状态是怎么变过来的。

两个常见困惑提前说清楚：

- **它需要应用在开发模式下运行**。生产构建里连不上，这是设计如此，不是插件坏了
- 同时开多个 Vue 项目时偶尔会连错实例，关掉多余标签页即可

![Vue.js devtools.png](https://developer.qcloudimg.com/http-save/yehe-4105534/2a51a0e9ab6740aa83d81f8e564750d5.png)

### React Developer Tools

React 侧的对应工具，由官方团队维护。除了组件树和 props/state，最有价值的是 **Profiler**——录一段交互，看哪些组件在重复渲染，是定位性能问题的第一手资料。

同样地，**只装你实际在用的那个**。两个框架同时装不冲突，但没在用的那个纯属占地方。




### Wappalyzer —— 看别人用什么技术栈

点一下就能知道目标站点用了什么框架、CDN、分析工具、服务器。做竞品分析、接手别人项目之前摸底时很好用。

它是基于响应头、脚本特征、meta 标签做指纹识别的，所以**自定义实现和很新的技术可能识别不出来**，结果当作参考，不要当作事实。

---

## 性能与质量：先原生，后扩展

这一节我建议**先什么都不装**。

### Lighthouse：DevTools 里就有

性能、可访问性、最佳实践、SEO 四项评分和优化建议，直接在 DevTools 的 Lighthouse 面板里跑，不需要单独装扩展。

### Web Vitals：需要常驻指标时再装

如果要实时盯 LCP、CLS、INP 这类指标，Google 官方出过 Web Vitals 扩展。但**多数人用 Lighthouse 跑一次就够了**，常驻监控属于进阶需求。

### Responsive Viewer：多尺寸同屏

需要同时看页面在手机、平板、桌面下的表现时，比反复切换设备模拟要快。这个属于"有需要再装"。

![Responsive Viewer.png](https://developer.qcloudimg.com/http-save/yehe-4105534/c7d683fbd821b46e1936f512aeead909.png)

---

## 日常信息处理：翻译、去噪、倍速

### 沉浸式翻译 —— 读英文文档的第一生产力

对开发者的价值主要在四处：读 RFC 和技术规范、读英文文档、看 Stack Overflow、看英文技术视频的双语字幕。

我的用法是**只给固定站点开自动翻译**（比如文档站），全局自动翻译在逛论坛时会让页面变得很乱。

另有一条经验：**源码和 issue 页面不要开整页翻译。** 代码里的标识符被翻成中文会误导人，宁可用划词。

### uBlock Origin —— 开发时也要记得关一次

它不只是去广告。对开发者来说，更实际的价值是：**拦截规则能让 Network 面板安静很多**，排查请求时少一半噪声。

但有一件事必须做：**发布之前，关掉它再测一遍自己的站点。** 我遇到过不止一次"线上白屏"，最后发现是某个资源被用户的拦截规则干掉了，而开发机上因为白名单从未复现。

> 补充：Chrome 上由于 Manifest V3 限制，完整版已不可用，只能装精简的 Lite 版本；需要完整能力请用 Firefox。

### Global Speed —— 技术大会回放的倍数

各类技术会议、线上分享的回放，多数平台提供倍速但上限有限。这类扩展直接作用于视频元素，配快捷键后比摸播放器控制条快，也支持逐帧回退（看演示里的代码细节时有用）。

同样要提醒：它依赖页面播放器结构，网站改版后可能临时失效。

---

##  素材与演示：开发者的媒体需求

开发者会遇到的媒体需求大概三种：

- **产品演示视频**：要写文档、做竞品分析，需要把页面里的演示视频存下来
- **批量图片**：设计稿、素材站、竞品页面上的图片要一次性拿到
- **会议回放**：技术会议的回放想离线看

现在站点基本都走 HLS（m3u8）或 DASH（mpd）分片传输，**右键另存为是拿不到完整文件的**。传统做法是命令行拉流合并，门槛偏高。

FlowPick 的做法是把这件事收进浏览器：嗅探页面请求 → 列出检测到的流媒体/音频/图片 → 选中后并行下载分片 → **在浏览器本地合成为 MP4**。不上传服务器，也不要求装 FFmpeg。

权限只有四项，逐条对应用途：

| 权限 | 用途 |
| --- | --- |
| `storage` | 保存用户设置 |
| `tabs` | 获取当前标签页以便嗅探请求 |
| `webRequest` | 识别 m3u8 / MPD 请求 |
| `downloads` | 把合成好的文件写入磁盘 |

没有 `nativeMessaging`，也就是不调用本机任何外部程序——合并逻辑全部在浏览器内完成。开源，可审计。

**边界照例说清楚：只处理自己有权限访问的内容，别转存、别外发。** 另外，如果站点用的是 EME/DRM 体系（Widevine、FairPlay 等），密钥不在明文清单里，这类内容不在工具能力范围内，也请不要尝试。

![placeholder-audio-detection.png](https://developer.qcloudimg.com/http-save/yehe-4105534/b93884355c5153373756e116bc331d61.png)

---

## 这些不用装扩展（DevTools 原生就够）

这一节的内容，我见过的多数开发者都没用起来。

| 需求 | 原生方案 | 说明 |
| --- | --- | --- |
| 线上改 JS/CSS 验证 | **Local Overrides** | DevTools → Sources → Overrides，把线上文件映射到本地目录，改完刷新即生效，不用发包 |
| 复现一个请求 | **Copy as fetch / Copy as cURL** | Network 面板右键请求即可，粘贴到控制台或终端改参数重放 |
| 全页截图 | DevTools 命令面板输入 `Capture full size screenshot` | 不用给任何扩展全站权限 |
| 弱网/低端设备模拟 | Network 面板的节流与 CPU 降速 | 比装模拟工具轻量 |
| 性能审计 | Lighthouse 面板 | 前文已述 |

**Local Overrides 值得单独安利一次。** 它解决的是一个很痛的场景：生产环境报了个错，你怀疑是某个文件的问题，但又不能随便发版。用它把那个文件映射到本地，改一行，刷新，立刻能验证——整个过程不碰服务器。

> 具体用法见 [Chrome DevTools 官方文档](https://developer.chrome.com/docs/devtools/overrides)。
>

---


## 总结

按工作流串一遍，开发者真正需要的其实就这些：

| 环节 | 工具 |
| --- | --- |
| 接口联调 | Requestly、JSON Formatter、Cookie-Editor |
| 框架调试 | Vue.js devtools / React Developer Tools（按技术栈选一个） |
| 技术栈摸底 | Wappalyzer |
| 性能排查 | Lighthouse（原生）、Web Vitals（按需） |
| 文档阅读 | 沉浸式翻译 |
| 环境纯净 | uBlock Origin（记得发布前关掉测一遍） |
| 视频与素材 | Global Speed、FlowPick |
| 线上验证 | **DevTools Local Overrides（原生，最重要）** |

最后还是那句话：**扩展的价值不在数量，在于有多少个你记住了用法。** 如果装完两个月都没打开过，直接卸掉，比留着更省事。

---

## 参考资料

- [Requestly 官网](https://requestly.com/) / [GitHub 源码](https://github.com/requestly/requestly)
- [Chrome DevTools：Local Overrides 官方文档](https://developer.chrome.com/docs/devtools/overrides)
- [Chrome DevTools 官方文档](https://developer.chrome.com/docs/devtools)
- [Chrome 扩展权限说明](https://developer.chrome.com/docs/extensions)
- [HLS 规范 RFC 8216](https://datatracker.ietf.org/doc/html/rfc8216)
- [FlowPick 官网](https://flowpick.net/)

*文中功能描述基于各工具官方页面与商店说明，核对时间 2026 年 9 月 10 日；版本号与用户量以官方页面最新数据为准。*


网上关于浏览器扩展的推荐文章很多，但大多面向泛用户：去广告、翻译、倍速。对开发者来说，真正高频的使用场景其实是另外几条——接口还没好怎么调前端、线上问题怎么在本地复现、别人的站点用了什么技术栈、技术大会的回放怎么看。

浏览器扩展推荐：面向开发工作流的一份实用清单

开发工具

前端

职业发展

按开发工作流推荐的浏览器扩展清单：接口联调用Requestly，JSON查看用JSONFormatter，调试框架用Vue/React官方工具，技术栈识别用Wappalyzer。性能排查优先用DevTools原生能力，翻译用沉浸式，去广告用uBlock Origin，视频下载用FlowPick。强调权限匹配、开源优先、定期维护。

4核4G3M云服务器 新用户低至38元/年！

lighthouse

2026上云采购 | AI焕新·智启新局

CDN免费试用


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

按开发工作流推荐的浏览器扩展清单：接口联调用Requestly，JSON查看用JSONFormatter，调试框架用Vue/React官方工具，技术栈识别用Wappalyzer。性能排查优先用DevTools原生能力，翻译用沉浸式，去广告用uBlock Origin，视频下载用FlowPick。强调权限匹配、开源优先、...

浏览器扩展推荐：面向开发工作流的一份实用清单-腾讯云开发者社区-腾讯云

浏览器扩展推荐：面向开发工作流的一份实用清单

浏览器扩展推荐：面向开发工作流的一份实用清单

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐