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 + ` 在任何其他工具的底部開啟控制檯。

用於計時、計數、編組等的新

命令列上的 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

This is some text

• 僅變數：

JavaScript