浏览器接口抓包，分享，本地测试，postman调用

言简意赅的讲解浏览器http请求抓包解决的痛点

在开发过程中，我们经常会遇到需要复现浏览器发出的 HTTP 请求的场景。很多同事在这一环节存在困惑，导致开发效率不高。其实，浏览器本身已经为我们提供了许多便捷的功能，我们只需要正确地使用它们，就能够轻松复现请求并解决问题。

1. 浏览器开发者工具抓包

1.1 打开浏览器开发者工具

浏览器发起的请求都是 HTTP 请求，且可以在浏览器的开发者工具中查看到。因此，我们可以通过以下步骤轻松抓取 HTTP 请求并复现：

1.打开浏览器，选择你感兴趣的页面（比如我现在打开的是我正在开发的个人网站，我在论坛上讲解也不方便拿别人的网站，所以。。。）。
2. 按下

F12

键，或者右键页面选择

检查

，打开浏览器开发者工具。
3. 在开发者工具中，点击

网络

（Network）标签。
4. 开启

保留日志

（Preserve Log）和

禁用缓存

（Disable Cache）选项，以便更好地排查问题。

1.2 刷新页面并查看请求

刷新页面后，浏览器会发起一系列 HTTP 请求，包括 GET、POST 请求等。你可以通过这些请求来查看当前的用户信息和交互数据。通常这些请求包含了 Cookies、Headers、Body 数据等重要信息。

1.3 复制请求

在抓取到请求之后，你可以右键点击某个请求，选择

复制

（Copy）选项，然后选择

复制为 PowerShell

或者

复制为 cURL

。这将复制当前请求的完整命令。

例如，在 Chrome 中，右键某个请求，选择

复制

->

复制为 CMD

,

复制为 PowerShell

或

复制为 cURL

。

注意：请求中可能包含敏感的用户信息，因此请确保在分享时删除这些信息，以防泄漏。

1.4 使用 CMD 或 PowerShell复现请求

在 Windows 中，我们可以直接通过CMD或PowerShell复现浏览器发出的请求。打开CMD或PowerShell，粘贴复制的命令，按回车即可查看请求的返回结果。

示例 CMD 命令：

curl ^"https://wenhaoworld.online/^" ^
  -H ^"accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7^" ^
  -H ^"accept-language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6^" ^
  -H ^"cache-control: no-cache^" ^
  -H ^"cookie: _ga=GA1.2.2041305551.1713588256^" ^
  -H ^"pragma: no-cache^" ^
  -H ^"priority: u=0, i^" ^
  -H ^"sec-ch-ua: ^\^"Microsoft Edge^\^";v=^\^"131^\^", ^\^"Chromium^\^";v=^\^"131^\^", ^\^"Not_A Brand^\^";v=^\^"24^\^"^" ^
  -H ^"sec-ch-ua-mobile: ?0^" ^
  -H ^"sec-ch-ua-platform: ^\^"Windows^\^"^" ^
  -H ^"sec-fetch-dest: document^" ^
  -H ^"sec-fetch-mode: navigate^" ^
  -H ^"sec-fetch-site: none^" ^
  -H ^"sec-fetch-user: ?1^" ^
  -H ^"upgrade-insecure-requests: 1^" ^
  -H ^"user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0^"

示例 CMD 响应：

示例 PowerShell 命令：

$session = New-Object Microsoft.PowerShell.Commands.WebRequestSession
$session.UserAgent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0"$session.Cookies.Add((New-Object System.Net.Cookie("_ga","GA1.2.2041305551.1713588256","/",".wenhaoworld.online")))Invoke-WebRequest-UseBasicParsing -Uri "https://wenhaoworld.online/" `
-WebSession $session `
-Headers @{"authority"="wenhaoworld.online""method"="GET""path"="/""scheme"="https""accept"="text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7""accept-encoding"="gzip, deflate, br, zstd""accept-language"="zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6""cache-control"="no-cache""pragma"="no-cache""priority"="u=0, i""sec-ch-ua"="`"Microsoft Edge`";v=`"131`", `"Chromium`";v=`"131`", `"Not_A Brand`";v=`"24`"""sec-ch-ua-mobile"="?0""sec-ch-ua-platform"="`"Windows`"""sec-fetch-dest"="document""sec-fetch-mode"="navigate""sec-fetch-site"="none""sec-fetch-user"="?1""upgrade-insecure-requests"="1"}

