首先打开Chrome开发者工具的Network面板，通过快捷键Cmd+Option+I进入并点击“Network”选项卡，勾选“Preserve log”以保留请求记录；接着在页面加载前开启面板或刷新页面捕获完整请求流，利用Filter输入关键词或选择XHR、JS等类型筛选请求，输入method:POST可精确查找POST请求；然后点击目标请求查看Headers信息，检查Request Headers中的Authorization、Cookie及Response Headers中的状态码和Content-Type，并在Request Payload中查看POST数据；最后通过Preview和Response标签查看响应内容，使用Timing标签分析Queuing、Stalled、DNS Lookup、Waiting(TTFB)和Content Download各阶段耗时，重点关注TTFB以判断服务器处理性能。
如果您需要在Chrome浏览器中查看网页加载过程中的网络请求详情，例如检查API调用、分析资源加载时间或排查请求失败的原因，可以通过开发者工具的Network面板实现。以下是具体的操作方法。
本文运行环境：MacBook Pro，macOS Sonoma
一、打开并启用Network面板
要监控页面的网络活动，首先必须激活Network面板以开始记录请求数据。该面板能捕获所有由页面触发的HTTP/HTTPS通信。
1、使用快捷键 Cmd + Option + I 打开Chrome开发者工具。
2、点击顶部标签中的“Network”选项卡，进入网络监控界面。
3、确保勾选“Preserve log”复选框，防止页面跳转或刷新时丢失已捕获的请求记录。
二、捕获与筛选网络请求
为了快速定位目标请求，可通过过滤功能缩小查看范围，避免被大量静态资源干扰。
1、在页面加载前保持Network面板处于开启状态，或在面板激活后手动刷新页面以捕获完整请求流。
2、在Filter输入框中输入关键词，如请求的URL片段、参数名或接口路径，自动筛选匹配项。
3、点击预设的类型按钮，如 XHR、JS、CSS或Img，仅显示对应类型的请求。对于Ajax或表单提交，选择XHR可快速定位。
4、若需查看POST请求，可在Filter中输入 method:POST 进行精确过滤。
三、查看请求的头部与载荷信息
Headers标签页展示了请求和响应的元数据，包括认证信息、内容类型及服务器响应状态，是调试接口问题的关键区域。
1、在请求列表中点击目标请求，右侧将展开详细信息面板。
2、切换到“Headers”子标签，向下滚动至“Request Payload”部分，查看POST请求发送的数据内容。
3、检查“Request Headers”中的 Authorization、Cookie等字段是否正确携带。
4、在“Response Headers”中确认服务器返回的状态码（如200、404）和Content-Type等信息。
四、分析响应内容与加载性能
通过Preview和Response标签可查看服务器返回的实际数据，而Timing标签则帮助识别请求各阶段耗时，辅助性能优化。
1、点击“Preview”标签，以结构化形式查看JSON、HTML或其他可渲染的响应内容。
2、切换至“Response”标签，查看原始响应体，适用于需要复制完整文本的场景。
3、进入“Timing”标签，观察Queuing、Stalled、DNS Lookup、Waiting (TTFB) 和 Content Download等阶段的时间分布。
4、重点关注 Waiting (TTFB) 是否过长，这通常反映服务器处理速度较慢。
