如何用工具分析网络请求？

本文目录导读：

1. 浏览器开发者工具（最常用，适合前端调试）
2. 抓包代理工具（适合移动端、跨平台、深度分析）
3. 命令行工具（适合开发/运维，自动化脚本）
4. 专业性能分析工具（侧重于性能瓶颈）
5. 总结：不同场景用什么工具？
6. 简单实操步骤（以Chrome调试一个登录接口为例）

分析网络请求是前端开发、调试接口、排查网页加载性能或进行安全测试时的核心技能,以下是几种主流的工具和具体分析方法：

浏览器开发者工具（最常用，适合前端调试）

几乎所有现代浏览器（Chrome, Edge, Firefox, Safari）都内置了强大的网络分析面板。

• 打开方式： 按 F12 或 Ctrl+Shift+I （Mac: Cmd+Option+I），切换到 Network（网络） 标签页。
• 核心功能与操作：
  • 查看请求瀑布流： 可以直观看到每个请求的发起时间、持续时长（DNS解析、连接、SSL、TTFB、下载时间）。重点看“Waterfall”列,找出耗时长的阻塞项。
  • 筛选与搜索： 按类型筛选（XHR/Fetch、JS、CSS、Img、Font、Doc），使用搜索框（Ctrl+F）可以搜索请求URL或返回内容。
  • 查看请求详情：
    • Headers（头信息）： 查看请求的URL、方法（GET/POST）、状态码（200/304/404/500）、请求头（如 Cookie、User-Agent、Authorization）和响应头（如 Content-Type、Cache-Control）。
    • Payload（负载）/ Params（参数）： 查看POST请求提交的Form Data或JSON body。
    • Preview（预览） / Response（响应）： 直接查看服务器返回的原始数据（JSON、HTML、图片）。
    • Cookies： 查看该请求携带的Cookie。
  • 禁用缓存： 勾选“Disable cache”模拟首次访问。
  • 模拟网络条件： 点击模拟下拉菜单（默认是“Online”），切换到“Slow 3G”或“Fast 3G”来测试弱网表现。
  • 保留日志： 勾选“Preserve log”，即使页面跳转，之前的请求记录也不会被清空,这在分析页面重定向时非常有用。
  • 请求拦截/修改（Overrides）： Chrome DevTools的Sources面板中，可以使用“Overrides”功能修改本地响应,但更复杂的功能可能需要专业工具。

抓包代理工具（适合移动端、跨平台、深度分析）

当你需要分析手机App的请求、或对网络流量进行拦截与修改时，浏览器工具就不够用了,需要专业的抓包工具。

• Charles （macOS/Linux/Windows， 付费但有试用期）

  • 核心能力：
    • SSL Proxying（SSL代理）： 可以解密HTTPS请求，看到加密后的内容，需要手机/电脑安装并信任Charles的根证书。
    • 断点（Breakpoints）： 可以拦截一个请求，在请求发出前或响应返回前修改数据（比如改动一个参数、或者修改服务器返回的JSON）,观察前端的反应。
    • Map Local/Map Remote： 将线上某个文件（如 app.js）映射到本地的某个文件进行调试,或重定向到另一个服务器。
    • Throttle（节流）： 模拟2G/3G/4G甚至高丢包率的网络环境。
  • 适用场景： 调试移动端H5、安卓/iOS原生App、分析第三方API、修改请求接口。

• Fiddler （Windows首选，也有Mac版但稳定性稍弱）

  • 核心能力： 与Charles类似，但功能更偏向Windows开发者，支持编写脚本（FiddlerScript）进行自动化修改,比如自动替换某个请求的Header。
  • 适用场景： Windows环境下深度抓包、自动化测试。

• mitmproxy （跨平台，命令行界面）

  • 核心能力： 开源、轻量、可编程，通过Python脚本可以拦截、修改、记录所有流量,适合自动化测试环境和DevOps流程。
  • 适用场景： 开发自动化的测试工具、后端接口Mock、安全测试。

命令行工具（适合开发/运维，自动化脚本）

• cURL： 最底层的HTTP请求模拟工具。
  • 用法示例： curl -v https://api.example.com/login -X POST -d "user=aaa&pass=123" 会输出完整的请求头和响应头、响应体。
  • 分析点： 可以快速测试接口联通性、查看重定向（-L）、检查TLS证书、设置自定义Header（-H）。
• Wget： 主要用于下载文件,但也可以分析简单请求。
• httpie （http命令）： 比curl更友好，输出格式化JSON，适合开发者测试REST API。

专业性能分析工具（侧重于性能瓶颈）

如果要分析的是页面加载速度“慢”在哪里，而不是具体的数据内容,需要用专业工具。

• Lighthouse （Chrome内置）： 在DevTools的“Lighthouse”标签页，运行后生成报告，会分析“网络请求的数量”、“请求传输大小”、“阻塞时间”等。
• WebPageTest （在线工具）： 可以输入网址，从全球多个节点模拟访问，提供详细的瀑布图、首次字节时间、请求数量、域名并行连接数等指标分析。
• Chrome DevTools的Performance（性能）面板： 可以录制一段页面交互过程，查看CPU、内存、网络请求在时间线上的精确对应关系（比如某个JS执行阻塞了图片加载）。

不同场景用什么工具？

简单实操步骤（以Chrome调试一个登录接口为例）

1. 打开开发者工具 （F12） -> 切换到 Network 标签。
2. 在页面上点击“登录”按钮。
3. 观察Network列表，找一个名字通常是 login 或 auth 的请求，显示绿色（代表成功，200）。
4. 点击该请求，查看：
   • Headers： 确认请求的URL地址、请求方法（是POST还是GET）、状态码（是200还是401？）。
   • Payload： 查看提交的账号密码是否正确。
   • Response： 查看返回的 token 或 error message。
5. 如果要模拟弱网，在Network标签顶部选择 “Fast 3G”，再次点击登录，观察请求的 Waterfall 耗时。

通过组合使用这些工具，你可以清晰地知道数据从哪里来、去了哪里、花费了多少时间、以及哪些数据被修改了。

标签： 工具使用