引言

作为程序员，我们每天都在浏览器中度过。一个好用的 Chrome 插件可以显著提升效率，但面对 Chrome 网上应用店中数以万计的插件，如何找到真正实用的？

本文精选了 5 个程序员必备的 Chrome 插件，每个都经过实际使用验证，能够切实解决开发中的痛点。

重点推荐：第 3 个插件是 API 调试神器，直接在浏览器里测接口，再也不用安装臃肿的 Postman！

一、JSON Viewer：JSON 数据可视化利器

1.1 痛点

你是否遇到过这样的场景：

访问一个返回 JSON 的 API 接口，看到的是一堆压缩的文本：
{"code":200,"data":{"items":[{"id":1,"name":"test"},{"id":2,"name":"demo"}]}}

想要查看某个字段，需要手动展开，非常痛苦。

1.2 功能介绍

JSON Viewer 是一个轻量级的 JSON 格式化工具，它能：

• 自动格式化：将压缩的 JSON 数据自动展开格式化
• 树形视图：以树形结构展示 JSON，支持折叠/展开
• 语法高亮：不同类型的数据用不同颜色区分
• 搜索功能：快速搜索 JSON 中的字段或值
• 复制路径：一键复制字段路径（如 data.items[0].name）

1.3 使用效果

Before：

{"code":200,"message":"success","data":{"total":100,"items":[{"id":1,"name":"产品A","price":99.9,"stock":10},{"id":2,"name":"产品B","price":199.9,"stock":5}]}}

After：

{
  "code": 200,
  "message": "success",
  "data": {
    "total": 100,
    "items": [
      {
        "id": 1,
        "name": "产品A",
        "price": 99.9,
        "stock": 10
      },
      {
        "id": 2,
        "name": "产品B",
        "price": 199.9,
        "stock": 5
      }
    ]
  }
}

1.4 为什么比其他方案好

JSON Viewer：轻量（只有几十 KB）、自动生效、无需额外操作。

二、FeHelper：前端开发瑞士军刀

2.1 痛点

开发中经常需要：

• 对比两段 JSON 是否相同
• 将 URL 编码的字符串解码
• 将时间戳转换为人类可读的日期
• 测试正则表达式
• 格式化 HTML/CSS/JS 代码

每次都要打开不同的在线工具，效率低下。

2.2 功能介绍

FeHelper（WEB 前端助手）是一个集成了 20+ 工具的插件：

• JSON 工具：格式化、压缩、对比、编解码
• 编码工具：URL 编解码、Base64、Unicode、MD5/SHA
• 时间工具：时间戳转换、倒计时、日期计算
• 正则工具：正则表达式测试、生成
• 代码工具：HTML/CSS/JS 格式化、压缩
• 网络工具：二维码生成、IP 查询、端口检测
• 其他工具：进制转换、UUID 生成、颜色转换

2.3 使用场景

场景 1：JSON 对比

问题：两个 API 返回的 JSON 看起来一样，但实际有差异
解决方案：FeHelper → JSON 对比 → 粘贴两段 JSON → 自动高亮差异

场景 2：时间戳转换

问题：日志中的时间是 1704067200，不知道是什么时间
解决方案：FeHelper → 时间戳转换 → 输入时间戳 → 自动转换为日期时间

场景 3：正则测试

问题：写了一个正则表达式，不知道能不能匹配目标字符串
解决方案：FeHelper → 正则测试 → 输入正则和测试字符串 → 实时显示匹配结果

2.4 为什么比其他方案好

FeHelper：一个插件搞定所有常用工具，随时可用，无需切换。

三、Talend API Tester：API 调试神器

3.1 痛点

开发 API 时，你可能会遇到这些问题：

• Postman 太大（500MB+），启动慢
• 每次测试都要切换到 Postman 窗口
• 团队协作时分享接口不方便
• 需要登录账号才能使用某些功能

3.2 功能介绍

Talend API Tester 是一个轻量级的 API 调试工具，直接在浏览器中使用：

• HTTP 请求：支持 GET/POST/PUT/DELETE 等所有 HTTP 方法
• 请求体：支持 JSON、Form Data、Raw 等格式
• 请求头：支持自定义 Headers、Cookie
• 认证：支持 Basic Auth、Bearer Token、OAuth
• 响应查看：格式化的 JSON 响应、状态码、响应时间
• 收藏功能：收藏常用接口，方便快速访问
• 历史记录：自动保存请求历史
• 环境变量：支持多环境（开发/测试/生产）

3.3 使用效果

请求示例：

GET https://api.example.com/users
Headers:
  Authorization: Bearer token123
  Content-Type: application/json

Response:
  Status: 200 OK
  Time: 120ms
  Body:
  {
    "code": 200,
    "data": [...],
    "total": 100
  }

3.4 为什么比 Postman 好

3.5 适用场景

• 快速测试单个 API 接口
• 在浏览器中开发调试
• 需要轻量级工具的场景
• 不想安装大型应用的用户

推荐度：⭐⭐⭐⭐⭐（五星推荐）

