性能分析引用Performance analysis reference

本页是与分析性能相关 Microsoft Edge DevTools 功能的综合参考。This page is a comprehensive reference of Microsoft Edge DevTools features related to analyzing performance.

导航到 “分析运行时性能入门”,以获得关于如何使用 Microsoft Edge DevTools 分析页面性能的指导教程。Navigate to Get Started With Analyzing Runtime Performance for a guided tutorial on how to analyze the performance of a page using Microsoft Edge DevTools.

记录性能Record performance

记录运行时性能Record runtime performance

当你想在页面运行时 (而非加载时) 分析其性能时,将记录运行时性能。Record runtime performance when you want to analyze the performance of a page as it is running, as opposed to loading.

  1. 导航到要分析的页面。Navigate to the page that you want to analyze.

  2. 在 DevTools 中打开 “性能” 工具。Open the Performance tool in DevTools.

  3. 选择 记录 (记录图标)。Choose Record (Record icon).

    Record

  4. 与页面交互。Interact with the page. DevTools 将记录由于交互而发生的所有页面活动。DevTools records all page activity that occurs as a result of your interactions.

  5. 再次选择 “记录” 或选择 “停止” 以停止录制。Choose Record again or choose Stop to stop recording.

记录加载性能Record load performance

当你想在页面加载时 (而非运行时) 分析其性能时,将记录加载时性能。Record load performance when you want to analyze the performance of a page as it is loading, as opposed to running.

  1. 导航到要分析的页面。Navigate to the page that you want to analyze.

  2. 打开 DevTools 的 “性能” 面板。Open the Performance panel of DevTools.

  3. 选择 刷新网页 (刷新网页)。Choose Refresh page (Refresh Page). DevTools 在页面刷新时记录性能指标,然后在加载完成后几秒钟自动停止记录。DevTools records performance metrics while the page refreshes and then automatically stops the recording a couple seconds after the load finishes.

    刷新页面

DevTools 会自动放大大部分活动发生的记录部分。DevTools automatically zooms in on the portion of the recording where most of the activity occurred.

页面加载录制

录制时捕获屏幕截图Capture screenshots while recording

打开 “屏幕截图” 复选框以捕获录制时每帧画面的屏幕截图。Turn on the Screenshots checkbox to capture a screenshot of every frame while recording.

屏幕截图复选框

导航到 查看屏幕截图 了解如何与屏幕截图进行交互。Navigate to View a screenshot to learn how to interact with screenshots.

录制时强制收集垃圾Force garbage collection while recording

录制页面时,选择 “回收垃圾” (“回收垃圾图标”) 以强制回收垃圾。While you are recording a page, choose Collect garbage (Collect garbage icon) to force garbage collection.

回收垃圾

显示录制设置Show recording settings

选择 “捕获设置” (捕获设置) 就可以看到更多与 DevTools 如何捕获性能记录相关的设置。Choose Capture settings (Capture settings) to expose more settings related to how DevTools captures performance recordings.

捕获设置部分

禁用 JavaScript 示例Disable JavaScript samples

默认情况下,录制的 部分会显示录音期间调用的 JavaScript 函数的详细调用栈。By default, the Main section of a recording displays detailed call stacks of JavaScript functions that were called during the recording. 禁用以下调用堆栈:To disable these call stacks:

  1. 打开 “捕获设置” 菜单。Open the Capture settings menu. 导航到 “显示录制设置”Navigate to Show recording settings.
  2. 打开 “禁用 JavaScript 示例” 复选框。Turn on the Disable JavaScript Samples checkbox.
  3. 记录页面。Take a recording of the page.

以下 2 张图显示了禁用和启用 JavaScript 样本的区别。The following 2 figures display the difference between disabling and enabling JavaScript samples. 当禁用取样时,录音的部分要短得多,因为它省略了所有的 JavaScript 调用堆栈。The Main section of the recording is much shorter when sampling is disabled, because it omits all of the JavaScript call stacks.

