IE調試網頁之七：使用探查器工具分析代碼效能 (Windows)

　　F12 開發人員工具提供了內建指令碼探查器，你可以利用它分析在 Windows Internet Explorer 9 中啟動並執行 JavaScript 代碼的效能。本主題介紹此工具的功能以及如何使用它檢查指令碼的效能。

　　分析指令碼

　　要開始操作，請在 Internet Explorer 9 中開啟你要分析的頁面。在 Internet Explorer 9 中，按 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，或單擊“下一個”或“上一個”結果按鈕，可在匹配項之間導航。

　　在“調用樹”視圖中搜尋時，匹配的函數上方的所有父函數都會展開。

　　單擊任意可見列的標題以按該資料進行排序。再次單擊標題可切換升序和降序。還可在“探查器”選項卡中按右鍵資料區域，單擊“排序方式”，然後選擇所需的列。

　　在“調用樹”報表檢視中排序時，僅對頂級函數的值進行排序。子函數仍保留其階層順序。

　　複製和儲存報告

　　通過選擇行並按 Ctrl+C，或通過按右鍵並單擊“複製”，可複製探查器報告中的所有或部分資訊。要選擇所有行，請按Ctrl + A，然後按 Ctrl+C。

　　要直接匯出到一個逗號分隔 (.csv) 檔案，請單擊“匯出”表徵圖（在“開始分析”按鈕旁邊。）匯出函數將儲存所有行（包括標題），而複製和粘貼僅包括選中的行，而不包括標題。