ie11 開發者工具



http://blog.csdn.net/binyao02123202/article/details/41944931

簡介

使用 F12 開發人員工具，你可以調試、測試網頁並加快其速度。無論你是需要微調你的 CSS 佈局還是查找內存泄漏，你都能在此處找到幫助工具。

如果你正在 Internet Explorer 11 中查找“工具”菜單或工具欄，請嘗試：

“Internet Explorer 中缺少菜單欄和工具欄。”

如果你通過單擊錯誤消息轉至此處，並僅希望在以後避免錯誤消息，請嘗試：

關於 Internet Explorer 腳本錯誤應採取什麼措施？

問題：我無法在 Internet Explorer 的選項下關閉自動腳本調試程序。

正在工作的 F12 工具

在 IE11 中，我們重頭開始重建 F12 工具。它們具有全新的 UI 和新功能性，可使你更快、更輕鬆地進行開發和調試。

在鍵盤上按“F12”鍵以打開工具。如果你的鍵盤沒有功能鍵，則可以使用“工具”菜單。

有八個不同工具，每個工具在 F12 工具界面中都帶有其自己的選項卡。你將在此處找到每個工具的圖像、工具的作用和新增功能小結，以及該工具簡化的幾個典型開發或調試任務。

DOM 資源管理器工具 (CTRL + 1)

 

DOM 資源管理器工具顯示了在瀏覽器中渲染網頁時網頁的結構，並使在活動頁中編輯 HTML 和樣式的操作成爲可能。不必編輯或重新加載源，即可執行此操作，以便你可以快速解決顯示問題或試用新思路。

以下新功能 包含在 DOM 資源管理器工具中：

編輯 HTML 屬性和 CSS 屬性時，會提供 IntelliSense 自動完成建議。

拖動 DOM 節點以將其重新排列。

它簡化的開發和調試任務：

確定不以正確位置或正確大小顯示元素的原因。

指出哪些 CSS 演示和媒體查詢被應用於元素。

測試元素的一系列不同顏色，以查看哪種顏色最佳。

瞭解有關 DOM 資源管理器工具的詳細信息。

“控制檯”工具 (CTRL + 2)

 

“控制檯”工具提供了與運行代碼交互、使用控制檯的命令行發送信息和使用控制檯調試 API 獲取信息的方式。“控制檯”工具對開發人員而言非常有用，我們已使其更易於獲得。現在你可以使用 UI 右上角“幫助”按鈕旁邊的“控制檯”按鈕或按 CTRL + `在任何其他工具的底部打開它。

以下新功能 包含在“控制檯”工具中：

使用“控制檯”按鈕或 CTRL + ` 在任何其他工具的底部打開控制檯。

用於計時、計數、編組等的新控制檯調試 API 方法。

命令行上的 IntelliSense 自動完成建議可加快輸入速度、減少拼寫錯誤並幫助你發現 JavaScript API 的各個方面。

它簡化的開發和調試任務：

查看系統錯誤消息、異常警告和調試輸出。

使用新的計時方法將計時代碼執行下拉至該語句。

在不重新加載的情況下，更改運行代碼中的變量值。

瞭解有關“控制檯”工具的詳細信息。

“調試程序”工具 (CTRL + 3)

 

你可以使用“調試程序”工具檢查代碼的作用、代碼執行時間及其執行方式。在執行過程中暫停代碼，逐行操作代碼，然後查看每個步驟中變量和對象的狀態。

以下新功能 包含在“調試程序”工具中：

無刷新調試。設置斷點，無需在運行時重新加載和丟失狀態。

用於更輕鬆管理多個腳本的選項卡式文檔界面。

突出顯示斷點和搜索匹配的滾動條。

它簡化的開發和調試任務：

使用調用棧查看導致函數調用的原因。

使壓縮或精簡的代碼更易於讀取。

監視 Web Worker 創建和執行。

瞭解有關“調試程序”工具的詳細信息。

“網絡”工具 (CTRL + 4)

 

“網絡”工具向你提供了涉及加載和網頁操作的任何網絡請求的詳細信息。

以下新功能 包含在“網絡”工具中：

改進的請求計時信息。

改進的壓縮信息捕獲。

它簡化的開發和調試任務：

查看頁面跨資源消耗的帶寬量。

通過查看請求和響應標頭及正文調試 AJAX 請求。

標識減慢網頁加載速度的網絡請求。

瞭解有關“網絡”工具的詳細信息。

“UI 響應能力”工具 (CTRL + 5)

 

“UI 響應能力”工具可幫助你在頁面速度減慢時瞭解出了什麼問題。使用它分析速度緩慢的特定點可顯示導致這些問題的操作。

UI 響應能力工具在 IE11 中是 F12 工具的新增工具。某些有趣的功能如下：

標識導致 UI 緩慢的 CPU 活動的不同源。

洞察網頁的幀率。

在時間線上設置標籤以隔離用戶方案。

它簡化的開發和調試任務：

測試代碼優化。

加快你的網頁速度。

瞭解有關“UI 響應能力”工具的詳細信息。

“探查器”工具 (CTRL + 6)

 

“探查器”工具是 JavaScript 速度的單純計量工具，向你顯示了在分析會話過程中調用的函數、調用次數以及完成所需的時間。

以下新功能 包含在“探查器”工具中：

跟蹤在 Web Worker 中執行了哪些函數。

更乾淨、更快的響應 UI。

它簡化的開發和調試任務：

隔離代碼中最慢的部分。

測試代碼優化。

加快你的網頁速度

瞭解有關“探查器”工具的詳細信息。

“內存”工具 (CTRL + 7)

 

如果某個網頁開始很快，但使用一會後就變慢，主要原因通常是內存泄漏。“內存”工具跟蹤網頁的內存使用情況，幫助你標識何處的內存使用處於增長趨勢、增長原因以及如何修復它。

“內存”工具在 IE11 中是 F12 工具的新增工具。某些有趣的功能如下：

使用時間線可以查看內存使用的進度更改。

使用快照可以在特定點檢查內存使用的詳細信息。

使用快照比較可以標識特定增長點。

它簡化的開發和調試任務：

標識斷開的 DOM 節點。

標識內存增長點。

計量對象的內存使用情況。

瞭解有關“內存”工具的詳細信息。

“模擬”工具 (CTRL + 8)

 

“模擬”工具可幫助你測試你的網頁在不同屏幕大小和硬件功能上的運行方式，以及它們如何響應不同的用戶代理字符串。

“模擬”工具在 IE11 中是 F12 工具的新增工具。某些有趣的功能如下：

你可以模擬不同的屏幕大小和分辨率。

GPS 模擬。

它簡化的開發和調試任務：

在多個屏幕類型上測試響應設計。

對移動站點測試位置感知功能。

瞭解有關“模擬”工具的詳細信息。

 

DOM資源管理器

使用“DOM 資源管理器”工具查看網頁的 DOM（文檔對象模型）狀態、檢查 HTML 結構和 CSS 樣式，並測試更改以解決顯示問題。

進入 DOM

HTML 和 CSS 文件是瀏覽器用於構建 DOM（文檔對象模型）的藍圖，它將使用該藍圖呈現網頁。“DOM 資源管理器”工具將向你顯示網頁的集成結構，並允許你無需編輯頁面的源文件，即可更改樣式、移動 HTML 元素，以及更改元素屬性。

這可以在元素位置錯誤或行爲異常時幫助你診斷問題，然後解決問題。

元素窗格

選擇元素

編輯元素

移動元素

樣式窗格

樣式

跟蹤

已計算

佈局

事件

 

元素窗格

左側的元素窗格實時顯示當前創建的 DOM。使用你的鼠標瀏覽它，單擊父元素旁的箭頭將其展開，並查看其子元素。你也可以使用鍵盤上的箭頭鍵瀏覽它，使用向左鍵和向右鍵以展開和摺疊元素。

選擇元素

可以使用四種方法選擇要檢查的元素：

• 通過元素窗格：使用鍵盤或鼠標在“元素窗格”中瀏覽。
• 選擇元素：單擊“DOM 資源管理器”標題旁的按鈕（或按 CTRL + B）以激活“選擇元素”工具。然後，單擊網頁中的任意位置，將選中你單擊的元素。
• 檢查元素：右鍵單擊網頁中的任意元素，並從上下文菜單中選擇“檢查元素”。
• 痕跡：選中一個元素後，“元素窗格”底部將顯示其父元素（如果存在）的痕跡線索。單擊痕跡磁貼選擇它代表的元素。