在录制时限制网络Throttle the network while recording

若要在录制时限制网络:To throttle the network while recording:

  1. 打开 “捕获设置” 菜单。Open the Capture settings menu. 导航到 “显示录制设置”Navigate to Show recording settings.
  2. “网络” 设置为所需的限制级别。Set Network to the desired level of throttling.

录制时限制 CPUThrottle the CPU while recording

若要在录制时限制 CPU:To throttle the CPU while recording:

  1. 打开 “捕获设置” 菜单。Open the Capture settings menu. 导航到 “显示录制设置”Navigate to Show recording settings.
  2. “CPU” 设置为所需的限制级别。Set CPU to the desired level of throttling.

限制是相对于计算机的功能而言的。Throttling is relative to the capabilities of your computer. 例如,两倍减速 选项使 CPU 运行速度比正常情况下慢两倍。For example, the 2x slowdown option makes your CPU operate 2 times slower than normal. DevTools 并不能真正模拟移动设备的 CPU,因为移动设备的体系结构与台式机和笔记本电脑的体系结构截然不同。DevTools do not truly simulate the CPUs of mobile devices, because the architecture of mobile devices is very different from that of desktops and laptops.

启用高级画图检测工具Turn on advanced paint instrumentation

查看详细画图检测工具:To view detailed paint instrumentation:

  1. 打开 “捕获设置” 菜单。Open the Capture settings menu. 导航到 “显示录制设置”Navigate to Show recording settings.
  2. 选中 “启用画图检测工具 (慢速)” 复选框。Check the Enable advanced paint instrumentation (slow) checkbox.

若要了解如何与画图信息交互,请导航到 “视图图层”“视图绘制探查器”To learn how to interact with the paint information, navigate to View layers and View paint profiler.

保存录制内容Save a recording

若要保存录制文件,请打开上下文菜单 (右键单击),然后选择 “保存配置文件”To save a recording, open the contextual menu (right-click), and choose Save Profile.

保存配置文件

加载录制Load a recording

若要加载录制文件,请打开上下文菜单 (右键单击),然后选择 “加载配置文件”To load a recording, open the contextual menu (right-click), and choose Load Profile.

加载配置文件

清除上一记录Clear the previous recording

录制后,选择 清除录制 (清除录制图标) 以从 性能 面板中清除录制。After making a recording, choose Clear recording (Clear recording icon) to clear that recording from the Performance panel.

清除录制

分析性能录制Analyze a performance recording

录制运行性能录制加载性能 之后, 性能 面板将提供许多数据以分析刚发生的操作的性能。After you record runtime performance or record load performance, the Performance panel provides a lot of data for analyzing the performance of what just happened.

选择录制的一部分Select a portion of a recording

“概述” 上向左或向右拖动鼠标,以选择一段录音的一部分。Drag your mouse left or right across the Overview to select a portion of a recording. 概述 是包含 FPSCPUNET 图表的部分。The Overview is the section that contains the FPS, CPU, and NET charts.

拖动鼠标在概述上进行缩放

若要使用键盘选择一部分:To select a portion using the keyboard:

  1. 选择 部分的背景或它旁边的任何分区,例如 交互网络GPUChoose the background of the Main section, or any of the sections next to it, such as Interactions, Network, or GPU. 此键盘工作流仅在其中一个分区为焦点时有效。This keyboard workflow only works when one of these sections is in focus.
  2. 使用 WASD 键分别进行放大、向左移动、缩小和向右移动。Use the W, A, S, D keys to zoom in, move left, zoom out, and move right, respectively.

若要使用触控板选择一部分,请完成以下操作。To select a portion using a trackpad, complete the following actions.

  1. 将鼠标悬停在 “概述” 部分或 “详细信息” 上。Hover your mouse over the Overview section or the Details section. 概述 部分是包含 FPSCPUNET 图表的区域。The Overview section is the area containing the FPS, CPU, and NET charts. 详细信息 部分是包含 部分、交互 部分等的区域。The Details section is the area containing the Main section, the Interactions section, and so on.
  2. 使用两根手指,向上轻扫进行缩小,向左轻扫向左移动,向下轻扫进行放大,向右轻扫向右移动。Using two fingers, swipe up to zoom out, swipe left to move left, swipe down to zoom in, and swipe right to move right.

