Internet Explorer/F12 開發者工具

Internet Explorer 的開發者工具是開發人員的重要工具。

此功能在 Internet Explorer 8 中推出，允許開發人員測試其網頁、維護相容性和修復錯誤。

Internet Explorer 11 中引入的更改

Internet Explorer 11 已經實質性地改變了開發者工具的 UI 和功能。IE10 和 IE11 中的開發者工具 UI 介面有很大的不同。我們將在本文中介紹這兩種型別的開發者工具。

此外，版本 11.0.15（IE11）將基本 UI 更改為更類似選單的佈局，但與 IE11 之前的版本不相似。
另外，請注意，隨著我們在指南中不斷前進，某些功能可能在您的 IE 版本中不可用。

開啟開發者工具

可以透過按鍵盤上的 F12 鍵開啟開發者工具。

或者，您可以開啟“工具”選單並單擊“F12 開發者工具”。

開發者工具 UI

IE9 上的開發者工具

IE11 和 Microsoft Edge 上的開發者工具

右側的圖片顯示了 11.0.15 更新後的 IE，它對開發者工具進行了美化。底部的圖片顯示了 IE11 中的原始開發者工具。左側的圖片顯示了 IE11 之前的舊版本（這裡為 IE9）中的開發者工具。請注意，IE11 更新後，功能沒有改變。

我們將在下一節中看到這些功能。

IE11 改版前的開發者工具

開發者工具的功能

DOM 資源管理器

此功能允許您檢視網頁的基本 HTML。您甚至可以修改其中的一些內容以建立臨時更改。

例如，您可以更改網頁的標題或部分（文字），但您無法更改 JavaScript 程式碼，無法使此程式碼永久化，也無法訪問子部分（例如單獨檔案中的 jsquery）。

例如，在這裡我們將更改維基共享資源的標題。找到網頁的<title>部分（網頁的標題就是從這裡取的）並將其更改為您喜歡的任何內容。

在這個例子中，我們將它改為“測試頁”。完成後，您就可以立即看到更改。修改後的維基共享資源頁面位於背景中。此更改不是永久性的。

單擊“選擇元素”（ ）將帶您返回網頁，您可以在其中單擊任何主要部分（由根據滑鼠位置移動的邊框指示），然後它將顯示該部分的 HTML 程式碼。
IE11 中與 DOM 資源管理器等效的是 IE10 及以下版本中的 HTML 選項卡。它的工作原理類似，但 UL 佈局類似。這裡我們正在編輯華夏公益教科書文字的一部分（看看“問題？？？“和“使用測試頁”）：-

請注意，如果您單擊“編輯”（ ），則 HTML 選項卡內容將更改為鬆散且可自由編輯的 HTML，但僅限於該檔案（沒有伴隨檔案）。
如果您單擊“帶有樣式的元素源”（ ）並且您選擇了正文標籤內的部分，那麼它將顯示該部分的完整 HTML 程式碼。
如果您單擊“透過單擊選擇元素”（ ），那麼它將帶您返回網頁，您可以在其中單擊任何主要部分（由根據滑鼠位置移動的矩形指示），它將執行與您在 IE11 中單擊“選擇元素”相同的事情。
要清除瀏覽器快取，請單擊“清除瀏覽器快取”（ ）。

樣式、佈局和屬性

這些允許您檢視所選網頁部分的樣式。這組選項卡位於 DOM 資源管理器/HTML 選項卡的右側。

“樣式”選項卡允許您測試對網頁不同樣式屬性的更改。這包括字型、顏色等。但是，與以前一樣，您無法使更改永久化。這裡，我們正在將華夏公益教科書側邊欄的顏色更改為海綠色。

“計算”選項卡的用途類似。
“佈局”選項卡顯示物件相對於網頁的位置。
“事件”選項卡顯示發生的事件。
“更改”選項卡詳細說明了自您為該網頁開啟開發者工具以來發生的更改。

控制檯

下面的截圖應該解釋一切。

IE11 開發者工具中的控制檯功能

IE9 開發者工具中的控制檯功能