檢查完元素後，它將突出顯示。

 

突出顯示不僅顯示元素邊界，還顯示其填充的邊界、邊框和邊距。可以使用“DOM 資源管理器”工具標題右側的第二個按鈕切換啓用或禁用狀態。

編輯元素

可以使用三種方法編輯元素：

• 編輯屬性：可以通過雙擊或選擇屬性，按 Enter，然後通過選項卡瀏覽屬性以進行編輯。

當你編輯類屬性時，將提供來自樣式的匹配類的建議列表。雙擊建議或使用箭頭鍵導航到建議，然後按 Tab 或 Enter 選擇它。

• 添加屬性：右鍵單擊元素，並單擊“添加屬性”。
• 作爲 HTML 編輯：右鍵單擊元素，並單擊“作爲 HTML 編輯”。該元素及其子元素將在邊界框內顯示爲純文本。按照你在文本編輯器中的方式編輯文本，然後單擊框外任意位置提交更改。

要點  不能在“DOM 資源管理器”中以 HTML 的形式編輯 doctype、html、head、body 和 script 元素。

如果你的更改沒有產生需要的結果，請按 CTRL + Z 撤銷上一處更改。

移動元素

你可以採用兩種方法移動元素：

• 拖動 DOM 節點：在 Internet Explorer 11 中，你可以拖動元素窗格中的元素。單擊元素並將其拖動到新位置，操作方法與其他任何類型的可移動項目相同。
• 剪切/複製和粘貼：使用右鍵單擊上下文菜單或鍵盤快捷方式來剪切、複製和粘貼元素。

當複製某個元素並使用 CTRL + V 進行粘貼時，剪切板上的元素將作爲選中元素的子元素粘貼。右鍵單擊該元素以使用上下文菜單中的“粘貼之前的內容”選項。

注意  請勿使用上下文菜單中的“複製帶有樣式的元素”選項來移動 DOM 中的元素。它將包含該元素的 HTML 文檔及其所有相關樣式放置在剪切板上，以便粘貼到外部編輯器。

樣式窗格

“樣式窗格”提供不同視圖，用於查看向元素應用了哪些樣式，以及元素關聯事件觸發了哪個代碼。該窗格有五個選項卡。

樣式

“樣式”選項卡是應用到元素的所有樣式以及應用的樣式屬性的列表。它將直接面向元素的樣式與繼承樣式分開，並識別繼承樣式來自哪些上級元素。它還可以根據 CSS 媒體查詢查找應用了哪些元素。

它可以實時更新，因此如果你執行了基於窗口寬度的媒體查詢，調整窗口大小將改變應用的樣式列表，這是因爲匹配了不同的媒體查詢。

編輯樣式

你可以通過選中或取消選中屬性左側的框來啓用或禁用樣式屬性。

若要編輯規則名稱或屬性，請單擊它。IntelliSense 自動完成建議是 IE11 中的新功能。鍵入屬性名稱時，將建議匹配的 CSS 屬性名稱。鍵入屬性值時，如果該屬性具有一組已定義的可能的值，將建議匹配的值。雙擊建議或使用箭頭鍵導航到建議，然後按 Tab 或 Enter 以選擇它。

要添加新規則或將屬性添加到現有規則，請在選項卡中右鍵單擊，然後單擊“添加規則”或“添加屬性”。

跟蹤

“跟蹤”選項卡可以跟蹤元素樣式的源。

 

該圖像顯示了元素的顏色以及已覆蓋的父元素的顏色屬性鏈。如果元素上的特定屬性與預期不同，可以使用跟蹤以查找該屬性的來源和它覆蓋的元素。

在“跟蹤”選項卡中，不能編輯屬性，但可以使用屬性旁的複選框切換其啓用或禁用狀態。關閉當前活動屬性將激活鏈中的下一個屬性。

已計算

“已計算”樣式選項卡與“跟蹤”選項卡非常相似，但具有以下兩處明顯的差異：

• 精確計算：所有沒有硬編碼度量值的屬性（例如 calc() 表達式、百分比或 em 單位）都在顯示時帶有爲其計算的像素值。
• 隱式默認值：“已計算”樣式選項卡具有“顯示所有樣式”按鈕 。

打開該按鈕時，它僅顯示用戶定義的樣式。關閉時，它顯示 Internet Explorer 的默認樣式和任何應用到元素的隱式樣式。該列表可能很長，因此它旁邊有“篩選屬性”框。在該框中鍵入文本，將篩選屬性列表，僅顯示匹配文本的屬性。

佈局

“佈局”選項卡顯示用於選定元素定位的框模型圖表，它採用的顏色與選定元素突出顯示的顏色相同。你可以通過單擊圖表中的任意值以進行編輯。

事件

“事件”選項卡顯示元素的 DOM 事件或 CSS 選擇器，這些選擇器具有采用 JavaScript 方式分配給它們的處理程序。可以單擊文件名以在調試程序中顯示文件

 

在上圖中，一個元素的單擊事件由兩個腳本中的兩個函數進行處理。如果單擊該元素時發生異常行爲，可能是因爲一個處理程序在偵聽另一個元素的事件。

控制檯

使用“控制檯”工具查看錯誤和其他信息、發送調試輸出、檢查 JavaScript 對象和 XML 節點，以及在所選窗口或框架的上下文中運行 JavaScript。

用於瞭解代碼的窗口

“控制檯”工具的主要用途是與運行的網頁進行向內和向外的通信：

• 向內：你可以運行      JavaScript 以查看和更改正在運行的網頁中的值、向運行的代碼添加函數，以及在執行代碼時運行調試代碼。
• 向外：Internet      Explorer 和 JavaScript 代碼將向開發人員提供狀態、錯誤和調試消息，包括可檢查的 JavaScript      對象和      DOM 節點。

將信息發送到“控制檯”。

• Internet      Explorer 發送到控制檯的消息
• 開發人員可以從代碼發送到控制檯的消息
• 管理消息以增強可讀性

Internet Explorer 發送到控制檯的消息