若要在 区域或任何一个邻区滚动长火焰图,请选择并按住鼠标同时上下拖动。To scroll a long flame chart in the Main section or any of the neighbors, choose and hold while dragging up and down. 向左和向右拖动,移动录音中所选的部分。Drag left and right to move what portion of the recording is chosen.

搜索活动Search activities

选择 Control+F (Windows,Linux) 或 Command+F (macOS) 以打开性能面板底部的搜索框。Select Control+F (Windows, Linux) or Command+F (macOS) to open the search box at the bottom of the Performance panel.

搜索框

导航与查询匹配的活动:To navigate activities that match your query:

  • 使用 上一步 (上一步) 和 下一步 (下一步) 按钮。Use the Previous (Previous) and Next (Next) buttons.
  • 选择 Shift+Enter 来选择上一步或 Enter 来选择下一步。Select Shift+Enter to select the previous or Enter to select the next.

修改查询设置:To modify query settings:

  • 选择 区分大小写 (区分大小写),使查询区分大小写。Choose Case sensitive (Case sensitive) to make the query case sensitive.
  • 选择 正则表达式 (正则表达式) ,在查询中使用正则表达式。Choose Regex (Regex) to use a regular expression in your query.

若要隐藏搜索框,请选择 “取消”To hide the search box, choose Cancel.

查看主线程活动View main thread activity

使用 部分查看出现在页面主线程上的活动。Use the Main section to view activity that occurred on the main thread of the page.

主要部分

选择一个事件以在 “摘要” 面板中查看更多相关信息。Choose an event to view more information about it in the Summary panel. DevTools 概括了所选事件。DevTools outlines the selected event.

更多关于摘要面板中匿名函数的信息。

DevTools 使用火焰图表示主线程活动。DevTools represents main thread activity with a flame chart. x 轴表示一段时间内的记录。The x-axis represents the recording over time. Y 轴表示调用堆叠。The y-axis represents the call stack. 顶部事件将导致其下方事件。The events on top cause the events below it.

火焰图

在上一图中,click 事件在 53 行的 activitytabs.js 中造成了 Function CallIn the previous figure, a click event caused a Function Call in activitytabs.js on line 53. Function Call 下面,查看匿名函数运行。Below Function Call, review that an anonymous function was run. 匿名函数请求 Minor GC的请求 wait的请求 aThe anonymous function requested a, which requested wait, which requested Minor GC.

DevTools 为脚本随机分配颜色。DevTools assigns scripts random colors. 在上图中,请求来自脚本的函数请求染成为浅绿色。In the previous figure, function requests from one script are colored light green. 来自另一个脚本的请求以米色表示。Requests from another script are colored beige. 深黄色代表脚本活动,紫色事件代表渲染活动。The darker yellow represents scripting activity, and the purple event represents rendering activity. 这些深黄色和紫色事件在所有记录中都是一致的。These darker yellow and purple events are consistent across all recordings.

若要隐藏 JavaScript 请求的详细火焰图,请导航到 禁用 JavaScript 事例Navigate to Disable JavaScript samples if you want to hide the detailed flame chart of JavaScript requests. 禁用 JS 示例时,只显示上图中 str 中的 Event: chooseFunction Call 等高级事件。When JS samples are disabled, only high-level events such as Event: choose and Function Call from the previous figure str displayed.

查看表格中的活动View activities in a table

