核心功能特性
缓冲区使用率可视化
以环形进度条和柱状图的形式实时展示Resource Timing缓冲区的使用率。颜色从绿色渐变到红色,直观反映缓冲区的饱和程度。支持鼠标悬停查看详细数值,包括已使用槽位、总槽位、剩余可用空间等关键指标。
可调缓冲区大小
允许开发者动态调整performance.setResourceTimingBufferSize()的参数值,模拟不同大小的缓冲区环境。支持从最小150到最大10000的范围调节,帮助开发者测试应用在不同缓冲区配置下的行为表现。
模拟资源加载
内置资源加载模拟器,可批量生成图片、脚本、样式表、XHR/Fetch请求等多种类型的网络资源。支持自定义加载延迟、并发数量和资源大小,无需实际网络请求即可快速填充缓冲区,用于测试缓冲区满事件的触发逻辑。
按类型统计
自动将缓冲区中的资源按照类型分类统计,包括script、link、img、css、fetch、xmlhttprequest、font等类别。以饼图和表格两种形式展示各类型资源的数量和占比,帮助开发者快速定位资源加载的瓶颈所在。
导出CSV
一键将缓冲区中的所有资源时序数据导出为CSV文件。导出的数据包含资源名称、类型、开始时间、结束时间、持续时间、传输大小等完整字段,方便在Excel、Google Sheets等工具中进行进一步的数据分析和可视化处理。
自动刷新
支持设定自动刷新间隔(1秒至60秒可选),工具会定期重新读取performance.getEntriesByType('resource')的最新数据并更新界面显示。适用于需要长时间监控资源加载行为的调试场景。
排序与分页
资源列表支持按名称、类型、持续时间、传输大小等多个字段进行升序或降序排序。当资源数量较多时,自动启用分页功能,每页显示可配置(默认20条),确保大量数据下的流畅浏览体验。
事件日志
实时记录并展示所有与Resource Timing缓冲区相关的浏览器事件,包括bufferfull事件、缓冲区大小调整事件、资源条目添加事件等。日志带有时间戳和颜色标识,便于开发者追踪事件触发的时序和频率。
缓冲区满警告
当检测到缓冲区即将满载(使用率超过80%)或已满时,通过页面顶部横幅、声音提示和浏览器通知三种方式同时发出警告。警告信息中包含建议的应对措施,帮助开发者及时响应缓冲区溢出风险。
UD5工具箱