只有啓動“控制檯”，它纔會顯示消息。通過打開 F12 開發人員工具並選擇“控制檯”工具 (CTRL + 2) 來啓動它。你還可以使用工具面板右上方的“顯示控制檯”按鈕或按 CTRL + `，以使用另一個工具打開“控制檯”。

 

從該圖像中，你可以看到 Internet Explorer 系統消息具有三個分類。它們是（按順序排列）：

• 信息：你可能希望瞭解的非重要信息。
• 警告：網頁中可能存在錯誤，它不一定會打斷網頁，但可能導致異常行爲。
• 錯誤：使代碼無法運行的嚴重錯誤。有關詳細信息，請參閱控制檯中使用的      Internet Explorer 錯誤代碼列表。

可以從控制檯輸出中篩選出這些消息。“控制檯”窗格頂部的用於每種消息類型的圖標可以用於切換。單擊一個圖標以刪除其關聯的消息類型，再次單擊以將其返回。還可以在控制檯輸出中右鍵單擊，並在上下文菜單中查找用於每種類型的複選框。

單擊消息後跟的文件名時，將打開“調試程序”工具，並在“腳本”窗格中加載文件。

開發人員可以從代碼發送到控制檯的消息

控制檯調試 API向你提供用於從你的代碼將信息發送到控制檯的方法。信息細分爲以下類型：

• 自定義消息
• 可檢查的對象和節點
• 計數器
• 計時器
• 斷言
• 跟蹤和分析

自定義消息

你有四個用於自定義消息的選項。三個選項使用系統消息的格式：console.info() 用於信息消息、console.warn() 用於警告、console.error() 用於錯誤。第四個選項 (console.log()) 顯示不帶警報圖標的純文本。這四個選項都爲消息採用相同的參數形式。

• 僅文本：

JavaScript

1	console.log('This is some text');

 

This is some text

• 僅變量：

JavaScript

1 2	var mytext = 'This is some text'; console.log(mytext);

 

This is some text

• 混合的文本和變量：

JavaScript

1 2 3

var mytext = 'pieces'; var myval = 0; console.log("The number of " + mytext + "is " + myval);

 

The number of pieces is 0

• 變量替換：

JavaScript

1 2 3

var mytext = 'pieces'; var myval = 5; console.log("The number of %s is %d", mytext, myval);

 

The number of pieces is 5

變量替換具有五種變量類型：

• %s - 字符串
• %d - 整數
• %f - 浮點數
• %i - 整數
• %o - 無類型/任意

變量類型控制變量的呈現方式。例如，由整數變量類型表示的浮點數值顯示爲一個整數。

可檢查的對象和節點

可檢查的對象是 Internet Explorer 11 中的新增功能。它們採用摺疊的樹格式顯示在控制檯中，並具有可展開的節點。

要顯示可檢查的 JavaScript 對象，請使用 console.dir() 將其發送到控制檯

要顯示可檢查的 DOM 節點，請使用 console.dirxml() 將其發送到控制檯

HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div id="thediv">    <p>Click the button to show this div as a JavaScript object and a    <em>DOM</em> node.</p>    <button id="thebutton">show it</button> </div> <script>   document.getElementById('thebutton').addEventListener('click', function(){     var divid = document.getElementById('thediv');     console.log('Showing the div element as a DOM node.');     console.dirxml(divid);     console.log('Showing the div element as a JavaScript object.');     console.dir(divid);   }); </script>

 

 

使用左側箭頭展開對象和節點。

右鍵單擊 DOM 節點可以提供上下文菜單中的“評估爲對象”選項。如果選擇該選項，會將節點作爲對象發送到控制檯。同樣，表示 DOM 節點的 JavaScript 對象在上下文菜單中提供“評估爲 HTML”選項。

計數器

雖然在代碼中設置計數器相對簡單，但它仍是一項重複的任務。爲了加速開發人員工作流，控制檯調試 API 提供簡單的速記。

使用 console.count()，其字符串包含作爲參數的計數器標籤。首次與特定標籤一起使用時，將在控制檯輸出中建立一個計數器。之後使用帶有相同標籤的 console.count() 時，計數器的計數將增加。要將計數器重置爲零，請使用帶有標籤的 console.countReset()。

JavaScript

1 2 3 4

console.count('mylabel'); for(var i = 0; i < 10; i++){   console.count('mylabel'); }

  

mylabel:         11

計時器

類似於創建計數器，在代碼中創建計時器相對簡單，但控制檯調試 API 提供可使其進一步簡化的簡單速記。

在代碼的任意位置使用 console.time() 以啓動計時器，並使用 console.timeEnd() 以結束計時器並將結果發送到控制檯。如果要爲你的計時器添加標籤或需要多個計時器，請爲 console.time() 和 console.timeEnd() 方法傳遞具有作爲參數的唯一標籤的字符串。如果不傳遞參數，這些方法將使用“default”作爲標籤。

斷言

斷言是另一種用於加速開發人員工作流的速記。如果與 console.assert() 一起使用的第一個參數評估爲 false，它將運行 console.error()，並將斷言的額外參數用於錯誤消息。

使用以下代碼行：

JavaScript

console.assert(f < 25, 'f is not less than %d, but is instead %o', 25, f);

它等效於寫入

JavaScript

1 2 3

if(!(f < 25)){   console.error('f is not less than %d, but is instead %o', 25, f) }

 

。在示例代碼中，我們使用了 %o 輸出變量。由於上述評估在變量值不爲數字時將失敗，所以使用 %o 使你可以查看變量本身，而非使其採用特定類型。

跟蹤和分析

瞭解從何處調用你的代碼、正在運行哪個代碼，以及執行任務需要多長時間，這些信息對於分析速度緩慢或異常行爲非常有用。

堆棧跟蹤通過向上追溯路徑的跟蹤請求向你顯示到達當前代碼的執行路徑。在代碼中使用 console.trace() 以顯示堆棧跟蹤。

該代碼...

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function a(){   c(); } function b(){   c(); } function c(){   console.trace() } function d(){   b(); }    a(); d();

 

...在控制檯中顯示此輸出。

console.trace()

at c (http://www.contoso.com/trace.html:24:3)

at a (http://www.contoso.com/trace.html:18:3)

at Global code (http://www.contoso.com/trace.html:30:1)

console.trace()

at c (http://www.contoso.com/trace.html:24:3)

at b (http://www.contoso.com/trace.html:21:3)

at d (http://www.contoso.com/trace.html:27:3)

at Global code (http://www.contoso.com/trace.html:31:1)

在其他實例中，查看兩點間運行的代碼的每個部分將十分有用。探查器是用於該目的的最佳工具，但在一些情況下可能需要比手動停止和開始更高的精確度。

要從代碼中精確地開始和停止探查器，請使用 console.profile() 開始記錄探查器會話，並使用 console.profileEnd() 停止記錄。

將字符串作爲方法的參數傳遞到 console.profile()，以將其用作分析報告的名稱。

小心  覆蓋分析會話可能會創建異常報告。在首次測試運行時使用 console.trace() 替代 console.profile()，以確保不會在結束分析會話前多次調用 console.profile()。如果發現獲取的跟蹤比預計的多，這可能是你的問題。

管理消息以增強可讀性

對消息進行編組。

由於要處理髮送到控制檯的所有類型的消息和內容，跟蹤它們可能十分困難。使用以下命令以保持井然有序：

• console.group() 將啓動處於展開狀態的可摺疊組。將此命令放置在組中後，每條消息都將發送至控制檯，直到使用 console.groupEnd()      命令爲止。如果將字符串提供爲方法的首個參數，該字符串將用作組的標籤。
• console.groupCollapsed()      將啓動處於摺疊狀態的可摺疊組。在所有其他方面，它與 console.group() 的行爲相同。
• console.groupEnd() 將關閉最新打開的組。
• console.clear() 將刪除當前顯示在控制檯中的所有消息。

可以在另一個組中嵌套組，以便獲得更詳細的編組級別。

要啓用或禁用不同類型的消息，請使用篩選。

在“控制檯”工具的頂部，存在用於錯誤、警告和信息消息的圖標，旁邊帶有每種類型的數量。單擊某個圖標以切換該類消息顯示的啓用或禁用狀態。切換爲禁用時，將隱藏該類消息（但沒有刪除），可以通過將該類消息重新切換爲啓用來還原它們。

在控制檯輸出中右鍵單擊顯示具有複選框的上下文菜單，這些複選框可以切換三種主要消息類型以及使用 console.log() 發送的消息。

將 JavaScript 發送到“控制檯”。

控制檯不僅從代碼顯示輸出，還提供用於執行代碼的界面。僅需在“控制檯”底部的命令行窗格中輸入任何有效 JavaScript。

 

在命令行中輸入的所有腳本將在當前選定窗口的全局範圍內執行。如果使用 frameset 或 iframes 構建了你的網頁，這些框架會將其自己的文檔加載到自己的窗口中。

要面向 frameset 框架或 iframe 的窗口，請使用 cd() 命令，並將框架/iframe 的名稱或 ID 屬性用作參數。例如，你具有稱爲 microsoftFrame 的框架，並且要向其加載 Microsoft 主頁。

JavaScript

1	cd(microsoftFrame);

　　Current window: www.microsoft.com/en-us/default.aspx

要點  請注意，框架名稱旁沒有引號。僅將未帶引號的名稱或 ID 值傳遞爲參數。

要返回頂層窗口，請使用不帶參數的 cd()。

在“控制檯”中選擇元素

控制檯選擇器是 IE11 中的新增功能。它們提供簡單的速記，可以在 DOM 結構中快速選擇元素。這些選擇器是：

• $() 是用於 document.getElementById()      的速記。
• $() 是用於 document.querySelectorAll()      的速記。

要點  如果網頁中的代碼將函數分配到 $ 或 $$，當控制檯與該頁面或其框架交互時，該函數將覆蓋控制檯選擇器函數。

The multiline command line

雖然使用單行命令發送非常有用，但某些任務需要執行較長的腳本。單擊向上雙箭頭符號以展開命令行。在多行模式中，根據需要輸入多行，然後單擊綠色箭頭符號以在控制檯中執行它。

 

 

調試程序

使用“調試程序”工具在代碼運行時對其導航、設置監視點和斷點、查看調用堆棧，以及提高編譯/精簡 JavaScript 的可讀性。

何時需要“調試程序”工具？

“調試程序”工具可幫助你瞭解爲何你的代碼片段出現以下情況：

• 未按照預期方式運行。
• 未在預期時間運行。
• 在不應運行的時候運行。

“調試程序”工具可以暫停執行中的代碼，這使你可以備份和重複代碼塊，並使你可以從不同角度檢查代碼以查看以下方面：

• JavaScript      引擎到達該位置的過程。
• 正在執行的特定變量的值。
• 分佈更改過程。

啓動“調試程序”工具

在 Internet Explorer 11 中加載出現問題的網頁，並按 F12 鍵或從“工具”菜單選擇“F12 開發人員工具”選項以打開 F12 開發人員工具。單擊“調試程序”工具圖標或按 CTRL + 3 以打開該工具。

“調試程序”工具佈局

“調試程序”工具的默認佈局顯示三個窗格，可以調整其寬度和/或高度。

 

• “腳本”窗格（左邊）在選項卡式界面中顯示網頁的      HTML 和      JavaScript 的源。“腳本”窗格的滾動條區域還突出顯示斷點的位置和搜索字詞的匹配項。
• “監視點”窗格（右上方）顯示變量值。在斷開模式時，它以代碼形式顯示當前位置的本地變量（稱爲區域設置），以及要求它跟蹤的特定變量（稱爲監視點）。
• 右下方的“調用堆棧和斷點”窗格包含以下內容：
  • 調用堆棧：該模式顯示導向當前執行點的函數調用鏈。例如，如果函數 a()       調用了函數 b()，而後者調用了函數 c()，並且在 c()       中暫停執行，它將顯示從 a()       到 b()       到 c()       的路徑。
  • 斷點：該模式顯示已設置的斷點和跟蹤點的列表，並提供用於刪除、切換和編輯斷點的函數。

“控制檯”圖標（位於 F12 工具頂部的“幫助”圖標旁）或 CTRL + ` 均可以在“腳本”窗格下的第四個窗格中打開“控制檯”工具。當你要查看“控制檯”輸出時，可以打開它或使用“控制檯”命令行。