录制页面后,无需仅依靠 “主” 部分来分析活动。After recording a page, you do not need to rely solely on the Main section to analyze activities. DevTools 还提供了三种用于分析活动的表格视图。DevTools also provides three tabular views for analyzing activities. 每个视图提供对待活动的不同视角:Each view gives you a different perspective on the activities:

  • 当想查看导致最多工作的根活动时,请使用 “调用树” 面板。When you want to view the root activities that cause the most work, use the Call Tree panel.
  • 当想查看直接花费时间最多的活动时,请使用 “自下而上” 面板。When you want to view the activities where the most time was directly spent, use the Bottom-Up panel.
  • 当想按照记录期间发生的顺序查看活动时,请使用 “事件日志” 面板。When you want to view the activities in the order in which they occurred during the recording, use the Event Log panel.

备注

接下来的三个部分均指向相同的演示。The next three sections all refer to the same demo. “活动选项卡演示” 中自己运行演示。Run the demo yourself at Activity Tabs Demo.

根活动Root activities

下面就 “调用树” 面板、“自下而上” 面板和 “事件日志” 面板中提到的 “根活动” 概念进行说明。Here is an explanation of the root activities concept that is mentioned in the Call Tree panel, Bottom-Up panel, and Event Log panel.

根活动是指那些导致浏览器执行的一些操作。Root activities are those which cause the browser to do some work. 例如,选择网页时,浏览器将运行 Event 活动作为根活动。For example, when you choose a webpage, the browser runs an Event activity as the root activity. Event 可能会导致处理程序运行等。That Event may cause a handler to run, and so on.

部分的火焰图中,根活动位于图表顶部。In the flame chart of the Main section, root activities are at the top of the chart. “调用树”“活动日志” 面板中,根活动是顶级项目。In the Call Tree and Event Log panels, root activities are the top-level items.

导航到 “调用树” 面板,查看根活动示例。Navigate to the Call Tree panel for an example of root activities.

调用树面板The Call Tree panel

使用 “呼叫树” 查看哪些 “根活动” 导致的工作量最大。Use the Call Tree panel to view which root activities cause the most work.

“呼叫树” 面板仅在录制的选定部分期间显示活动。The Call Tree panel only displays activities during the selected portion of the recording. 导航到 “请选择记录的一部分” 以了解如何选择部分。Navigate to Select a portion of a recording to learn how to select portions.

调用树面板

在上图中,“活动” 列中的顶级项目,如 Evaluate ScriptParse HTML 是根活动。In the previous figure, the top-level of items in the Activity column, such as Evaluate Script and Parse HTML are root activities. 嵌套表示调用堆栈。The nesting represents the call stack. 例如,在上图中,导致 Compile Script(anonymous)Evaluate ScriptParse HTMLFor example, in the previous figure, Parse HTML which caused Evaluate Script which caused Compile Script and (anonymous).

“自我时间” 表示直接用于该活动的时间。Self Time represents the time directly spent in that activity. “总时间” 表示花在该活动或任何子项上的时间。Total Time represents the time spent in that activity or any of the children.

选择 “自我时间”“总时间”“活动”,按该列对表进行排序。Choose Self Time, Total Time, or Activity to sort the table by that column.

使用 “筛选器” 文本框按活动名称筛选事件。Use the Filter text box to filter events by activity name.

默认情况下,“分组” 菜单设置为 “无分组”By default the Grouping menu is set to No Grouping. 使用 “分组” 菜单,根据各种条件对活动表进行排序。Use the Grouping menu to sort the activity table based on various criteria.

选择 “显示最重堆叠 (显示最重堆叠) 以显示 “活动“ 表右侧的另一个表。Choose Show Heaviest Stack (Show Heaviest Stack) to reveal another table to the right of the Activity table. 选择一个活动来填充 最重堆叠 表。Choose an activity to populate the Heaviest Stack table. “最重堆栈” 表显示所选活动的子项需要最长的运行时间。The Heaviest Stack table displays which children of the selected activity took the longest time to run.

自下而上面板The Bottom-Up panel

使用 “自下而上” 面板查看直接采用聚合时间的活动。Use the Bottom-Up panel to view which activities directly took up the most time in aggregate.

