1. 浏览器F12抓包入门指南
第一次接触F12开发者工具时，我也被满屏的数据搞得头晕眼花。记得有次测试电商网站的购物车功能，开发同事请假了，文档也没更新，我只能硬着头皮用F12自己找接口。现在回想起来，掌握这个技能真是前端开发和测试人员的必修课。
按下键盘上的F12键（笔记本用户可能需要配合Fn键），浏览器右侧或底部会弹出开发者工具窗口。这里有个小技巧：如果你习惯用Chrome，可以试试Ctrl+Shift+I的组合键；在Firefox里则是Ctrl+Shift+Q。我最常使用的是Network面板，它就像个交通监控摄像头，能记录页面加载过程中的所有网络请求。
刚开始建议先勾选"Preserve log"选项，这样页面跳转时请求记录不会清空。有次测试支付流程时就因为这个没勾选，跳转到支付宝后之前的请求全消失了，不得不重头再来。下方的"Disable cache"也建议勾上，避免浏览器缓存干扰我们观察真实请求。
2. 精准捕获接口的XHR筛选技巧
所有请求都显示在Network面板时，就像在闹市找人——满眼都是图片、CSS、JS这些静态资源。这时候就要用到XHR筛选这个神器了，它能帮我们快速锁定Ajax请求。不过要注意，现在很多网站改用Fetch API，记得把Fetch/XHR选项都选上。
我遇到过最棘手的情况是某个旅游网站的机票查询接口，返回数据居然是gzip压缩的。这时候需要看Response Headers里的Content-Encoding字段，然后在代码里解压。后来发现更简单的方法：直接点击Response标签，浏览器会自动解压显示。
几个关键字段要特别关注：
- Status Code：200表示成功，304是缓存，500是服务器错误
- Type：xhr或fetch类型通常就是我们要找的API
- Initiator：显示是哪个JS文件发起的请求
- Size：突然变大的响应体可能藏着重要数据
3. 接口关键信息深度解析
找到目标接口后，点击它会出现详情面板。Headers标签里藏着宝库：Request URL是接口地址，Request Method决定GET还是POST。有次测试时发现GET请求总失败，后来在Headers里看到实际需要POST，这就是文档没更新的坑。
Query String Parameters和Form Data的区别很重要：
- 前者是URL问号后的参数，比如
?page=1&size=20 - 后者是POST请求的表单数据
- 现在很多API改用JSON格式，要在Payload里查看
响应数据方面，我习惯先用Preview快速浏览结构，再用Response看原始数据。遇到缩成一行的JSON时，可以安装JSON Viewer这类插件自动格式化。曾经有个返回数据里嵌套了7层对象，没格式化根本看不清数据结构。
4. 从抓包到Postman的完整工作流
抓到接口后，右键选择"Copy as cURL"可以直接导入Postman。但要注意，有些网站的鉴权信息会过期，需要定期更新。我建议把常用接口保存到Postman的Collection，并设置环境变量管理域名、token这些易变参数。
几个实战经验分享：
- 遇到403禁止访问时，检查Request Headers里的Authorization
- 接口返回乱码可能是编码问题，试试切换UTF-8/GBK
- Postman里可以用Tests脚本自动提取token供后续请求使用
- 大量接口测试时，用Collection Runner批量运行
最近测试一个视频网站时发现，它的分片上传接口在F12里显示为多个连续请求，每个请求头都带着当前分片序号。这种复杂场景就需要仔细观察每个请求的关联性，必要时用Charles或Fiddler这类专业抓包工具辅助分析。
