Edge 开发工具（未完）

Edge 96 https://docs.microsoft.com/zh-cn/microsoft-edge/devtools-guide-chromium/

有章节未开始

入门

有章节未开始

分析运行时性能

• 在 InPrivate 模式中打开 Microsoft Edge。 InPrivate 模式可确保 Microsoft Edge 以干净的状态运行
• 与台式机和笔记本电脑相比，移动设备的 CPU 功率更小。 每当你分析页面时，都可使用 CPU 节流来模拟页面在移动设备上的表现。
  • 注释：性能菜单右边设置中可调节cpu的倍数
• 查看 FPS 图表。 每当红色条显示在 FPS上方时，这意味着帧速率下降得过低，可能破坏用户体验。 通常，绿色条越高，FPS 越高。
• CPU 图表充满颜色意味着在录制过程中 CPU 已达到极限。
• 打开 FPS 计数
  • 注释：在命令菜单中选择显示每秒帧数
• 展开重点部分。DevTools 将显示一段时间内主线程上活动的帧图表
  • 注释：应为“主要”部分
  • x 轴表示一段时间内的记录。
  • 每个条形表示一个事件。 宽条表示该事件花费了更长的时间。
  • Y 轴表示调用堆叠。 当事件堆叠在一起时，这意味着上面的事件导致了下面的事件。
• 另一种缩放方式，将聚焦在 主 部分，选择背景或事件，然后选择 W、 A、 S或 D。
• 每当显示红色三角形时，都会显示一条警告，指出可能有与事件相关的问题。
• 选择动画帧触发事件。 “摘要”面板现在将显示有关该事件的信息。 请注意“显示”链接。
  • 注释：框架部分的主要折叠框中每个任务的每一项都可以选择，和js代码相关的项会有对应的链接
  • 注释：整个性能面板分为上中下三部分，上部分“概述”包括FPS\CPU等指标，中部分称为框架包含多个折叠框、下部分为面板

有章节未开始

操作步骤

有章节未开始

性能故障排除

性能功能参考

• 在页面刷新时记录性能指标，然后在加载完成后几秒钟自动停止记录。
• 录制时强制收集垃圾（疑问）
• 启用高级画图检测工具（疑问）
• 保存录制内容
  • 注释：右键显示保存的是用户配置，保存为json文件，实际为录制的性能分析数据
• 加载录制
  • 注释：右键-》加载配置文件
• DevTools 为脚本随机分配颜色。 在上图中，请求来自脚本的函数请求染成为浅绿色。 来自另一个脚本的请求以米色表示。 深黄色代表脚本活动，紫色事件代表渲染活动。 这些深黄色和紫色事件在所有记录中都是一致的。
• 禁用 JS 示例时，只显示上图中 str 中的 Event: choose 和 Function Call 等高级事件。
• 当想查看导致最多工作的根活动时，请使用 “调用树” 面板。
  • 注释：因为根据每个活动显示了总时间
• 当想查看直接花费时间最多的活动时，请使用 “自下而上” 面板。
  • 注释：在框架选中作用域下根据活动类型进行归类计算总时间
• 当想按照记录期间发生的顺序查看活动时，请使用 “事件日志” 面板。
• 根活动是指那些导致浏览器执行的一些操作。 例如，选择网页时，浏览器将运行 Event 活动作为根活动。 Event 可能会导致处理程序运行等。
• 在 主 部分的火焰图中，根活动位于图表顶部。 在 “调用树” 和 “活动日志” 面板中，根活动是顶级项目。

有章节未开始