“自下向上” 面板仅在录制的选定部分期间显示活动。The Bottom-Up panel only displays activities during the selected portion of the recording. 导航到 “请选择记录的一部分” 以了解如何选择部分。Navigate to Select a portion of a recording to learn how to select portions.

自下而上面板

在前图的 分区火焰图中,导航到几乎实践上所有时间都花费在运行 Parse HTML 上。In the Main section flame chart of the previous figure, navigate to that almost practically all of the time was spent running Parse HTML. 前图中 “自下而上” 面板中最上面的活动是 Parse HTMLThe top activity in the Bottom-Up panel of the previous figure is Parse HTML. 导航到 “自下向上” 面板,接下来最昂贵的活动是 LayoutNavigate to the Bottom-Up panel, the next most expensive activity is Layout.

“自我时间” 列表示跨越发生的所有直接用于该活动的聚合时间。The Self Time column represents the aggregated time spent directly in that activity, across all of the occurrences.

“总时间” 列表示花在该活动或任何子项上的聚合时间。The Total Time column represents aggregated time spent in that activity or any of the children.

事件日志面板The Event Log panel

使用 “事件日志” 面板按记录期间发生的顺序查看活动。Use the Event Log panel to view activities in the order in which they occurred during the recording.

“事件日志” 面板仅显示录制的选定部分期间的活动。The Event Log panel only displays activities during the selected portion of the recording. 导航到 “请选择记录的一部分” 以了解如何选择部分。Navigate to Select a portion of a recording to learn how to select portions.

事件日志面板

“开始时间” 列表示活动开始时与录制开始相对的点。The Start Time column represents the point at which that activity started, relative to the start of the recording. 例如,上图中所选项目 175.7 ms 的开始时间意味着录制开始 175.7 毫秒后活动开始。For example, the start time of 175.7 ms for the selected item in the previous figure means that activity started 175.7 ms after the recording started.

“自我时间” 列表示直接用于该活动的时间。The Self Time column represents the time spent directly in that activity.

“总时间” 列表示直接用于该活动或任何子项中的时间。The Total Time columns represents time spent directly in that activity or in any of the children.

选择 “开始时间”“自我时间”“总时间” 按该列对表进行排序。Choose Start Time, Self Time, or Total Time to sort the table by that column.

使用 “筛选” 文本框按名称筛选活动。Use the Filter text box to filter activities by name.

使用 “持续时间” 菜单筛选出所有耗时少于 1 毫秒或 15 毫秒的活动。Use the Duration menu to filter out any activities that took less than 1 ms or 15 ms. 默认情况下,“持续时间” 菜单设置为 “全部”,这意味着会显示所有活动。By default the Duration menu is set to All, meaning all activities are shown.

禁用 加载脚本渲染绘制 复选框以筛选这些类别中的所有活动。Disable the Loading, Scripting, Rendering, or Painting checkboxes to filter out all activities from those categories.

查看 GPU 活动View GPU activity

GPU 部分查看 GPU 活动。View GPU activity in the GPU section.

GPU 部分

查看光栅活动View raster activity

光栅 部分中查看光栅活动。View raster activity in the Raster section.

光栅部分

查看交互View interactions

使用 “交互” 部分查找和分析在录制期间发生的用户交互。Use the Interactions section to find and analyze user interactions that happened during the recording.

交互部分

交互底部的红线表示等待主线程所花费的时间。A red line at the bottom of an interaction represents time spent waiting for the main thread.

选择一个交互以在 “摘要” 面板中查看更多相关信息。Choose an interaction to view more information about it in the Summary panel.

分析每秒帧数 (FPS)Analyze frames per second (FPS)

DevTools 提供了许多方法,以分析每秒帧数:DevTools provides numerous ways to analyze frames per second:

FPS 图表The FPS chart

FPS 图表提供整个录制期间的帧率概况。The FPS chart provides an overview of the frame rate across the duration of a recording. 一般来说,绿条越高,帧率越好。In general, the higher the green bar, the better the frame rate.

