企業IT管理員IE11升級指南 系列：

F12 開發者工具

簡介

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

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

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

正在工作的 F12 工具

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

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

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

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

 

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

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

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

它簡化的開發和除錯任務：

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

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

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

“控制檯”工具 (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 活動的不同源。

洞察網頁的幀率。

在時間線上設定標籤以隔離使用者方案。

它簡化的開發和除錯任務：

測試程式碼優化。

加快你的網頁速度。

“探查器”工具 (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 傳送到控制檯的訊息

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

 

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

• 資訊：你可能希望瞭解的非重要資訊。
• 警告：網頁中可能存在錯誤，它不一定會打斷網頁，但可能導致異常行為。

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

單擊訊息後跟的檔名時，將開啟“除錯程式”工具，並在“指令碼”窗格中載入檔案。

開發人員可以從程式碼傳送到控制檯的訊息

控制檯除錯 API向你提供用於從你的程式碼將資訊傳送到控制檯的方法。資訊細分為以下型別：

• 自定義訊息
• 計數器
• 計時器
• 斷言
• 跟蹤和分析

自定義訊息

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

• 僅文字：

JavaScript

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

This is some text

• 僅變數：

JavaScript

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

This is some text

• 混合的文字和變數：

JavaScript

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

The number of pieces is 0

• 變數替換：

JavaScript

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

<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

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

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

。在示例程式碼中，我們使用了 %o 輸出變數。由於上述評估在變數值不為數字時將失敗，所以使用 %o 使你可以檢視變數本身，而非使其採用特定型別。

跟蹤和分析

瞭解從何處呼叫你的程式碼、正在執行哪個程式碼，以及執行任務需要多長時間，這些資訊對於分析速度緩慢或異常行為非常有用。

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

該程式碼...

JavaScript

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.trace() 替代 console.profile()，以確保不會在結束分析會話前多次呼叫 console.profile()。如果發現獲取的跟蹤比預計的多，這可能是你的問題。

管理訊息以增強可讀性

對訊息進行編組。

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

• console.group() 將啟動處於展開狀態的可摺疊組。將此命令放置在組中後，每條訊息都將傳送至控制檯，直到使用 console.groupEnd()      命令為止。如果將字串提供為方法的首個引數，該字串將用作組的標籤。

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

要啟用或禁用不同型別的訊息，請使用篩選。

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

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

將 JavaScript 傳送到“控制檯”。

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

 

在命令列中輸入的所有指令碼將在當前選定視窗的全域性範圍內執行。如果使用 frameset 或 iframes 構建了你的網頁，這些框架會將其自己的文件載入到自己的視窗中。

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

JavaScript

cd(microsoftFrame);

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

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

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

在“控制檯”中選擇元素

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

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

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

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

 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 相關的事件。“指令碼”中收集了以下事件：

• 動畫幀回撥：已準備新的幀並觸發註冊