1. 打开开发者工具：在Chrome浏览器中打开需要调试的网页，右键点击页面空白处，选择“检查”或按F12键。此时会弹出开发者工具窗口，默认显示“元素”面板。
2. 进入网络面板：在开发者工具窗口中，点击顶部的“Network”标签。若首次加载页面，需刷新页面以捕获所有网络请求。网络面板将显示当前页面的所有请求列表，包括JS、CSS、图片等资源。
3. 过滤请求类型：在网络面板左侧的筛选框中，可勾选“XHR”（XMLHttpRequest）过滤Ajax请求，或勾选“Doc”仅查看文档资源。也可在右上角的搜索框输入关键词（如URL片段），快速定位特定请求。
4. 查看请求详情：点击任意请求条目，右侧会显示详细信息。在“Headers”标签下，可查看请求和响应的HTTP头信息，包括状态码、Cookie、缓存策略等。在“Preview”标签下，可直接查看响应内容（如JSON数据）。在“Timing”标签下，可分析请求的耗时分布（如DNS解析、TCP连接、数据传输时间）。
5. 案例：调试API接口：假设某网页通过Ajax请求获取用户数据，但返回结果异常。可在网络面板中过滤“XHR”请求，找到对应的API请求。点击请求后，在“Headers”中检查请求方法（GET/POST）和参数是否正确。若怀疑服务器问题，可复制请求URL到Postman中单独测试。在“Response”中查看返回的JSON数据，确认是否符合预期格式。若返回错误状态码（如500），可结合后端日志排查问题。
6. 案例：优化页面性能：加载网页时发现速度过慢，可在网络面板中按“Waterfall”视图（垂直时间线）查看资源加载顺序。发现多个JS文件依次加载，导致长时间阻塞渲染。可将关键JS文件设置为异步加载，或合并压缩资源。在“Timing”中发现图片资源压缩后可节省大量带宽，遂启用CDN加速并优化图片格式。重启页面后，网络面板显示总加载时间减少30%，首屏渲染速度显著提升。