FPS 图上方的红色条形是警告,说明帧率降得太低,很可能会损害用户的体验。A red bar above the FPS chart is a warning that the frame rate dropped so low that it probably harmed the user's experience.

FPS 图表

”帧“ 部分The Frames section

“帧” 部分会准确告知特定帧所需的时间。The Frames section tells you exactly how long a particular frame took.

将鼠标悬停在帧上,可以查看有关该帧的更多信息的工具提示。Hover on a frame to view a tooltip with more information about it.

鼠标悬停在框架上

选择帧以在 “摘要” 面板中查看更多有关帧的信息。Choose a frame to view more information about the frame in the Summary panel. DevTools 用蓝色勾勒出所选框架的轮廓。DevTools outlines the selected frame in blue.

在 摘要 面板中查看帧

查看网络请求View network requests

展开 “网络” 部分,以查看录制期间发生的网络请求瀑布图。Expand the Network section to view a waterfall of network requests that occurred during the recording.

网络部分

请求的颜色编码如下:Requests are color-coded as follows:

  • HTML: 蓝色HTML: Blue
  • CSS: 紫色CSS: Purple
  • JS: 黄色JS: Yellow
  • 图像: 绿色Images: Green

选择一个请求以在 “摘要” 面板中查看更多相关信息。Choose a request to view more information about it in the Summary panel. 例如,在上图中,“摘要” 正在显示更多关于在 “网络” 部分选择的蓝色请求的信息。For example, in the previous figure, the Summary panel is displaying more information about the blue request that is selected in the Network section.

在请求的左上方有一个深蓝色的方块,意味着它是一个优先级较高的请求。A darker-blue square in the top-left of a request means it is a higher-priority request. 浅蓝色的方块表示优先级较低。A lighter-blue square means lower-priority. 比如上图中,蓝色所选的请求是优先级较高的,而下方绿色的请求为优先级较低的。For example, in the previous figure, the blue, selected request is higher-priority, and the green one below it is lower-priority.

在下图中的第1个图中,www.bing.com 的要求用左边的一条线表示,中间是有暗部和亮部的条形,右边是一条线。In the 1st of the following figures, the request for www.bing.com is represented by a line on the left, a bar in the middle with a dark portion and a light portion, and a line on the right. 在下面的第2个数字中,显示了同一请求在 “网络” 工具的 “计时” 面板中的相应表示。In the 2nd of the following figures shows the corresponding representation of the same request in the Timing panel of the Network tool. 下面是这两种表示形式如何相互映射:Here is how these two representations map to each other:

  • 左行是到事件的 Connection Start 组的所有内容 (包括)。The left line is everything up to the Connection Start group of events, inclusive. 换言之,它是 Request Sent 之前的所有内容 (独占)。In other words, it is everything before Request Sent, exclusive.
  • 条形图的浅部分为 Request SentWaiting (TTFB)The light portion of the bar is Request Sent and Waiting (TTFB).
  • 条形图的深色部分为 Content DownloadThe dark portion of the bar is Content Download.
  • 右行基本上是等待主线程所花的时间。The right line is essentially time spent waiting for the main thread. 这未在 “计时” 中表示。This is not represented in the Timing panel.

查看内存指标View memory metrics

打开 “内存” 复选框以查看上次记录中的内存指标。Turn on the Memory checkbox to view memory metrics from the last recording.

内存复选框

DevTools 在 “摘要” 面板上方显示新的 “内存” 图表。DevTools displays a new Memory chart, above the Summary panel. NET 图表下方还有一个新的图表,称为 “HEAP”There is also a new chart below the NET chart, called HEAP. “HEAP” 图表提供的信息与 “内存” 表中的 “JS Heap” 行相同。The HEAP chart provides the same information as the JS Heap line in the Memory chart.

内存指标

