IE调试网页之七:使用探查器工具分析代码性能 (Windows)

简介:

  F12 开发人员工具提供了内置脚本探查器,你可以利用它分析在 Windows Internet Explorer 9 中运行的 JavaScript 代码的性能。本主题介绍此工具的功能以及如何使用它检查脚本的性能。

  分析脚本

  要开始操作,请在 Internet Explorer 9 中打开你要分析的页面。在 Internet Explorer 9 中,按 F12 以打开 F12 工具,然后单击“探查器”选项卡。

  探查器让你能够开始和停止分析,并提供了一些有关函数、函数的运行次数以及每个函数运行的时间的视图或报告。

  当你第一次单击“探查器”选项卡时,网格是空的。单击“开始分析”按钮,然后运行你要在浏览器中分析的代码。如果你要从网页的初次加载开始,请单击“刷新”以运行页面上的代码。在需要停止收集数据并查看结果时,单击“停止分析”。 要只分析某个代码部分,请单击“开始分析”,仅在浏览器中运行相应的代码部分(如从某个按钮单击调用的某个函数),然后单击“停止分析”。

  查看分析报告

  单击“停止分析”时,会从探查器工具自动生成报告。每个探查器会话都是一个独立的报告,因此,你可以运行任意次数的分析(例如,针对脚本的多个部分)或修改值,以及再次分析相同部分。默认情况下仅显示最新的探查器报告,但你可以单击“当前报告”下拉列表来查看其他报告。

  可以通过函数视图或调用树视图这两种方法查看报告。“函数”视图按照函数运行顺序显示所有函数。“调用树”视图显示函数的层次结构,以便你可以更轻松地查看父项和子项的关系。

F12 工具的包含函数视图的分析选项卡的屏幕截图

  分析数据类型

  探查器最多从分析中返回 12 列数据。在报告中,你可以右键单击列的顶部,然后添加或删除列。 下表显示了可用的数据。

列标题 显示的内容
函数 正在分析的函数的名称。
计数 调用此函数的总次数。
包含时间(毫秒) 在此函数中经过的运行时间长度。其中包括从此函数调用的子函数或外部函数中花费的时间。
包含时间百分比 在此函数中经过的运行时间百分比。其中包括从此函数调用的子函数或外部函数中花费的时间。
排除时间(毫秒) 在此函数中经过的运行时间长度。其中排除从此函数调用的子函数或外部函数中花费的时间。
排除时间百分比 在此函数中经过的运行时间百分比。其中排除从此函数调用的子函数或外部函数中花费的时间。
平均时间(毫秒) 在此函数及其子函数和外部函数中花费的平均时间。
最大时间(毫秒) 在此函数及其子函数和外部函数中花费的最大时间。
最小时间(毫秒) 在此函数及其子函数和外部函数中花费的最小时间。
函数类型 函数的类型 - DOM、用户、内置。
URL 定义此函数的源文件的 URL。
行号 此函数的开头在源代码中的行号。

  包含时间和排除时间会给出有关代码中的问题的一些迹象。包含时间提供了此函数、由其调用的或其子函数调用的任何函数的总体时间。排除时间仅显示在特定函数内实际花费的时间。有可能一个函数的包含时间非常高,而排除时间很少。例如:

function bar() {
// do some work for a 250 milliseconds
}

function foo() {
// do some work for 200 milliseconds and then call bar()
bar();
}

function main() {
//do some work for 50 milliseconds then call foo()
foo();
}

  在此示例中,首先调用 "main()" 函数(工作时间为 50 毫秒),然后调用 "foo()"(花费 200 毫秒),然后调用 "bar()"(在完成之前工作 250 毫秒)。下面的图表演示了包含时间和排除时间可能显示的值。