啓動調試會話

可以使用兩種方法啓動調試會話。

• 設置斷點。當你的代碼執行到斷點時，你將進入斷開模式，可以開始逐步運行代碼。
• 在代碼中斷開。單擊工具頂部的“斷開”圖標（兩條垂直平行線）或按      CTRL + SHIFT + B。“調試程序”工具將在下一個執行的語句處斷開。

“調試程序”工具是 IE11 中的新工具，它無需頁面刷新和保存狀態，即可進行調試，並且 F12 工具可以保持附加在瀏覽器窗口上。

控制會話流

如果“調試程序”工具到達斷點，且你已準備好從該點繼續執行操作，你可以使用執行控制圖標來決定接下來要進行的操作。

 

按照從左到右的順序，這些圖標分別爲：

• 繼續（F5      或      F8）：離開斷開模式，繼續執行到下一個斷點。
• 斷開      (CTRL + SHIFT + B)：在下一個運行的語句處斷開。
• 單步執行      (F11)：單步執行調用的函數，如果不是函數，則單步執行下一個語句。
• 逐過程執行      (F10)：逐過程執行調用的函數，如果不是函數，則逐過程執行下一個語句。
• 跳出      (SHIFT + F11)：跳出當前函數，並單步執行調用的函數。
• 在創建新的 Worker 時斷開      (CTRL + SHIFT + W)：在創建新的 Web      Worker 時斷開。
• 異常控制 (CTRL+ SHIFT + E)：

 

默認情況下，它將忽略異常，僅將其記錄到“控制檯”工具。你可以選擇在出現所有異常時斷開，或僅在出現未由代碼中 try... catch 異常處理程序處理過的異常時斷開。

注意  當你的網頁中包含一個或多個大型 JavaScript 庫時，請謹慎選擇在出現未處理的異常時斷開。你可能會發現自己在逐步執行許多不屬於你的精簡代碼。

此外，在語句上斷開後，你可以右鍵單擊“腳本”窗格以顯示三個額外的控件：

• 顯示下一個語句：通過單擊“單步執行”突出顯示下一個要運行的語句。
• 運行到光標      (CTRL + F10)：在光標所在位置創建斷點（只要是有效的斷開位置），並繼續執行到該點。
• 設置下一個語句      (CTRL + SHIFT + F10)：該控件使你可以跳過函數中的語句，而無需跳出它，類似於臨時註釋語句。也可以向後跳到已運行的語句。執行此操作時，不會倒回網頁。僅從該點重複你的代碼。

設置代碼格式以增強可讀性

“異常控制”右側的最後兩個圖標可以使較大代碼塊更易在“腳本”窗格中讀取。

• “出色打印”可以獲取壓縮或精簡的代碼塊，並設置其格式以增強可讀性。

JavaScript

1 2 3

function _ge(n){return _d.getElementById(n)}function sj_wf(n) {var t=arguments;return function(){n.apply(null,[].slice.apply(t).slice(1))}} function sj_ce(n,t,i){var r=_d.createElement(n);return t&&(r.id=t),i&&(r.className=i),r}

 

將變爲

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13

function _ge(n) {   return _d.getElementById(n); } function sj_wf(n) {    var t = arguments;   return function () {     n.apply(null, [].slice.apply(t).slice(1));   }; } function sj_ce(n, t, i) {   var r = _d.createElement(n);   return t && (r.id = t) , i && (r.className = i) , r; }

 

• 自動換行可以打斷較長的行以使其適合“腳本”窗格，你無需水平滾動即可查看完整的行。

設置和管理斷點

不同類型的點使你可以在“調試程序”工具到達這些點時指示它執行不同操作。

• 常規斷點 最容易設置（如果每行都有一個語句）。在“腳本”窗格最左側帶有陰影的邊緣，單擊行號旁的位置。將出現一個點，斷點即設置完畢。

在具有多個語句的行上，可以設置單個語句的斷點。在語句上右鍵單擊，然後從上下文菜單中設置斷點，或者將光標放置在語句內，並單擊 F9。

• 條件斷點 僅當設置的條件評估爲 true 時，纔會斷開。例如，我們假設你的代碼中存在      students 變量，你希望僅在 students      的值大於      20 時斷開。

請右鍵單擊斷點或語句，然後從上下文菜單中單擊“條件”，或者按 ALT + F9。在條件對話框中，輸入 students > 20，然後提交條件。你的斷點將顯示 + 符號，僅當 students > 20 評估爲 true 時，你的代碼纔在該點斷開。

• 跟蹤點 是 IE11 中的新功能。它們的作用類似於臨時 console.log() 命令。

要設置跟蹤點，請右鍵單擊語句，然後從上下文菜單中單擊“插入跟蹤點”。在對話框中，採用用於 console.log() 命令的參數的同一格式輸入消息。它可以訪問的本地和全局變量與單擊的語句相同。

“斷點”窗格

除了在“腳本”窗格的語句旁顯示，完整的斷點集將顯示在“斷點”窗格中。

 

你可以在“斷點”窗格中管理多個點。右鍵單擊其中的任意位置以獲取上下文菜單選項，以刪除所有點或切換其啓用或禁用狀態。這些選項還作爲圖標顯示在窗格的右上角以及單個斷點的左側和右側。右鍵單擊任何單個點將顯示上下文菜單中的“條件”或“跟蹤消息”選項，以便你可以更改消息或使斷點成爲條件斷點。

該面板可以跟蹤多個不同腳本中的多個斷點，這些腳本可能用於你的頁面。單擊任何斷點相關聯文件名將使該活動文件在“腳本”窗格中打開並滾動到相應行。

檢查對象和變量

設置你的斷點並單步執行代碼後，“調試程序”工具向你提供幾種方式以查看情況。

 

• 在“腳本”窗格中，當調試程序在語句上暫停時，將鼠標懸停在任何變量、函數或對象上，以查看覆蓋中的詳細信息。將你的鼠標向下移動到覆蓋中，展開和檢查對象，操作方法非常類似於使用 dirxml() 方法將其記錄到 “控制檯”時可以進行的操作。

單擊覆蓋底部的“添加監視點”，以向 “監視點”窗格添加變量或對象。