图表上的彩色线条会映射到图表上方的彩色复选框上。The colored lines on the chart map to the colored checkboxes above the chart.
禁用复选框以在图表中隐藏该类别。Disable a checkbox to hide that category from the chart.

图表只显示当前选择的记录区域。The chart only displays the region of the recording that is currently selected. 例如,在上一个图中, 内存 图表仅显示从 400 毫秒标记上下到 1750 毫秒标记左右的内存使用情况。For example, in the previous figure, the Memory chart is only showing memory usage from around the 400 ms mark to the 1750 ms mark.

查看部分录制的持续时间View the duration of a portion of a recording

当分析像 网络 或者 这样的部分时,有时你需要更精确地估计某些事件花了多长时间。When analyzing a section like Network or Main, sometimes you need a more precise estimate of how long certain events took. 按住 Shift,选择并按住,然后向左或向右拖动以选择录音的一部分。Hold Shift, choose and hold, and drag left or right to select a portion of the recording. 在所选内容底部,DevTools 显示该部分所话费的时间。At the bottom of your selection, DevTools shows how long that portion took.

查看部分录制的持续时间

查看屏幕截图View a screenshot

导航到 “录制时捕捉屏幕截图”,了解如何开启屏幕截图。Navigate to Capture screenshots while recording to learn how to turn on screenshots.

将鼠标悬停在 “概述”,可以查看该记录短片的页面截图。Hover on the Overview to view a screenshot of how the page looked during that moment of the recording. “概述” 是包含 CPUFPSNET 图表的部分。The Overview is the section that contains the CPU, FPS, and NET charts.

查看屏幕截图

还可以在 “框架” 部分选择一个框架来查看屏幕截图。You may also view screenshots by choosing a frame in the Frames section. DevTools 在 “摘要” 面板中显示小版本的截图。DevTools displays a small version of the screenshot in the Summary panel.

在摘要面板中查看屏幕截图

“摘要” 面板中选择缩略图来放大截图。Choose the thumbnail in the Summary panel to zoom in on the screenshot.

从摘要面板中放大屏幕截图

查看图层信息View layers information

查看框架的高级图层信息:To view advanced layers information about a frame:

  1. 启用高级画图检测工具Turn on advanced paint instrumentation.

  2. “框架” 部分选择一个框架。Choose a frame in the Frames section. DevTools 将在 “事件日志” 面板旁边的新 “图层” 面板中显示关于图层的信息。DevTools displays information about the layers in the new Layers panel, next to the Event Log panel.

    图层窗格

将鼠标悬停在图层上,在图中高亮显示。Hover on a layer to highlight it in the diagram.

突出显示图层

若要移动图表:To move the diagram:

  • 选择 “平移模式” (“平移模式”) 沿 X 轴和 Y 轴移动。Choose Pan Mode (Pan Mode) to move along the X and Y axes.
  • 选择 “旋转模式” (“旋转模式”) 沿 Z 轴旋转。Choose Rotate Mode (Rotate Mode) to rotate along the Z axis.
  • 选择 “重置转换” (“重置转换”) 可以将图重置到原始位置。Choose Reset Transform (Reset Transform) to reset the diagram to the original position.

查看绘图探查器View paint profiler

查看有关绘图事件的高级信息:To view advanced information about a paint event:

  1. 打开Turn on.

  2. 部分选择 绘图 事件。Choose a Paint event in the Main section.

    绘图探查器面板

使用 "渲染" 工具分析渲染性能Analyze rendering performance with the Rendering tool

使用 “渲染” 面板的功能来帮助可视化页面的渲染性能。Use the features of the Rendering panel to help visualize the rendering performance of your page.

若要打开 “渲染” 工具:To open the Rendering tool:

  1. 打开“命令”菜单Open the Command Menu.

  2. 开始键入 Rendering 并选择 Show RenderingStart typing Rendering and select Show Rendering. DevTools 会在 DevTools 窗口的底部显示渲染工具。DevTools displays the Rendering tool at the bottom of your DevTools window.

    渲染工具