函数 包含时间 排除时间
main() 500 毫秒 50 毫秒
foo() 450 毫秒 200 毫秒
bar() 250 毫秒 250 毫秒

  每个函数的包含时间是运行该函数花费的时间加上运行它后面的函数(子函数)花费的所有时间。排除时间仅仅是运行当前函数花费的时间。函数链中的最后一个函数 "bar()" 显示的包含时间和排除时间是相同的。

  搜索报告和报告排序

  你可以使用 F12 工具右上角的“搜索”框在报告中搜索特定函数。在“搜索”框中键入全部或部分名称,然后单击“搜索”按钮或按 Enter。将突出显示搜索关键字的所有实例,并且报告会滚动到第一个匹配项。通过按 Enter 或 Shift + Enter,或单击“下一个”或“上一个”结果按钮,可在匹配项之间导航。

F12 工具搜索的下一个按钮和上一个按钮的图片

  在“调用树”视图中搜索时,匹配的函数上方的所有父函数都会展开。

  单击任意可见列的标题以按该数据进行排序。再次单击标题可切换升序和降序。还可在“探查器”选项卡中右键单击数据区域,单击“排序方式”,然后选择所需的列。

  在“调用树”报告视图中排序时,仅对顶级函数的值进行排序。子函数仍保留其层次结构顺序。

  复制和保存报告

  通过选择行并按 Ctrl+C,或通过右键单击并单击“复制”,可复制探查器报告中的所有或部分信息。要选择所有行,请按Ctrl + A,然后按 Ctrl+C

  要直接导出到一个逗号分隔 (.csv) 文件,请单击“导出”图标(在“开始分析”按钮旁边。)导出函数将保存所有行(包括标题),而复制和粘贴仅包括选中的行,而不包括标题。



本文转自Artwl博客园博客,原文链接:http://www.cnblogs.com/artwl/,如需转载请自行联系原作者

相关文章
|
1月前
|
数据可视化 Python Windows
使用 Python 代码在 windows 控制台打印正弦三角函数
使用 Python 代码在 windows 控制台打印正弦三角函数
25 0
|
11天前
|
缓存 开发工具 git
windows系统通过git上传代码
windows系统通过git上传代码
|
8天前
|
网络架构 Windows
windows电脑开机自动启动FRP客户端CMD代码,增加延时15秒功能
经常使用FRP客户端的都知道,FRP客户端启动时需要电脑有网络,否则会自动退出。我们的电脑在启动时,受路由器网络的影响,很多时间并不能第一时间建立起网络来,所以很容易受到网络影响,让FRP客户端自动启动发生故障。而这里的解决办法就是增加一段代码,可以延时15秒再执行。
|
1月前
|
Windows
【vscode】 VsCode终端崩溃C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe已终止,退出代码:2
【vscode】 VsCode终端崩溃C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe已终止,退出代码:2
90 1
|
1月前
|
安全 Windows
Microsoft Windows远程桌面服务远程执行代码漏洞(CVE-2019-0708)
Microsoft Windows远程桌面服务远程执行代码漏洞(CVE-2019-0708)
18 0
|
1月前
|
监控 安全 网络协议
windows服务器权限分析
windows服务器权限分析
32 1
windows服务器权限分析
|
1月前
|
安全 Linux 开发工具
Linux与Windows系统的差异分析
Linux与Windows系统的差异分析
42 0
|
1月前
|
Java Android开发 Windows
Java for Windows Missing问题原因分析以及完美解决方案
Java for Windows Missing问题原因分析以及完美解决方案
24 0
|
1月前
|
开发工具 数据安全/隐私保护 C++
windows openssl安装和基本使用(代码演示)
本文主要讲到了openssl的基本使用方法,开发环境为windows,开发工具为VS2019.本文主要是说明openssl如何使用,不介绍任何理论知识,如果有不懂的,请自行百度。个人建议下一个everything查询工具,真的很好用,比window自带的查询快了很多,可以查询自己想要的文件
269 0
windows openssl安装和基本使用(代码演示)
|
1月前
|
Linux API C++
音视频windows安装ffmpeg6.0并使用vs调试源码笔记
音视频windows安装ffmpeg6.0并使用vs调试源码笔记
140 0