Code, life, and everything in between.

1. 打开开发者工具

以 Chrome / Edge 为例：

按 F12
或按 Ctrl + Shift + I，Mac 是 Cmd + Option + I
或右键页面 → 检查 / Inspect

打开后，顶部选择 Network / 网络 面板。

2. 认识 Network 面板

常用按钮：

红色圆点：开始 / 停止记录请求，确保是红色。
🚫 清空按钮：清空当前请求列表。
Filter 过滤栏：All、Fetch/XHR、Doc、CSS、JS、Img、Media、Font、WS、Other。
Preserve log / 保留日志：页面跳转后不清空请求。抓登录跳转必勾。
Disable cache / 禁用缓存：避免看到 304 或 from disk cache。
网络节流：No throttling、Fast 3G、Slow 3G、Offline，用于模拟慢网。

请求列表常见列：

Name：请求名称或接口路径
Status：状态码，如 200、304、401、404、500
Method：GET、POST、OPTIONS 等
Type：xhr、fetch、script、img 等
Size：大小
Time：耗时
Waterfall：请求时间线

3. 标准抓包流程

打开目标网页。
按 F12，进入 Network / 网络。
勾选 Preserve log / 保留日志。
勾选 Disable cache / 禁用缓存。
点击清空按钮。
在页面上操作：刷新、搜索、登录、翻页、点击按钮。
回到 Network 面板，查看新出现的请求。
请求太多时，点击 Fetch/XHR，只看接口请求。
在 Filter 输入关键词，例如 login、api、list、json。
点击某条请求，右侧查看详情。

4. 查看请求详情

点击一条请求，右侧通常有这些标签：

Headers / 标头

General：请求 URL、请求方法、状态码、远程地址。
Request Headers：浏览器发给服务器的头，如 Cookie、User-Agent、Authorization、Content-Type。
Response Headers：服务器返回的头，如 Set-Cookie、Content-Type、Cache-Control。

Payload / 载荷

看请求参数：

Query String Parameters：URL 问号后面的参数，GET 常见。
Form Data：表单提交参数。
Request Payload：JSON 提交参数，POST 常见。

Preview / 预览

格式化查看响应，JSON 会自动展开，图片会显示缩略图。

Response / 响应

服务器返回的原始内容，可能是 HTML、JSON、JS。

Cookies

看请求携带的 Cookie 和响应设置的 Cookie。

Timing / 计时

看 DNS、TCP、SSL、TTFB、内容下载耗时，用于排查慢请求。

Initiator / 发起者

看这个请求由哪段 JS 代码发起，点击可跳到 Sources 调用栈。

5. 实战：抓登录接口

打开登录页，例如占位符：https://example.com/login
F12 → Network / 网络
勾选 Preserve log 和 Disable cache
点清空
输入账号密码，点击登录
在 Network 里点 Fetch/XHR
找 Method 是 POST、URL 含 login、auth、signin 的请求
点击它：
- Payload：看提交了哪些字段，例如：

{
  "username": "<USER>",
  "password": "<REDACTED>"
}

Headers → Request Headers：看 Content-Type、Cookie、Authorization，例如：

Authorization: Bearer <TOKEN>
Cookie: SESSION=<SESSION_ID>

Response：看返回结果，例如：

{
  "code": 0,
  "message": "ok",
  "token": "<TOKEN>"
}

右键请求 → Copy → Copy as cURL，可以复制到终端重放。
右键请求列表空白处 → Save all as HAR with content，可导出全部请求。

登录请求经常因为页面跳转消失，所以一定要勾 Preserve log。

6. 常用技巧

只看接口

点 Fetch/XHR，大部分前后端分离网站的接口都在这里。

搜索接口

Filter 输入：

login
api
json
method:POST
status-code:200
mime-type:application/json
domain:api.example.com

复制请求

右键请求 → Copy：

Copy as cURL (bash)：终端重放。
Copy as fetch：粘贴到 Console 执行。
Copy link address：只复制 URL。

重放请求

Firefox：右键 → Edit and Resend，可改参数重发。
Chrome：部分 XHR 可 Replay XHR；更常用 Copy as fetch 到 Console 改完再发。

抓 WebSocket

Filter 点 WS，点击请求，看 Messages，能看到收发消息。

移动端页面

点设备图标 Toggle device toolbar，选 iPhone / Android，刷新页面。
这只能模拟移动端浏览器，不能抓手机 App。抓 App 要用 Charles、Fiddler、mitmproxy 等代理工具。

7. 常见问题

Q：打开 F12 后没有请求？
刷新页面，确认红色记录按钮亮着，清空后重新操作。

Q：登录请求一闪而过？
勾选 Preserve log / 保留日志。

Q：总是 304 或 from cache？
勾选 Disable cache / 禁用缓存。

Q：HTTPS 为什么能看见？
因为浏览器在内部解密后展示给开发者工具。F12 只能看当前浏览器发出的请求。

Q：为什么复制 cURL 后请求失败？
Cookie / Token 可能过期，或缺 Referer、签名、时间戳、设备信息。

Q：跨域怎么看？
看是否有 OPTIONS 预检请求，再看 Response Headers 里的 Access-Control-Allow-Origin。

Q：能抓手机 App 吗？
不能直接抓。F12 只管当前浏览器。手机 App 抓包需要代理工具，并在手机安装证书。

8. 脱敏与安全

F12 抓出来的包不会自动脱敏。分享、截图、发帖、发给别人之前，必须自己处理。

标题也要脱敏。
如果标题里带真实公司名、项目名、域名、接口名、账号名，也要替换。

例如：原：某公司后台登录接口抓包改：某系统登录接口抓包（示例）

重点脱敏：

Cookie / Set-Cookie
Authorization / Bearer token
token / access_token / refresh_token
session / sessionid / JSESSIONID
password / passwd / pwd
手机号、邮箱、身份证、银行卡、地址
验证码、API Key、Secret、签名参数
响应里的用户信息、订单信息

脱敏示例：重点脱敏：

Cookie / Set-Cookie
Authorization / Bearer token
token / access_token / refresh_token
session / sessionid / JSESSIONID
password / passwd / pwd
手机号、邮箱、身份证、银行卡、地址
验证码、API Key、Secret、签名参数
响应里的用户信息、订单信息

脱敏示例：

Cookie: SESSION=<SESSION_ID>; uid=<UID>
Authorization: Bearer <TOKEN>

{
  "username": "<USER>",
  "password": "<REDACTED>",
  "mobile": "138****5678"
}

享前检查：

不要直接发原始 HAR，HAR 里可能连响应内容都有。
不要直接发 Copy as cURL，里面常带 Cookie 和 Authorization。
截图要打码请求头、Payload、Response。
全局搜索这些词：cookie、token、auth、password、session、secret、key、phone、email。
最安全的是只发字段结构，不发具体值。
标题里也不要出现真实公司名、项目名、域名、账号名。

9. 最短流程总结

F12 → Network / 网络
勾选 Preserve log + Disable cache
点清空
操作页面
点 Fetch/XHR
点请求，看 Headers / Payload / Preview / Response
右键 Copy as cURL 或导出 HAR
分享前先脱敏，标题也要检查

掌握这套，基本就能自己分析大部分网页接口、登录请求、搜索请求和前后端交互了。

博客

浏览器 F12 抓包手把手教程