使用 FPS 计数实时查看每秒帧数。View frames per second in realtime with the FPS meter

FPS 计数 是出现在视区右上角的叠加。The FPS meter is an overlay that appears in the top-right corner of your viewport. 它提供了页面运行时 FPS 的实时估计。It provides a realtime estimate of FPS as the page runs. 若要打开 FPS 计数:To open the FPS meter:

  1. 打开 渲染 工具。Open the Rendering tool. 使用 “渲染” 工具分析渲染性能Analyze rendering performance with the Rendering tool.

  2. 打开 FPS 计数 复选框。Turn on the FPS Meter checkbox.

    FPS 计数

使用“画图闪烁”实时查看画图事件View painting events in realtime with Paint Flashing

使用“画图闪烁”可实时查看页面上的所有画图事件。Use Paint Flashing to get a realtime view of all paint events on the page. 每当重新绘制页面的一部分时,DevTools 就会用绿色勾勒出该部分的轮廓。Whenever a part of the page gets re-painted, DevTools outlines that section in green.

若要打开“画图闪烁”,请完成以下操作。To turn on Paint Flashing, complete the following actions.

  1. 打开 渲染 工具。Open the Rendering tool. 导航到 使用“绘制”工具分析绘制性能Navigate to Analyze rendering performance with the Rendering tool.

  2. 启用 “画图闪烁” 复选框。Turn on the Paint Flashing checkbox.

    绘画闪烁

使用 “图层边框” 查看图层的叠加View an overlay of layers with Layer Borders

使用 “图层边框” 可查看页面顶部的图层边框和图块的叠加。Use Layer Borders to view an overlay of layer borders and tiles on top of the page.

若要打开“图层边框”,请完成以下操作,To turn on Layer Borders, complete the following actions,

  1. 打开 渲染 工具。Open the Rendering tool. 导航到 使用“绘制”工具分析绘制性能Navigate to Analyze rendering performance with the Rendering tool.

  2. 打开 “图层边框” 复选框。Turn on the Layer Borders checkbox.

    图层边框

导航到 debug_colors.cc 中的批注,了解颜色编码的说明。Navigate to the comments in debug_colors.cc for an explanation of the color-codings.

实时查找滚动性能问题Find scroll performance issues in realtime

使用滚动性能问题来识别页面中具有与滚动相关的事件监听器的元素,这些元素可能会损害页面的性能。Use Scrolling Performance Issues to identify elements of the page that have event listeners related to scrolling that may harm the performance of the page.
DevTools 概述了茶色中潜在的问题元素。DevTools outlines the potentially-problematic elements in teal.

若要查看滚动性能问题,请完成以下操作。To view scroll performance issues, complete the following actions.

  1. 打开 渲染 工具。Open the Rendering tool. 导航到 使用“绘制”工具分析绘制性能Navigate to Analyze rendering performance with the Rendering tool.

  2. 打开 “滚动性能问题” 复选框。Turn on the Scrolling Performance Issues checkbox.

    滚动性能问题表明,非层视区的限制对象可能会损害滚动性能

联系 Microsoft Edge 开发工具团队Getting in touch with the Microsoft Edge DevTools team

使用以下选项讨论帖子中的新功能和更改,或与 DevTools 相关的任何其他内容。Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • 使用“发送反馈”图标发送反馈,或在 DevTools 中选择Alt+Shift+I \ (Windows、Linux) 或 Option+Shift+I \ (macOS)。Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • 发推 @EdgeDevToolsTweet at @EdgeDevTools.
  • 我们想要的 Web 提交建议。Submit a suggestion to The Web We Want.
  • 若要提交有关本文的错误,请使用以下“反馈” 部分。To file bugs about this article, use the following Feedback section.

Microsoft Edge DevTools 中的“发送反馈”图标

备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
原始页面位于此处,由 Kayce Basques\(Chrome DevTools & Lighthouse 的技术作家\)撰写。The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。This work is licensed under a Creative Commons Attribution 4.0 International License.