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) 文件，請單擊“導出”圖標（在“開始分析”按鈕旁邊。）導出函數將保存所有行（包括標題），而復制和粘貼僅包括選中的行，而不包括標題。