详情介绍
1. 打开开发者工具与进入Network面板:使用快捷键`Ctrl+Shift+I`(Windows系统)或`Cmd+Option+I`(Mac系统),或者在浏览器右上角点击三个点图标,选择“更多工具”-“开发者工具”,打开开发者工具面板。在开发者工具面板中,找到并点击顶部的“Network”标签,进入网络请求监控界面。
2. 捕获网络请求:按`F5`键或点击浏览器地址栏中的刷新按钮,刷新当前页面。此时,Network面板会列出当前页面加载过程中所有的网络请求。
3. 查看请求详情:点击某个具体的请求,可以在右侧面板中查看该请求的详细信息,包括请求头、响应头、请求体和响应体等。
4. 过滤和排序请求:在Network面板中,可以根据需要对请求进行过滤和排序。例如,可以只查看特定类型的请求(如XHR、CSS、JS等),或者按照时间、大小等对请求进行排序,以便更方便地分析网络请求情况。
5. 使用瀑布图分析:Network面板底部的瀑布图以图形化的方式展示了每个网络请求的时间轴分布情况,不同的颜色块表示不同的阶段,如阻塞时间、DNS查询时间、连接建立时间、请求发送时间、等待响应时间、响应接收时间和DOM解析时间等,通过观察瀑布图可直观了解各请求的时间消耗情况,找出性能瓶颈。
6. 模拟网络环境:在Network面板右上角的下拉菜单中,可以选择模拟不同的网络速度,如离线、慢速3G、快速3G等,测试页面在不同网络条件下的表现,帮助优化页面性能。
7. 设置断点调试:可在XHR/Fetch请求上设置断点,当请求发出时会暂停代码执行,方便深入调试,查看请求的具体参数和执行过程。
8. 保存和分享请求数据:点击右上角的菜单按钮,选择“保存所有内容为HAR文件”,可将捕获的网络请求和响应信息保存为HAR文件,便于后续分析或与他人分享;也可选中特定请求行,右键单击并选择“复制”→“复制所有内容”,将所选请求的详细信息复制到剪贴板中,但二进制文件的数据部分可能无法准确复制。