• “監視點”中的“區域設置”節點爲你提供所有對象和變量的目錄（本地和全局範圍），可用於當前斷開中作爲焦點的語句。這有助於識別位於錯誤作用域中的變量。
• 使用“添加監視點”命令添加到“監視點”窗格的變量或對象顯示在“區域設置”節點下，並在斷開模式的每一步中受到監視，即使當前斷點屬於不同作用域也是如此。
• 異常調用函數的情況非常常見。這可能導致數據損壞和速度問題。“調用堆棧”窗格顯示      JavaScript 引擎到達該函數所使用的路由。當前函數將顯示在頂部，調用的函數按照逆序顯示在其下。

管理多個腳本

IE11“調試程序”工具中的“腳本”窗格提供選項卡式界面，你可以在其中通過單擊其選項卡選擇打開的文件，並使用 CTRL + TAB 快速瀏覽打開的選項卡。

 

可以通過單擊文件夾圖標打開文件，或按 CTRL + O 打開文件列表。在文件列表中，將在框架或窗口的主文檔下采用節點爲文檔編組，文檔在該框架或窗口中運行。在單個文件上方懸停以顯示文件的完整 URI。

Web Worker 顯示爲獨立於創建它們的文檔的節點。Iframes 顯示爲主文檔的子節點。

文件列表頂部的“要篩選的類型”框可以按文件名篩選可用文件。要在所有可用文件中運行文本搜索，請使用 F12 工具右上方的“在文件中查找”(CTRL + F) 框。如果找到了你的文本，它將打開匹配搜索文本的第一個文件，並在“腳本”窗格的滾動條上標識該文件中的匹配項。按 F3 可以將你定位到下一處匹配。

請勿調試和分析

由於同時運行“調試程序”和“探查器”工具需要額外開銷，所以分析報告中的值不會反映代碼的實際加載和運行時間。不支持嘗試同時運行兩個函數。

網絡

使用網絡工具來查看瀏覽器和服務器之間的通信、檢查請求和回覆標頭、查看響應代碼，以及調試 AJAX。

監視瀏覽器的通信

F12 開發人員工具中的 Network 工具可幫助你檢查頁面加載時間、針對 AJAX 請求的響應以及所有用於加載和運行現代網頁和應用程序的網絡活動。

從頂行開始

Network 工具中的頂行圖標控制網絡流量的記錄，併爲你提供工具來提供更高的準確性、管理你的結果以及在你捕獲的流量中進行搜索。

 

從左至右，這些工具分別爲：

• “啓用/禁用網絡流量捕獲      (F5/SHIFT+ F5)”啓動和停止記錄網絡流量。
• “導出捕獲的流量”將你記錄的數據保存爲      XML 或      CSV（逗號分隔值）格式。
• “總是從服務器刷新”是帶有打開和關閉狀態的切換開關。當打開時，Internet      Explorer 11 從遠程服務器下載所有頁面元素，而不是從瀏覽器緩存。
• “清除瀏覽器緩存      (CTRL + R)”刪除瀏覽器緩存中保存的文件。瀏覽器通常會將頁面元素保存在磁盤中，並再次使用它們來更快地重載。當你嘗試衡量頁面加載的實際時間時，清除緩存可確保從網絡下載所有元素。
• “清除      Cookie”可確保刪除與當前域相關的所有 Cookie，以使你獲得首次加載頁面的體驗。
• “清除導航時的條目”是帶有打開和關閉狀態的切換開關。處於關閉狀態時，會隨着瀏覽器在頁面間的移動，連續記錄窗口或選項卡的網絡流量。處於打開狀態時，在你每次導航到新頁面時會清除記錄的流量。默認情況下，此開關處於打開狀態。
• “清除所有條目”可清除工具中所有記錄的網絡流量。
• “流量搜索”允許你在捕獲的流量中搜索文本字符串。在框中鍵入搜索文本並按      ENTER 鍵。包含該文本的網絡交易詳細信息將打開，且文本將突出顯示。要搜索該文本的更多匹配項，你可以將光標放回文本框中，然後按      ENTER 鍵或按 F5。

默認情況下，記錄的流量會在“摘要”視圖中顯示，如下所示。

 

讀取和解釋數據

Network 工具包括兩種網絡流量視圖。“摘要”視圖提供爲選項卡或網頁捕獲的所有信息的快速概覽，而“詳細信息”視圖則提供每個連接的詳細信息，例如請求和響應標頭以及詳細的計時信息。你可以使用 Summary 和 Details 鏈接在視圖之間切換。

“摘要”視圖

“摘要”視圖將頁面的所有網絡流量顯示在一個表格中。默認情況下，將按時間順序顯示這些信息，但是你可以通過單擊任意列的標頭以其他方式排序表格。此表格介紹了你可以查看的信息類型。

列標頭	說明
URL	請求的 URL。
協議	連接協議。例如，標準 Web 服務器的連接使用 HTTP，而加密連接通常使用   HTTPS。Internet   Explorer 支持許多連接協議。
方法	HTTP 方法謂詞（例如 POST 或 GET）。
結果	HTTP 響應代碼。
類型	已接收的內容類型。
已接收	已接收的數據總量（以字節爲單位）。
花費的時間	接收內容所耗費的總時間（以毫秒爲單位）。
啓動程序	引發網絡請求的瀏覽器操作類型或 DOM 節點。常見的啓動程序包括頁面刷新、頁面中鏈接的圖像和樣式表以及   XMLHttpRequest 事件。
計時	網絡事件的時間線。

 

詳細信息視圖

Details 視圖提供有關特定請求的信息。 要查看詳細信息，請雙擊“摘要”視圖中的某個條目或單擊工具頂部旁的 Details 鏈接。

 

你可以在每個選項卡的詳細視圖中找到此信息。

選項卡	說明
請求標頭	顯示發送至服務器的請求標頭。
請求正文	顯示發送至服務器的請求數據。對於大多數的謂詞，正文爲空白。 對於 POST，請求正文包含發送至服務器的數據。
響應標頭	顯示從服務器接收的響應標頭。
響應正文	指示從服務器接收的響應數據。 如果響應的內容爲圖像，將顯示圖像。 如果響應的內容爲二進制，將顯示用於將內容保存到磁盤的鏈接。否則，將在可滾動的文本區域顯示響應文本。
Cookie	指示已發送或已接收的 Cookie。 “Cookie” 選項卡中有八個列。 列標頭說明 方向 已發送或已接收的 Cookie。 鍵 鍵值對的標識符。 值 鍵值對的值。 過期日期   Cookie 的過期日期。 域 Cookie 的域。 路徑 Cookie 的路徑。 安全 指示是否只能通過安全超文本傳輸協議   (HTTPS) 連接訪問 Cookie。 僅   HTTP 指示是否只能通過   HTTP（而非 JavaScript）訪問 Cookie。
啓動程序	總結 Windows Internet Explorer 下載操作的詳細信息。操作可以包括用戶刷新、源解析期間的詞彙切分、HTML   預解析期間的推理下載、框架導航和由腳本啓動的事件（如   XMLHttpRequest）。
計時	列出與請求相關的事件及其相應的時間。計時信息將顯示爲表格和時間線圖形。將捕獲以下事件：等待、開始、請求、響應、間隙、DOMContentLoaded   和加載。單擊表格或時間線中的某個事件，將突出顯示它並將顯示該事件類型的說明。

 

限制

IE11 可以有效地捕獲和報告網絡流量，但也存在一些限制。 使用“網絡”工具衡量並在其中顯示的網絡流量與未被衡量的流量存在相似的特徵，但是計時不會精確地匹配未被監視的結果。

僅會爲與你在開始使用“網絡”工具捕獲流量時打開的 Internet Explorer 窗口/選項卡關聯的進程捕獲 HTTP 流量。要同時調試兩個窗口/選項卡，你必須打開它們各自的“F12 開發人員工具”窗口。 此外，網絡工具無法監視用於創建多個進程的選項卡的網絡流量。

UI響應能力

使用“UI 響應能力”工具分析你的網頁幀率和不同類型的 CPU 使用率，以幫助你分析 UI 性能問題。

比較儀表板和診斷

檢查你的頁面性能之前，請使用“性能儀表板”檢查其重要指標

 

可以通過 Internet Explorer 11 的“工具”菜單 (CTRL+Shift+U) 訪問 “性能儀表板”。該工具可以向你快速提供以下信息：你的頁面用來呈現對 DOM 做出的更改的時間（“繪製時間”）、每秒呈現的幀數（“幀率”）、使用了多少內存（“內存”），以及它向你的處理器提出多少需求（“CPU”）。

