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": "
"password": "
}
Headers → Request Headers：看 Content-Type、Cookie、Authorization，例如：
Authorization: Bearer
Cookie: SESSION=
Response：看返回结果，例如：
{
"code": 0,
"message": "ok",
"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=
Authorization: Bearer
{
"username": "
"password": "
"mobile": "138********"
}
享前检查：
不要直接发原始 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
分享前先脱敏，标题也要检查
掌握这套，基本就能自己分析大部分网页接口、登录请求、搜索请求和前后端交互了。