edge浏览器如何录制网页操作或进行性能分析 Edge浏览器开发者工具性能录制

首先使用Edge开发者工具的性能面板录制页面操作，通过启用高级设置自定义采集数据类型，结合User Timing API标记关键操作，并可导出JSON格式数据供离线分析。

如果您在调试网页时需要分析页面加载过程中的性能瓶颈或记录用户操作流程，可以利用Edge浏览器内置的开发者工具进行录制和分析。通过性能面板，您能够捕获页面运行期间的CPU使用、渲染活动、脚本执行等详细信息。

本文运行环境：Dell XPS 13，Windows 11

一、使用性能面板录制网页操作

性能面板允许您录制一段时间内的浏览器行为，包括JavaScript执行、布局重排、样式计算等关键指标，帮助识别导致卡顿或延迟的操作。

1、打开Edge浏览器，导航至目标网页。

2、按下 F12 或右键选择“检查”以打开开发者工具。

3、切换到顶部的“性能”选项卡。

4、点击左上角的圆形录制按钮，或按 Ctrl+E 开始录制。

5、在页面上执行所需操作，例如点击按钮、滚动页面或表单提交。

6、操作完成后，再次点击录制按钮或按 Esc 停止录制。

7、查看生成的时间线图表，分析各阶段耗时情况。

二、配置性能录制参数以优化数据采集

通过自定义录制设置，您可以筛选关注的数据类型，减少无关信息干扰，提高分析效率。

1、在“性能”面板中，点击左上角的齿轮图标进入设置。

2、勾选“启用高级设置”以显示更多选项。

3、在“记录配置”区域，选择要采集的数据类别，如CPU、内存、网络、帧率等。

4、可启用“屏幕截图”功能，以便在时间轴中查看每帧画面变化。

无界AI

一站式AI创作、搜索、分享服务

233

查看详情

5、设置完成后开始录制，确保所选参数符合当前诊断需求。

三、使用用户体验录制功能（User Timing API）标记关键操作

通过在代码中插入性能标记，您可以精确追踪特定函数或交互的执行时间，便于定位性能问题根源。

1、在开发者工具的“控制台”中输入以下代码来创建开始标记：

performance.mark('start-action')

2、执行目标操作后，输入结束标记：

performance.mark('end-action')

3、使用 measure 方法记录两个标记之间的耗时：

performance.measure('action-duration', 'start-action', 'end-action')

4、切换至“性能”面板并刷新页面，录制过程中将包含这些自定义标记。

四、导出性能数据供进一步分析

将录制结果保存为文件，可用于离线分析或与团队成员共享诊断信息。

1、在完成性能录制后，点击左上角的“保存”图标（软盘形状）。

2、选择本地存储路径，将录制数据保存为 .json 格式文件。

3、可通过“导入”功能在另一台设备上加载该文件进行对比分析。

以上就是edge浏览器如何录制网页操作或进行性能分析 Edge浏览器开发者工具性能录制的详细内容，更多请关注php中文网其它相关文章！