DevPost 使用教程——比 Postman 更顺手的 DevTools 内置 API 客户端

一、你是否也有这个问题？

在日常的前后端联调工作中，你一定遇到过这个场景：

1. 打开 Chrome DevTools，Network 面板里发现一个接口有问题
2. 右键 → “Copy as cURL”
3. Alt+Tab 切换到 Postman，等它启动……
4. 粘贴进去，调整 Headers / Body / Token
5. 发送，看结果
6. 再切回 DevTools，对比请求

每一次这样的操作，都打断了你的思路。

对于一个需要高频调试接口的开发者来说，这种上下文切换的成本是实实在在的。

---

二、DevPost 是什么？

DevPost 是一款 Chrome 扩展，它把 API 调试工具直接嵌入到 Chrome DevTools 面板里，成为 DevTools 的一个原生标签页。

你不需要切换窗口，不需要打开另一个应用，就在 DevTools 里，完成所有接口调试工作。

三、核心功能详解

3.1 请求构建器

支持全套 HTTP 方法：GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS

请求配置覆盖：

• Query 参数：键值对形式，清晰直观
• 请求头（Headers）：自由添加任意 Header
• 请求体（Body）：支持 JSON、form-data、URL 编码、XML、Raw
• 身份认证：内置 Basic Auth、Bearer Token、API Key 三种模式

支持从 cURL 命令一键导入，直接粘贴 cURL 字符串，所有参数自动解析填充。

3.2 网络流量捕获

DevPost 的一大亮点：可以实时拦截当前页面发出的 HTTP/HTTPS 请求。

操作流程：

1. 打开 DevPost 面板，点击「捕获」按钮
2. 在页面上触发你想抓取的操作（比如点击一个按钮）
3. DevPost 列出所有捕获的请求
4. 选中任意一条 → 直接在编辑器中修改重发

相比 DevTools 自带 Network 面板的只读重放，DevPost 给你完整的编辑能力。

3.3 环境变量管理

对于多环境（开发 / 测试 / 生产）联调，这是刚需功能：

创建环境：开发环境
  baseUrl = http://localhost:3000
  token   = dev_token_xxx

创建环境：生产环境
  baseUrl = https://api.example.com
  token   = prod_token_yyy

在 URL 或 Header 中用 {{变量名}} 语法引用：

GET {{baseUrl}}/api/users
Authorization: Bearer {{token}}

切换环境时，所有变量自动替换，无需手动修改每一个请求。

3.4 收藏夹 & 请求历史

• 收藏夹：将常用请求保存到命名分组，可重命名、排序、删除
• 历史记录：每次发送自动记录，支持搜索，一键重新运行

3.5 响应查看器

• JSON 响应：语法高亮 + 格式化展示
• 图片响应：直接渲染预览
• PDF 响应：内嵌预览，无需下载
• 响应头：随时查看完整 Header 信息

---

四、与 Postman 的定位对比

维度	DevPost	Postman
使用场景	调试时快速修改重发	复杂的 API 工作流管理
启动速度	即开即用（已在 DevTools 里）	需要单独启动
上下文切换	无，全在 DevTools 里	需要 Alt+Tab
网络捕获	支持，实时拦截页面请求	不支持
数据同步	本地存储，无账号	需要账号，云同步
团队协作	不支持	支持
适合场景	日常调试、联调	接口文档管理、团队协作

一句话总结：DevPost 不是要替代 Postman，而是解决"调试时频繁切窗口"这个具体痛点。

---

五、安装方式

1. 打开 Chrome 应用商店，搜索「DevPost」
2. 点击「添加至 Chrome」
3. 安装完成后，打开任意页面，按 F12 打开 DevTools
4. 找到「DevPost」标签页，开始使用

---

六、隐私说明

DevPost 不收集、不上传任何数据。所有请求记录、收藏、环境变量均保存在本地 chrome.storage.local 中，不经过任何外部服务器，无埋点，无遥测。

---

七、总结

DevPost 解决的是一个非常具体的效率问题：调试接口时不要打断我的 DevTools 工作流。

如果你每天都在前后端联调，建议试试看。欢迎在评论区反馈你的使用体验。