四、Octotree：GitHub 代码浏览神器

4.1 痛点

浏览 GitHub 上的开源项目时：

• 需要多次点击才能找到想要的文件
• 无法快速了解项目结构
• 没有侧边栏目录，导航困难

虽然 GitHub 现在支持按 . 打开 Web IDE，但对于快速浏览来说太重了。

4.2 功能介绍

Octotree 在 GitHub 页面左侧添加了一个树形目录：

• 项目结构：以树形结构展示整个项目的目录
• 快速导航：点击目录即可跳转到对应文件
• 折叠展开：支持折叠/展开目录
• 搜索功能：在目录中搜索文件
• 快捷键支持：键盘快捷键快速导航
• 文件预览：悬停预览文件内容

4.3 使用效果

Before：

GitHub 页面只有文件列表，需要逐页点击查看

After：

┌──────────────────────────────────────────────────────────┐
│  ┌────────────────────────┐  ┌──────────────────────────┐│
│  │  project/              │  │  README.md               ││
│  │  ├── src/              │  │                          ││
│  │  │   ├── main/         │  │  # Project Title         ││
│  │  │   │   ├── java/     │  │  Description...          ││
│  │  │   │   │   └── Demo/ │  │                          ││
│  │  │   │   │       └──   │  │                          ││
│  │  │   │   │           │  │                          ││
│  │  │   │   └── resources│  │                          ││
│  │  │   └── test/         │  │                          ││
│  │  ├── pom.xml           │  │                          ││
│  │  └── README.md         │  │                          ││
│  └────────────────────────┘  └──────────────────────────┘│
└──────────────────────────────────────────────────────────┘

4.4 为什么比 GitHub 原生好

说明：GitHub 现在支持按 . 打开 Web IDE（github.dev），但 Octotree 更轻量，适合快速浏览项目结构。

五、Wappalyzer：一键查看网站技术栈

5.1 痛点

看到一个网站做得很好，想知道它用了什么技术栈：

• 前端框架是 React 还是 Vue？
• 后端用的什么语言？
• 数据库是什么？
• 使用了哪些第三方服务？

手动分析太麻烦，而且不一定准确。

5.2 功能介绍

Wappalyzer 可以一键识别网站使用的技术栈：

• 前端技术：框架（React/Vue/Angular）、库（jQuery/Lodash）、CDN
• 后端技术：编程语言（Java/Python/Node.js）、框架（Spring/Django/Express）
• 数据库：MySQL/PostgreSQL/MongoDB/Redis
• 服务器：Nginx/Apache/Tomcat
• 云服务：AWS/Azure/GCP/阿里云
• 分析工具：Google Analytics/百度统计
• 支付服务：Stripe/支付宝/微信支付

5.3 使用效果

访问 www.taobao.com：

技术栈识别结果：
- 前端框架：React
- 后端语言：Java
- 服务器：Nginx
- 数据库：MySQL
- CDN：阿里云 CDN
- 支付：支付宝
- 分析：百度统计

5.4 学习价值

作为开发者，了解其他网站的技术栈有以下好处：

1. 技术选型参考：看看别人在生产环境中用了什么技术
2. 学习借鉴：了解优秀网站的技术架构
3. 面试准备：了解行业主流技术栈
4. 竞品分析：分析竞争对手的技术实力

5.5 注意事项

• 免费版限制：免费版只能识别部分技术，高级功能需要付费
• 准确性：不是 100% 准确，有些网站会隐藏技术栈
• 隐私保护：Wappalyzer 会发送网站信息到服务器，介意的用户慎装

六、插件对比总览

七、荣誉提名

7.1 React Developer Tools

• 功能：调试 React 应用，查看组件树、状态、props
• 适用场景：React 开发者必备
• 特点：官方出品，功能强大

7.2 Redux DevTools

• 功能：调试 Redux 应用，查看 state 变化、action 历史
• 适用场景：使用 Redux 的项目
• 特点：时间旅行调试，非常实用

7.3 Dark Reader

• 功能：为任何网站开启暗色模式
• 适用场景：夜间开发，保护眼睛
• 特点：自动调整对比度，不影响阅读

7.4 AdBlock Plus

• 功能：拦截广告和跟踪器
• 适用场景：提升浏览体验，保护隐私
• 特点：开源免费，规则可自定义

八、总结

这 5 个插件各有侧重：

推荐安装顺序：

1. Talend API Tester — 每天都会用到
2. FeHelper — 解决各种小工具需求
3. JSON Viewer — 查看 API 响应必备
4. Octotree — 浏览 GitHub 项目
5. Wappalyzer — 了解技术栈

互动话题：你最常用的 Chrome 插件是什么？有没有发现其他实用的插件？欢迎留言分享！

附录

安装方法

1. 打开 Chrome 浏览器
2. 访问 Chrome 网上应用店
3. 搜索插件名称
4. 点击"添加至 Chrome"

快捷键

相关资源

• Chrome 网上应用店
• FeHelper 官方网站
• Talend API Tester 官网

订阅提醒：关注我获取更多开发效率工具推荐！