如果單擊量度，可以獲取動態圖形，它將顯示數據隨着時間的變化。完成後，單擊該圖形以返回到儀表板。

儀表板是識別導致網站速度緩慢的操作的理想切入點。然後，可以使用“UI 響應能力”探查器獲取問題的更詳細信息。

速度十分重要

無論是反應遲緩的動畫還是響應緩慢的用戶界面元素，當 UI 不流暢和無響應時，用戶對站點的體驗會受到損害。新的“UI 響應能力”探查器可以幫助你在頁面速度下降時查看後臺發生的情況。該信息可以爲提高速度提供線索。

 

記錄分析會話

首次加載“UI 響應能力”工具時，你將在主窗格中看到一條“開始分析以啓動性能會話”指令。單擊指令或工具頂部的箭頭圖標以開始分析。

在分析期間，請執行捕獲你嘗試分析的緩慢速度所需的最少操作。與頁面的額外交互會產生額外數據，這會使結果混亂。

如果在報告中需要精確頁面加載時間，請訪問“網絡工具”，並使用其“清理瀏覽器緩存”選項，然後再進行分析。使用“網絡工具” 可以確保你從網絡加載所有頁面資源，並在開始分析時立即重新加載頁面。

“UI 響應能力”工具會自動標記“應用生命週期事件”，例如 DOMContentLoaded。使用 performance.mark() 方法從你的代碼中設置自定義“用戶標記”。

當捕獲了要分析的行爲時，請單擊“停止分析以生成報告”或工具頂部的正方形圖標。

性能會話報告

標尺

 

標尺顯示會話運行的時間以及“應用生命週期事件”和“用戶標記”。在事件和標記上懸停可以顯示其標籤，並幫助你在會話中定向你自己。

可以使用 performance.mark()方法的參數的字符串爲用戶標記添加標籤。

時間線

 

“時間線”顯示兩個不同的度量：

“CPU 使用率”顯示正在發生的活動的量和類型，並細分爲使用顏色區分的類別。關於類別更詳細的細分，請參閱事件類別。

“視覺吞吐量”將顯示估計每秒顯示的幀數。幀率驟降表示速度下降，幀率爲零表示掉幀。

在“時間線”的某個區域上單擊並水平拖動以突出顯示。該操作可以篩選“時間線詳細信息”，僅顯示突出顯示區域的詳細信息。縮放以獲取更多詳細信息。在縮放控件的右側，“UI 響應能力”工具的頂部有一個“清除選擇”圖標，它可以刪除突出顯示。

時間線詳細信息

 

“時間線詳細信息”將深入分析記錄的事件，將類別細分到組件事件。該信息將提供關於受其影響的 DOM 元素或者由它們啓動運行的代碼的詳細信息。

在上一個圖像中，DOMContentLoaded 事件的“排除持續時間”很短，這就是事件自身觸發所需的時間。較長的“包含持續時間”不僅包含事件，還包含由事件啓動的幾個進程。

若要快速查看導致包含持續時間的事件概述，事件詳細信息窗格將顯示採用與時間線相同的顏色區分的扇形圖。因爲顏色表示事件的類別，所以該圖表可能包含多個顏色相同的部分。將你的鼠標放置在某個片段上可以顯示具有事件標籤的工具提示。

關於詳細信息的詳細信息

“時間線詳細信息”中的每個元素都會顯示不同的信息，具體取決於其類型。

 

該計時器由 setTimeout() 調用，它調用了“script.jsx”中的“autoNextSlide”函數。當你單擊文件名時，它將在“調試程序”工具中打開，並導航到函數以進行檢查。

在“腳本”佔用大部分事件時間，且“樣式”佔用了相當一部分時間時，底部扇形圖將顯示該信息。在“時間線詳細信息”中展開計時器的事件可以顯示關於花費所需時間的不同“樣式”操作的詳細信息。

事件類別和定義

“響應能力”工具爲時間線使用 7 種主要事件類別。這些類別將細分爲“時間線詳細信息”中的一系列事件。

加載 包含與自展和加載網頁資源相關的事件。它爲主窗口和其中的任何幀進行記錄。“加載”中收集的事件包括：

• CSS 解析：找到了新的 CSS 內容，且需要分析它。詳細信息包括內容的 URL 或事件後圓括號內的“內聯”（如果 CSS 採用硬編碼添加到網頁）。
• HTML parsing：找到了新的 HTML 內容，需要將其分爲節點並添加到 DOM。
• HTTP request：向服務器發出 HTTP 請求，並接收響應。可以同時顯示多個響應，且不使用大量資源。然而，等待完成較大或較慢的 HTTP 請求時，可能會延遲呈現。請求的 URL 和響應代碼爲以下所示的詳細信息類型。
• Speculative downloading：搜索網頁的 HTML 內容以查找所需資源，以便儘快地計劃 HTTP 請求。

腳本 包含與處理和執行 JavaScript 相關的事件。“腳本”中收集了以下事件：

• 動畫幀回調：已準備新的幀並觸發註冊的回調，以便引起任何視覺變化。詳細信息包括網頁中回調的位置或外部腳本。
• DOM 事件：已觸發 DOM event。其附帶的事件偵聽器顯示爲事件的子項。
• 腳本評估：處理 <script> 元素的內容。詳細信息包括腳本的 URL 或“內聯”（如果它是網頁的一部分）。
• 計時器：interval 或 timeout 完成並觸發了回調的執行過程。詳細信息包括網頁中計時器的位置或外部腳本、所用的時間及其回調函數（如果存在回調函數）的名稱。由回調觸發的操作將顯示爲事件的子項。

GC（垃圾回收）是指不再需要項目時，將其從內存中標識並刪除。將在“時間線詳細信息”中使用全名指示它。

樣式 包含與 CSS 樣式和元素定位相關的事件。事件活動。“樣式”中收集的事件包括：

• 佈局：已更改 DOM，需要計算所有受到影響的元素的大小和/或位置。
• 樣式計算：已更改 DOM 或添加新的 CSS 內容，需要重新計算所有受到影響的元素的樣式屬性。

呈現 包含與在屏幕上放置元素相關的事件。“呈現”中收集的事件包括：

• 繪製：已對 DOM 做出視覺更改，需要重新繪製頁面所有受到影響的部分。 呈現層事件可能作爲子事件顯示，並指示已重新繪製 DOM 的特定片段。受到呈現層事件影響的層的座標 (x,y) 和維度都包含在詳細信息中。

圖像解碼 是將已壓縮的圖像文件格式轉換爲繪製到屏幕上的帶有顏色的像素序列的活動。將在“時間線詳細信息”中使用其名稱指示它。

其他：與瀏覽器相關的雜項計算。分類爲“其他”的計算不會在“時間線詳細信息”中顯示。

有關使用“UI 響應能力”工具的更多特定演示，請查看我們的演示和代碼示例：使用“UI 響應能力”工具改進動畫性能。

性能分析提示

多次測試：在分析報告中看到的結果並非僅基於你的代碼。它們受到在系統上爭奪你的處理器和內存的其他進程的影 響。後臺運行的的病毒掃描或瀏覽器中打開過多選項卡可能導致一時速度緩慢或整體測試不佳。此外，如果你在實驗室條件下在新計算機上進行測試，它可能速度很 快，你的代碼可以良好運行。確保你可以可靠地重現緩慢的速度（與重現錯誤相似）非常重要。然後，可以診斷原因。

一致性會帶來速度更快的感覺：“UI 響應能力”探查器對於隨時間變化的幀率的視覺映射可能會非常有用。幀率不等或跳幀會使人感覺你的站點速度緩慢。如果降低動畫速度可以減少跳幀並有助於保持幀率一致，它可以使人感覺站點速度更快。“流暢 JavaScript 動畫的祕密”""提供了一些關於使用 window.requestAnimationFrame() 降低幀率並獲得節省電源和防止跳幀的好處的幾個建議。

該 CSS 中有多少必需部分？許多站點使用具有站點寬度的樣式表以更快地加載頁面。它可以減少網絡請求的數量，並利用後續加載的緩存。但是，無論該樣式是否在頁面中使用，樣式表中的每個樣式都必須被解析並添加到樣式的複雜計算中。

