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

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

　　分析脚本

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

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

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

　　查看分析报告

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

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

　　分析数据类型

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

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

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 毫秒）。下面的图表演示了包含时间和排除时间可能显示的值。

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

　　搜索报告和报告排序

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

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

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

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

　　复制和保存报告

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

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

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