在开发或调试网站接口时经常会遇到这样的问题页面加载失败接口返回数据异常请求参数与预期不一致查看日志无法解释问题直接查看网络请求更有效。抓包的目标就是把浏览器与服务器之间的通信记录下来。下面通过排查说明网站抓包通常是如何进行的。一、先用浏览器开发工具查看请求在大多数情况下第一步不需要安装任何工具。打开浏览器开发者工具在 Chrome 或 Safari 中打开网页按F12打开开发者工具切换到Network面板刷新页面页面加载过程中产生的请求会出现在列表中。可以查看请求地址请求方法请求参数返回数据例如在调试登录接口时可以直接看到 POST 请求发送的 JSON 数据。二、当浏览器工具不够用时浏览器开发工具只能看到当前浏览器的请求。如果需要修改请求参数重放请求抓取其他应用的请求就需要使用代理抓包工具。常见工具包括CharlesSniffmasterProxymanFiddler这些工具的工作方式是浏览器的请求先发送到代理再由代理转发到服务器。因此代理工具可以记录 HTTP 或 HTTPS 请求。三、在电脑上配置代理抓包准备一台电脑并启动代理工具例如 Charles。操作步骤启动 Charles查看代理监听端口例如8888在浏览器或系统网络设置中配置 HTTP 代理将代理地址设置为127.0.0.1:8888保存设置后浏览器请求会经过代理。验证抓包是否成功打开浏览器访问一个网站例如https://example.com如果 Charles 中出现新的请求记录说明代理抓包已经成功。此时可以查看URLHeaderCookieResponse四、抓取 HTTPS 网站请求如果网站使用 HTTPS还需要安装代理证书。操作步骤在浏览器中访问代理工具提供的证书下载地址下载证书安装到系统证书库将证书设置为信任完成后代理工具可以解密 HTTPS 请求。重新加载网页后可以看到完整响应内容。五、修改网站请求参数在调试接口时有时需要修改请求参数例如修改请求 Header改写 POST 数据重定向 API 地址在 Charles 或 Proxyman 中可以使用Rewrite 或 Breakpoints功能。在 Sniffmaster抓包大师中也可以使用拦截器功能。例如在 Charles 中开启 Breakpoints刷新页面在请求发送前暂停修改参数再发送请求服务器返回结果后可以立即看到变化。六、如果请求来自移动设备如果网站接口是由手机 App 调用的可以让手机流量经过电脑代理。操作步骤手机与电脑连接同一 Wi-Fi在手机 Wi-Fi 设置中配置 HTTP 代理输入电脑 IP 与代理端口然后打开手机浏览器访问网站。代理工具中会出现手机发出的请求。七、抓取移动设备 HTTPS 请求如果手机访问的是 HTTPS 网站还需要安装证书。操作步骤在手机浏览器访问Sniffmaster代理工具提供的证书地址下载描述文件安装证书在系统设置中开启证书信任完成后代理工具可以解析手机 HTTPS 请求。八、当代理抓不到请求时有些 App 或网页请求不会走系统代理。此时可以使用设备级抓包工具例如SniffMaster抓包大师。这种方式不依赖 Wi-Fi 代理可以直接从设备中直接读取网络数据。使用 SniffMaster 抓取网络请求操作步骤使用 USB 将 iPhone 连接电脑保持设备解锁在手机上点击信任此电脑启动 SniffMaster在设备列表中选择设备按提示安装描述文件进入 HTTPS 暴力抓包模式点击开始然后触发手机访问网站。抓包界面会出现对应的网络请求。九、分析底层网络问题如果需要分析更底层的网络行为例如TCP 连接问题网络延迟数据包重传可以将Sniffmaster抓到的数据导出到Wireshark。在 Wireshark 中可以查看TCP 三次握手数据传输过程连接关闭原因不同抓包工具的使用场景不同工具在网络中的使用场景不同工具抓包方式适用场景浏览器开发工具浏览器内部页面调试Charles代理抓包HTTP / HTTPSProxyman代理抓包HTTPS 调试SniffMaster设备本机抓包移动设备网络Wireshark网络层抓包TCP / UDP 分析参考链接https://www.sniffmaster.net/tutorial/zh/1/1.html
网站抓包解析，掌握浏览器请求和 HTTPS 数据分析的流程
在开发或调试网站接口时经常会遇到这样的问题页面加载失败接口返回数据异常请求参数与预期不一致查看日志无法解释问题直接查看网络请求更有效。抓包的目标就是把浏览器与服务器之间的通信记录下来。下面通过排查说明网站抓包通常是如何进行的。一、先用浏览器开发工具查看请求在大多数情况下第一步不需要安装任何工具。打开浏览器开发者工具在 Chrome 或 Safari 中打开网页按F12打开开发者工具切换到Network面板刷新页面页面加载过程中产生的请求会出现在列表中。可以查看请求地址请求方法请求参数返回数据例如在调试登录接口时可以直接看到 POST 请求发送的 JSON 数据。二、当浏览器工具不够用时浏览器开发工具只能看到当前浏览器的请求。如果需要修改请求参数重放请求抓取其他应用的请求就需要使用代理抓包工具。常见工具包括CharlesSniffmasterProxymanFiddler这些工具的工作方式是浏览器的请求先发送到代理再由代理转发到服务器。因此代理工具可以记录 HTTP 或 HTTPS 请求。三、在电脑上配置代理抓包准备一台电脑并启动代理工具例如 Charles。操作步骤启动 Charles查看代理监听端口例如8888在浏览器或系统网络设置中配置 HTTP 代理将代理地址设置为127.0.0.1:8888保存设置后浏览器请求会经过代理。验证抓包是否成功打开浏览器访问一个网站例如https://example.com如果 Charles 中出现新的请求记录说明代理抓包已经成功。此时可以查看URLHeaderCookieResponse四、抓取 HTTPS 网站请求如果网站使用 HTTPS还需要安装代理证书。操作步骤在浏览器中访问代理工具提供的证书下载地址下载证书安装到系统证书库将证书设置为信任完成后代理工具可以解密 HTTPS 请求。重新加载网页后可以看到完整响应内容。五、修改网站请求参数在调试接口时有时需要修改请求参数例如修改请求 Header改写 POST 数据重定向 API 地址在 Charles 或 Proxyman 中可以使用Rewrite 或 Breakpoints功能。在 Sniffmaster抓包大师中也可以使用拦截器功能。例如在 Charles 中开启 Breakpoints刷新页面在请求发送前暂停修改参数再发送请求服务器返回结果后可以立即看到变化。六、如果请求来自移动设备如果网站接口是由手机 App 调用的可以让手机流量经过电脑代理。操作步骤手机与电脑连接同一 Wi-Fi在手机 Wi-Fi 设置中配置 HTTP 代理输入电脑 IP 与代理端口然后打开手机浏览器访问网站。代理工具中会出现手机发出的请求。七、抓取移动设备 HTTPS 请求如果手机访问的是 HTTPS 网站还需要安装证书。操作步骤在手机浏览器访问Sniffmaster代理工具提供的证书地址下载描述文件安装证书在系统设置中开启证书信任完成后代理工具可以解析手机 HTTPS 请求。八、当代理抓不到请求时有些 App 或网页请求不会走系统代理。此时可以使用设备级抓包工具例如SniffMaster抓包大师。这种方式不依赖 Wi-Fi 代理可以直接从设备中直接读取网络数据。使用 SniffMaster 抓取网络请求操作步骤使用 USB 将 iPhone 连接电脑保持设备解锁在手机上点击信任此电脑启动 SniffMaster在设备列表中选择设备按提示安装描述文件进入 HTTPS 暴力抓包模式点击开始然后触发手机访问网站。抓包界面会出现对应的网络请求。九、分析底层网络问题如果需要分析更底层的网络行为例如TCP 连接问题网络延迟数据包重传可以将Sniffmaster抓到的数据导出到Wireshark。在 Wireshark 中可以查看TCP 三次握手数据传输过程连接关闭原因不同抓包工具的使用场景不同工具在网络中的使用场景不同工具抓包方式适用场景浏览器开发工具浏览器内部页面调试Charles代理抓包HTTP / HTTPSProxyman代理抓包HTTPS 调试SniffMaster设备本机抓包移动设备网络Wireshark网络层抓包TCP / UDP 分析参考链接https://www.sniffmaster.net/tutorial/zh/1/1.html