對大部分站點而言，這從來都不會造成問題。在帶有複雜樣式、許多頁面、許多 UI 動畫以及巨大的具有站點寬度的樣式表的超大站點中，你會經常可以看到“樣式”操作由於未使用的樣式所產生的開銷而成爲性能滯後的主要原因。

此時要問的問題是：未使用的樣式的成本是否大於單個樣式表的優勢？嘗試一些不同的解決方案，並分析它們。你很快就能得到答案。

探查器

使用 F12 開發人員工具中的“探查器” 以獲取網頁中 JavaScript 的詳細性能度量。

分析腳本

“探查器”可以爲你顯示網頁在分析會話期間運行的 JavaScript 函數。它包括關於它們的運行次數、每個函數運行的時長、父函數與子函數之間的關係等方面的詳細信息。

要開始分析，請在 Internet Explorer 11 中打開你要分析的頁面。按 F12 打開 F12 工具，並選擇“探查器”工具。

當你第一次打開“探查器”工具時，網格是空的。要生成報告，請單擊“開始分析”按鈕或按 F5，然後運行要分析的代碼。單擊“停止分析”或按 SHIFT + F5 以結束會話並生成報告。例如，要分析單擊某個按鈕時發生的情況，請單擊“開始探查”，單擊該按鈕，然後在完成關於此次單擊的報告時單擊“停止分析”。

精確度分析

還可以使用控制檯 API 從你的代碼中開始和停止分析。console.profile() 和 console.profileEnd() 方法使你可以在代碼中確切的點上開始和停止“探查器”。

查看分析報告

每個探查器會話都生成分立報告，該報告不會被下一個報告覆蓋，因此你可以在單個頁面上運行多個分析會話。默認情況下顯示最新的探查器報告，你可以單擊“當前報告”下拉列表來查看其他報告。

可以通過“函數”視圖或“調用樹”視圖這兩種方法查看報告。“函數”視圖在簡單列表中顯示所有函數。“調用樹”視圖顯示函數之間的嵌套的父子關係。

 

分析數據類型

探查器通過分析返回最多 13 列數據，並在 IE11 中添加了新的 Worker ID 列以顯示 Web Workers 運行函數的時間。在報告中，你可以右鍵單擊任何列的頁首，然後添加或刪除列。可以在上一個圖像中看到默認選擇的列。可以在下一個圖像中看到所有列均可見的“探查器”。

 

下表顯示“探查器”工具中可用的數據分類。

列標題	顯示的內容
函數	正在分析的函數的名稱。
計數	調用此函數的總次數。
包含時間（毫秒）	在此函數中經過的運行時間長度。其中包括從此函數調用的子函數或外部函數中花費的時間。
包含時間百分比	在此函數中經過的運行時間百分比。其中包括從此函數調用的子函數或外部函數中花費的時間。
排除時間（毫秒）	在此函數中經過的運行時間長度。其中排除從此函數調用的子函數或外部函數中花費的時間。
排除時間百分比	在此函數中經過的運行時間百分比。其中排除從此函數調用的子函數或外部函數中花費的時間。
平均時間（毫秒）	在此函數及其子函數和外部函數中花費的平均時間。
最大時間（毫秒）	在此函數及其子函數和外部函數中花費的最大時間。
最小時間（毫秒）	在此函數及其子函數和外部函數中花費的最小時間。
函數類型	函數的類型 - DOM、用戶、內置。
URL	定義此函數的源文件的 URL。
行號	此函數的開頭在源代碼中的行號。
Worker ID	表示運行特定函數的 Web Worker 的標識符。

 

包含時間和排除時間會指示代碼中的問題。包含時間提供了此函數、由其調用的或其子函數調用的任何函數的總體時間。排除時間僅顯示在特定函數內實際花費的時間。有可能一個函數的包含時間非常高，而排除時間很少。例如：

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13

