1. 打开开发者工具：在浏览器窗口中，点击右上角的菜单按钮（通常是一个三点图标），在下拉菜单中选择“更多工具”，然后点击“开发者工具”。或者按F12键，或者使用快捷键Ctrl+Shift+I（Windows）或Cmd+Option+I（Mac），也可以右键点击页面，选择“检查”来打开开发者工具。
2. 访问网络分析面板：在开发者工具窗口的顶部，找到“Network”标签并点击它。此时，你会看到一个列出所有网络请求的表格视图，包括请求的类型、状态码、大小、时间等详细信息。
3. 刷新页面并记录请求：在开始分析之前，建议先刷新页面以清除之前的缓存数据。可以通过点击左上角的刷新按钮或按F5键来实现。当你刷新页面后，所有的网络请求都会被记录下来。你可以根据需要筛选特定的请求类型（如XHR、CSS、JS等），或者搜索特定的URL来查找相关信息。
4. 查看详细数据：点击任意一个请求条目，可以在右侧面板中查看该请求的详细信息。在“Headers”选项卡中，可以看到请求和响应的头信息，包括请求URL、方法、状态码、请求头、响应头等。在“Preview”选项卡中，可以预览服务器返回的响应数据，尤其适用于查看JSON、HTML或图片等格式的数据。在“Response”选项卡中，显示原始响应数据，可以用于查看服务器返回的纯文本内容。在“Cookies”选项卡中，显示与请求相关的所有Cookies，包括发送和接收的Cookies。在“Timing”选项卡中，显示请求的时间分布，包括DNS查找时间、连接时间、请求发送时间、等待时间和响应接收时间，通过分析这些时间，可以帮助你识别网络性能瓶颈。
5. 模拟不同设备：如果你想测试网站在不同设备上的表现，可以使用左上角的设备模拟器来切换到不同的设备模式，这有助于确保你的网站在各种屏幕尺寸下都能良好运行。
6. 性能分析：除了基本的网络请求信息外，你还可以利用“Performance”面板进行更深入的性能分析。在这里，你可以看到各个资源加载的时间线，以及哪些部分导致了页面渲染速度变慢。
7. 使用过滤器：网络分析面板提供了过滤器栏，你可以使用这个过滤器来根据不同条件（如类型、方法、状态码等）筛选显示的请求。例如，你可以通过输入URL的一部分来文本过滤请求，或者通过点击不同类型的按钮（如“JS”、“CSS”、“XHR”等）来只显示特定类型的请求。
8. 保存和导出网络日志：可以将捕获的网络请求保存为HAR文件，以便稍后分析或与他人分享。右键点击请求列表中的任意位置，选择“保存所有为HAR文件”（Save all as HAR with content）。保存的HAR文件可以使用其他工具或再次加载到Network工具中进行分析。