此功能通常用於使用 JavaScript 測試網頁。您可以輸入命令，這是一個有用的功能。開發者工具然後可以報告命令是否包含錯誤。它還可以用於檢查網站錯誤，也就是說，它充當日誌。

對於 IE11 之前的版本（見右側），它類似於 IE11 的控制檯功能，但無法僅在控制檯中顯示特定型別的資訊（例如 - 僅錯誤）。

偵錯程式

在 IE11 的開發者工具中選擇多檔案（不同檔案）

這是 Internet Explorer 最重要的開發者工具功能之一。如圖所示，此功能允許使用者對網頁進行完全除錯控制。您可以單獨選擇網頁部件（如 JS 檔案）並進行除錯，但您所做的更改（如果有）不能是永久性的。

斷點

正如您可能在像 Visual Basic 這樣的程式語言的 IDE 中看到的那樣，斷點 允許您在發生錯誤時停止執行網頁。

1. 此選項停止開發者工具在任何異常情況下中斷。
2. 此選項允許開發者工具中斷，但僅在未處理的異常情況下中斷。
3. 此選項允許開發者工具在任何異常情況下中斷。

選擇不同的網頁檔案進行除錯

單擊 (4) 允許您選擇其他網頁檔案進行分析和除錯。這可能類似於 JavaScript 檔案。您還可以像選項卡格式一樣在多個檔案之間進行多工處理。

在工具欄上

1. (5) 開始除錯網頁。
2. (6) 停止除錯網頁。
3. (8) 將程式碼佈局更改為更適合列印的格式。這使您可以以更好的佈局進行列印。
4. (9) 包裝程式碼，類似於您在 w:Notepad 等程式中看到的。

呼叫堆疊和監視

現在，我們這裡不是在談論任何可穿戴手錶！這些只是 Internet Explorer 中提供的開發者功能。

網路

另一個重要的功能，啟用後，它會顯示網頁中每個元素的延遲、響應時間和載入時間。它可能是 JavaScript 檔案、影像，幾乎任何東西。單擊元素詳細資訊將顯示有關它的更多詳細資訊。

通常，最好在重新載入或單擊要分析的連結之前啟用此功能。此功能可以幫助開發人員，因為它使他們能夠識別可能導致其網頁渲染和載入時間延遲的原因。

右側的圖片應該解釋一切。

1. 這會停用網路功能
2. 這會將該功能收集的資料儲存到檔案中。
3. 它強制從伺服器重新整理資料。
4. 它清除瀏覽器快取
5. 它清除主域的 cookie。
6. 它清除該功能收集的資料。

從圖片中可以看出，將滑鼠指標懸停在任何條目的圖形框上會顯示您需要花費的大概時間

1. 等待 元素被需要。
2. 啟動 元素
3. 請求元素 所花費的時間
4. 響應請求 所花費的時間
5. 間隔時間。

此外，某些事件可能尚未完成，或者可能已被網頁或手動停止自動（或以其他方式）中止。這些被標記為 (Pending) 或 (Aborted)。您可以使用搜索框搜尋事件。

如果您單擊某個元素，它將進入詳細檢視。下面的螢幕截圖顯示了它。

1. 這顯示了元素的連結。
2. 這些是詳細頁面的 7 個子部分。雖然我們在這裡介紹第一部分，但其他 6 部分也將被介紹。
3. 對元素的請求。
4. 元素的接受程式碼顯示在這裡。
5. 這一切從哪裡開始？主頁面連結顯示在這裡。
6. 傳送接受的語言。
7. 所選瀏覽器的使用者代理。這裡，它是 IE11 的預設使用者代理。
8. 網頁已接受的編碼。
9. 網頁的主機。
10. 網頁的連線狀態。
11. cookie 詳細資訊。詳細資訊已被塗黑，因為它們會洩露 IP 地址和地理位置資料。

文件模式

此功能可以透過具有計算機螢幕和智慧手機圖示的圖示訪問，該圖示是右上角組的第一個圖示。它允許模擬 Internet Explorer 版本 5 到 11 的渲染行為，以允許測試頁面的相容性。