function boringone() { // do some work for 250 milliseconds }    function funone() { // do some work for 200 milliseconds and then call boringone() boringone(); }    function main() { //do some work for 50 milliseconds then call funone() funone(); }

 

在此示例中，首先調用 "main()" 函數（工作時間爲 50 毫秒），然後調用 "funone()"（花費 200 毫秒），然後調用 "boringone()"（在完成之前工作 250 毫秒）。以下圖表顯示了包含時間和排除時間可能顯示的值。

函數	包含時間	排除時間
main()	500 毫秒	50 毫秒
funone()	450 毫秒	200 毫秒
boringone()	250 毫秒	250 毫秒

 

每個函數的包含時間是運行該函數花費的時間加上運行它後面的函數（子函數）花費的所有時間。排除時間僅僅是運行當前函數花費的時間。函數鏈中的最後一個函數 "boringone()" 顯示的包含時間和排除時間是相同的。

搜索報告和報告排序

搜索函數

你可以使用“探查器”工具頂部的“搜索”框搜索報告中的指定函數，該搜索框與“開始探查”和“導出數據”按鈕位於同一組。

在“搜索”框中鍵入全部或部分名稱，然後單擊“搜索”按鈕或按 Enter。將突出顯示搜索關鍵字的所有實例，並且報告會滾動到第一個匹配項。你可以在匹配項之間導航，通過按 Enter 或 F3 移動到下一處匹配，並按 Shift + Enter 或 Shift + F3 移動到上一處匹配。

按列排序

可以使用爲 Excel 電子表格或 Word 表格排序的方式爲列排序。

在“調用樹”報告視圖中排序時，僅對頂級函數的值進行排序。子函數仍保留其層次結構順序。

複製和保存報告

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

內存

使用“內存”工具診斷可影響網頁速度和穩定性的內存問題。

內存問題

如果你的網頁在開始加載時運行良好，但逐漸變緩並有時出現崩潰，則頁面的內存使用可能出現問題。“內存”工具在 Internet Explorer 11 中是 F12 開發人員工具的新增工具。

若要快速查看你的網頁使用了多少內存，請從 IE11 的“工具”菜單中打開新的“性能”儀表板或使用 CTRL + SHIFT + U。單擊內存使用數量以查看內存使用的動態圖形。若要返回儀表板，請單擊該圖形。

當你要了解爲什麼看到“性能”儀表板顯示的數量時，你將需要“內存”工具。它將詳細檢查網頁的內存使用和內存增長，並標識改進方式。

診斷內存問題

在瀏覽器中加載網頁後，打開 F12 工具，然後打開“內存”工具（使用相機圖標或 CTRL + 7）。你可以從此屏幕開始分析，並在分析會話過程中拍攝堆棧快照。

如果你的問題是開始時內存使用率很高，但沒有內存增長，請拍攝一個快照並對其進行檢查，以查找內存使用率較高的區域。如果你的內存使用率隨着時間的推移不斷增長，則可以比較快照以查看內存增長的區域。

“摘要”視圖

開始分析並拍攝了幾張快照後，你將看到類似於以下內容的會話摘要：

 

當你開始記錄會話時，“總內存”時間線將當前瀏覽器選項卡進程的內存使用率顯示爲隨着時間變化的圖形。

你可以在 JavaScript 中使用 performance.mark() 方法將自定義“用戶”標記添加到時間線，並使用標記的標籤作爲參數。你可以使用此方法添加特定事件。當鼠標指針懸停在時間線的標記上時，該標籤將顯示爲工具提示。

在時間線下，可查看“堆棧快照”的摘要。

快照摘要向你提供的信息

每個快照都顯示網頁的縮略圖（在拍攝快照時網頁顯示的外觀），以及有關代碼內存使用情況的詳情。在第一張快照後，後續快照將添加有關內存使用和對象計數更改的摘要。

在第二張快照和後續快照中，創建的新對象數量和刪除的舊對象數量將顯示在對象計數下。如果這些數量過高，則可能出現性能問題。當你使用的內存量良好，但卻創建和刪除了大量對象時，可以使用垃圾回收器進程，它可釋放內存。垃圾回收可以使用處理能力，因此最好是找到可重複使用或循環利用這些對象的方法，並使垃圾回收器短暫停止。

提示  若要查看垃圾回收器執行了多少任務，請使用“UI 響應能力”工具分析你的網頁。

如果你單擊內存使用數量，則可以查看該快照的詳細視圖。如果你單擊內存更改數量，則可以查看突出顯示了已添加或修改的對象的比較視圖。在以上圖像中，“快照 #2”包含了詳細信息圖標（中間帶有“i”的圓）和它旁邊的數字 30。此數字表示“內存”工具已標識爲潛在內存問題的對象數。

快照詳細信息視圖

在快照上單擊一個計量數字，以查看該計量的詳細信息。以下圖像顯示了當你在快照中單擊內存問題數量時出現的視圖。

 

在以上視圖中，你可以看到快照詳細信息的“Dominator”視圖，這些信息的排序方式將優先顯示問題。

如果你懸停在詳細信息圖標上，則可以看到指示此項目爲什麼是潛在問題的工具提示。在以上示例中，DOM 節點未附加到 DOM。如果節點已從 DOM 中刪除，但仍可以引用到其他位置，會發生此情況。

如果你單擊對象，則可以在屏幕底部看到引用該節點的對象。在此情況下，稱爲 nodeholder 的數組包含將節點保留在內存中的引用。如果這不是你所期望的，則可以進行進一步調查。

三種視圖類型

• “Dominator”視圖展開顯示所有單獨 HTML 元素、DOM 節點和代碼創建的 JavaScript 對象。這是最詳細的視圖。
• “類型”視圖按對象的構造函數編組對象，並提供每個類型的計數。該視圖使你更容易瞭解擁有多少數組、多少字符串等。可以展開這些組以查看單獨對象。
• “根”視圖顯示主要的根對象，你可以展開這些對象以查看與其關聯的子對象。

在全部三種視圖中，對象大小和保留大小都具有列標題。“大小”列記錄了對象本身使用的內存量。“保留大小”列記錄了對象及其子節點使用的內存量。例如，HTMLDivElement 本身可能只消耗幾十個字節，但它包含的保留大小可能以 MB 爲單位，因爲大圖像或視頻是其子元素之一。

在複雜的大頁面中，僅加載前兩千個對象，這些對象按照其保留大小排序。在此情況中，將提供篩選選項以幫助你縮減對象集。

其他選項

你可以使用快照詳細信息右上角的下拉菜單更改用於詳細信息顯示的設置。

• “顯示內部對象”顯示了瀏覽器爲網頁創建的內部對象，它們不是由頁面自身創建的。默認情況下我們不顯示這些對象，以便你的注意力集中在自己的代碼上。但是，有時查看這些對象很有用。
• “顯示對象 ID”可幫助你標識具有多個引用的對象。例如，jQuery 查詢通常使用 jQuery 和 $      作爲引用。這兩種引用都以相同的內存使用量顯示，但它們使用的是相同的內存和相同的對象 ID。使用對象 ID 可以從具有多個引用的對象中分隔出唯一對象。
• 顯示循環引用：在最簡單的形式中，當一個對象引用可重新引用該對象的其他對象（即創建一個循環）時，會發生循環引用。在更復雜的形式中，循環引用路徑可以通過許多對象。若要使查找對象的根更簡單，不顯示循環引用。如果你需要跟蹤循環引用的路徑，請使用此選項顯示它們：
  • 顯示循環引用時，你會發現你自己不小心重複檢查了同一對象。打開“顯示對象 ID”可幫助避免此種混淆。

比較視圖

在顯示了內存使用或對象計數的更改的快照中，單擊更改數量以查看該快照和它之前的快照之間的比較。

 

除了以下三個差異外，比較視圖與快照詳細信息視圖的工作方式相同：

• 你可以基於更改了哪些元素及其更改方式排序“操作”列。
• 使用顏色標記各行以表示其更改：
  • 藍色：存在於兩個快照中，但在這兩個快照中發生了更改的對象。
  • 綠色：已在快照之間添加的對象。
  • 黑色：沒有更改。
• 添加了兩個新列以顯示“大小”和“保留大小”中的差異。

模擬

試用模擬工具測試網頁與其他不同文檔模式、用戶代理、屏幕大小和分辨率以及 GPS 位置座標兼容的方式。

及早測試並經常測試

設計和開發現代 Web 意味着構建可在廣泛設備和平臺上工作的網頁。通過使用 F12 開發人員工具中的模擬工具，可以模擬可在其中查看網頁的不同環境。此操作使在開發循環中及早捕獲和調試問題更加容易。

該工具分爲三個部分，即模式、顯示和地理位置：

 

• 模式：測試文檔模式、對比桌面和 Windows Phone 瀏覽器配置文件，然後使用用戶代理字符串模擬調試由瀏覽器竊聽導致的錯誤。
• 顯示：模擬不同的屏幕大小和分辨率以查看網頁的呈現方式。
• 地理位置：模擬 GPS 接收器並輸入 GPS 座標以在網頁中測試位置感知功能。

模式

文檔模式

Internet Explorer 11 中的 F12 工具已將早期版本中的瀏覽器和文檔模式的複雜矩陣簡化爲單個選項：文檔模式。

可以使用以下六個選項：前沿（默認）表示 IE11 支持的所有最新標準和功能。其他五個選項表示 Internet Explorer 版本 5（a.k.a.“Quirks”）7、8、9 和 10。選擇某個版本（IE11 除外）時，IE11 將呈現網頁，就像你在使用該版本瀏覽器一樣。它甚至可以更改瀏覽器發送的默認用戶代理字符串。你可以使用“模式”部分中的“用戶代理字符串”菜單手動設置不同的字符串。

值得注意的是，“文檔模式”是較舊瀏覽器的模擬。它非常有用，但是如果你需要精確像素佈局或者要確保你的頁面在較舊版本的 IE 中以特定方式顯示和工作，建議轉至 Modern.ie 並下載具有較舊版本 IE 的虛擬計算機。虛擬計算機與適用於 Windows、Mac 和 Linux 的虛擬環境兼容，因此你可以獲取用於在較舊版本的 IE 和 Windows 中進行測試和調試的最精確和最值得信賴的平臺。

瀏覽器配置文件

如果你要查看你的網頁在 Windows Phone 8 設備上的執行方式，瀏覽器配置文件可幫助你更改各種設置以快速輕鬆地模擬 Windows Phone 8 設備，然後非常輕鬆地更改回默認桌面配置文件。

用戶代理字符串

更改你的用戶代理字符串是調試錯誤（僅在 IE 中出現，而不在其他瀏覽器中出現）良好的第一步。基本方式是使 IE 將其自身識別爲其他版本，甚至是其他瀏覽器。

有時，前端和/或後端腳本會嘗試檢測你正在使用哪種瀏覽器。即使你未在自己的代碼中使用任何瀏覽器檢測，你也可能使用了可檢測的第三方 JavaScript 庫或服務器端腳本。

瀏覽器檢測問題是它經常用於縮小比例或根據編寫腳本的開發人員認爲瀏覽器可以執行的操作（而不是使用功能檢測檢測瀏覽器實際可以執行的操作）來更改網頁中的功能。此操作會導致意外行爲，因爲針對 Microsoft Internet Explorer 6 的代碼在 IE11 中的運行方式不同，或者瀏覽器完全支持的功能因開發人員提出的假設而被禁用。

如果更改你的用戶代理字符串可以清除問題，則瀏覽器檢測可能是導致此問題的原因。

顯示

顯示模擬可幫助開發人員使用不同的屏幕大小和不同分辨率預覽網頁。它有助於識別網頁從傳統的桌面顯示器過渡到較小的移動屏幕或較新的高分辨率顯示屏時出現的問題。

要點  模擬經過調整以試用和匹配模擬屏幕的物理尺寸。模擬像素可以顯示已壓縮或已擴展，如果你需要測試 HTML 元素的完美像素定位，則不建議模擬。但是，模擬對測試響應式設計和識別較大元素定位問題十分有用。

方向

可用標準選項如下：

• 縱向：屏幕高度大於寬度。這是適用於大多數移動設備屏幕的方向。
• 橫向：屏幕寬度大於高度。這是適用於大多數筆記本電腦屏幕和桌面顯示器的方向。

分辨率

 

提供一系列物理尺寸和分辨率。如果以上內容都不能滿足你的需要，則可以通過從菜單中選擇“自定義”設置自定義大小和分辨率。

支持的自定義大小最多爲 80 英寸和 3820 x 2160。

地理位置

許多移動設備使你可以確定用戶的物理位置並傳送針對該位置的信息或服務。

有三種選項可用於模擬 GPS。它們是“關”、“開”和“打開但無信號”，這些選項可用於測試不同的設備狀態。設置爲“開”時，你輸入的“緯度” 和“經度”將被提供到網頁中。