示例 PowerShell 响应：

其实可以看到响应结果与浏览器中的一致。这样，你就能够在本地复现浏览器中的 HTTP 请求，而不需要手动输入 URL 或担心遗漏 Header、Cookie 等信息，也有利于分享给其他小伙伴复现问题，比如我文中的命令你就可以直接在你的CMD或PowerShell中直接调用（不过别使劲调用，毕竟服务器是我个人的，流量要花钱。。）。

2. 使用 Postman 进行更高效的测试

2.1 使用 cURL 命令导入

如果你希望提供更优雅的界面和更多功能，Postman 是一个非常好的选择。通过以下步骤，你可以使用 Postman 轻松复现 HTTP 请求：

1. 在浏览器开发者工具中，右键请求并选择 复制为 cURL。
2. 打开 Postman，点击左上角的 Import 按钮。
3. 选择 Raw Text，粘贴复制的 cURL 命令，然后点击 Continue。
4. 点击 Import，即可导入并复现该请求。

2.2 本地测试

在 Postman 中，你可以进行更多操作，例如保存请求、设置环境变量、查看详细的响应数据等。Postman 提供了图形化的界面，便于你更直观地理解请求和响应的过程。

2.3 使用 Postman 共享请求

Postman 还支持将请求分享给其他同事，避免了手动敲 URL 或其他冗余操作。你可以直接分享 Postman Collection，或者将请求导出为 cURL 命令，方便团队成员复现问题。

3. 在 Linux 服务器上使用 cURL

对于使用 Linux 服务器的开发者，可以直接使用

cURL

命令来复现浏览器请求。

cURL

是一个命令行工具，几乎所有的 Linux 系统都已经预安装了。你可以将浏览器中的 cURL 命令直接复制到终端中执行。

示例 cURL 命令：

curl'https://wenhaoworld.online/'\-H'accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7'\-H'accept-language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6'\-H'cache-control: no-cache'\-H'cookie: _ga=GA1.2.2041305551.1713588256'\-H'pragma: no-cache'\-H'priority: u=0, i'\-H'sec-ch-ua: "Microsoft Edge";v="131", "Chromium";v="131", "Not_A Brand";v="24"'\-H'sec-ch-ua-mobile: ?0'\-H'sec-ch-ua-platform: "Windows"'\-H'sec-fetch-dest: document'\-H'sec-fetch-mode: navigate'\-H'sec-fetch-site: none'\-H'sec-fetch-user: ?1'\-H'upgrade-insecure-requests: 1'\-H'user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0'

执行此命令后，你会看到与浏览器中相同的请求响应结果如下。

通过这种方式，开发者能够在本地快速测试接口，而不需要浪费多余时间复现问题。

4. 小结

掌握浏览器的开发者工具和 HTTP 请求的复现方法可以极大地提升开发效率。通过手动抓包或使用浏览器提供的功能，我们能够轻松获取请求的详细信息，并将其复现到本地环境进行测试。同时，借助工具如 Postman 和 cURL，可以让复现过程更加高效和便捷。

总结一下流程：

• 使用浏览器的开发者工具抓取请求。
• 复制请求为 PowerShell,CMD 或 cURL 命令。
• 使用 PowerShell 等方法本地测试，或者将 cURL 命令导入 Postman。
• 在 Linux 服务器上直接使用 cURL 命令进行测试。

通过这些方法，你不仅能提高开发效率，还能避免遗漏请求中的细节问题。

通过上述内容，你就已经基本理解了这个产品，基础用法我也都有展示。如果你能融会贯通，我相信你会很强

Best
Wenhao (楠博万)