Internet Explorer 11 中 F12 開發人員工具的改進

F12 使用者介面的變更

新的圖示和通知 記憶體和設定檔工具的圖示已變更。

現在圖示列上有指標，代表主機中的錯誤、模擬設定中的變更，以及記憶體、設定檔和 UI 回應工具中的主動分析會話。 下圖顯示新的圖示，以及主控台和記憶體工具圖示上的通知，表示顯示兩個主機錯誤，而且目前正在進行記憶體分析會話：

工具中的 F6 超集合流覽使用 F6 就像使用 Tab 鍵在工具中四處流覽，但它會透過工具窗格中選取的一組最常用的元素來「索引標籤」，而不是透過每個可選取的專案。 這是整體更清潔系統的一部分，可讓您使用鍵盤在工具內和工具之間流覽。

使用鍵盤在最近使用的工具之間來回移動您可以使用 Ctrl + [ 在工具導覽歷程記錄中向後移動， CTRL + ] 可向前移動，類似流覽時的前後箭號。

快速存取檔案模式介面頂端會新增新的下拉式清單，讓您從任何工具存取檔案模式，因此您不需要切換工具。

主機變更

Console.timeStamp () 從主機或程式碼內撥打電話時，Console.timeStamp () 會輸出到主機，表示目前瀏覽器索引標籤已開啟毫秒。 如果在使用 UI 回應工具執行分析會話時撥打電話，它會在會話時程表上建立使用者標記，並根據會話開始後的時間建立時間戳記。

Ctrl + L 會清除所有訊息的主機

正確自動完成主控台的自動完成不再包含索引子屬性。 這會產生更乾淨且更精確的自動完成建議選擇。

為了方便起見，已將 $、$、$x、$0-$5 和 $_ 新增至主機自動完成清單，並讓主機的行為與其他瀏覽器更一致。

過時的郵件指標 如果您已選擇關閉 [清除導覽] 選項，較舊的主機訊息會以灰色顯示其圖示，以協助區分使用中頁面的郵件，以及您歷程記錄中先前頁面的郵件。

DOM 總管變更

[計算] 窗格中的 [變更列] 變更列 (變更屬性的不同色彩、新增屬性，以及已刪除的屬性) 使用者一直喜歡的 [樣式] 窗格現在會出現在 [計算樣式] 窗格中。

偵錯工具變更

來源地圖指定在偵錯工具中按一下檔的索引標籤，您可以指定來源地圖。 這可讓您將來源地圖與已移除來源地圖批註的出貨代碼搭配使用。

在 Watche 中自動完成新增手錶時，系統會建議您自動完成選項。

傳回值檢查 當函數以傳回值分行時，請進入函數，直到您移至右大括弧為止。 傳回值會顯示在 [手錶] 窗格的 [本地人] 區段中。 再執行一次，該值會傳回要求該值的代碼。

如需快速示範，請在主機中嘗試此代碼：

function showval() { var x = 0; x++; debugger; return x; } showval(); 

它會呼叫函數、中斷偵錯程式，您可以進入此程式以查看傳回值。

為中斷點選取多重專案Ctrl + 按一下、Shift + 按一下，以及 Ctrl + A 可用於在 [中斷點] 窗格中選取多個中斷點。

繼續並忽略中斷按 F5 以繼續下一個分隔符號。 按住 F5 繼續超過多個分隔線，直到您放開 F5 為止。

事件中斷點和追蹤點這些運作方式類似于 F12 工具中既有的中斷點和追蹤點，但是在執行特定的程式碼區塊時，它們不會觸發，而是在特定事件啟動時觸發。 每個專案都有選擇性的條件式篩選，可協助您將範圍縮小到您要檢查的特定事件實例。 您可以使用下列影像中醒目提示的新增事件追蹤點和新增事件中斷點圖示：

UI 回應性工具變更

匯入/匯出效能會話您不需要每次分析所產生的資料，或與同事共用該資料時，都重現您的測試案例。 匯入 (資料夾) 並匯出 (磁片) 圖示上的 UI 回應工具圖示列，可讓您將記憶體快照儲存到可稍後匯入的檔案。

影像預覽 如果您已經看過影像的 HTTP 要求，並想知道該影像是哪一個，現在就會在活動詳細資料中預覽影像。

篩選事件[篩選事件] 按鈕很小，但功能強大。 隱藏在該按鈕後面的是一個功能表，可讓您以多種方式篩選事件，而且每種方式都會產生重大影響：

• 事件名稱篩選：篩選包含符合篩選文字的任何事件名稱。

• UI 活動篩選：您可以使用核取方塊來排除大型事件類別，讓您更輕鬆地專注于您正在調查的區域。 例如，如果您只對網路活動感興趣，您可以篩選掉 UI 和垃圾收集的所有噪音。

• 時間閾值篩選：這項功能會篩選出工期小於一毫秒的頂層事件。 在許多情況下，這會大幅簡化瀑布式檢視，並協助您專注于更具影響力的事件。
  

HTML5 腳本事件 如果您使用 媒體查詢聆聽者 或一般 Observers，您現在可以在執行效能分析會話時識別其各自的成本。

框架分組[排序方式] 下拉式清單和 [篩選事件] 功能表之間的按鈕可切換 [框架] 群組。 這會將頂層事件分組為其相對應的工作單位 (或「框架」) 發生動畫或視覺更新的期間。 框架會被視為其他事件，因此可以排序和篩選，並提供包含時間摘要。

使用者量值 如果您使用 performance.mark () API 在時程表中新增三角形，以指出特定事件發生的位置，效能.量值 () API 會擴充效能標記的實用性。 使用 performance.measure () 建立包含兩個 performance.mark () 事件之間的時間的使用者量值事件，然後以滑鼠右鍵按一下事件，然後使用 [篩選至事件] 選項選取兩個標記之間的事件。

DOM 的色彩化此功能為 DOM 元素、字串常值和數位常值新增色彩。 除了讓不同 F12 工具中的內容看起來和行為更一樣之外，還可為 UI 回應工具增添更多視覺效果。

選取摘要 當您選取時程表的一部分時，[事件詳細資料] 窗格會顯示選取範圍的摘要。 將游標停留在圓形圖的不同區段上，以取得包含區段事件類別的工具提示。

支援 console.timeStamp () 在您的程式碼或分析會話期間使用主機.timeStamp () 方法，會在自分析會話開始後一直有時間的時程表上建立使用者標記。

記憶體工具變更

Dominator foldingDominator folding 可從頂層檢視中移除做為另一個物件邏輯元件的物件，以協助簡化快照的內容 (例如，<DIV>內的<BR>、函數) 所持有的範圍，而且往往會是額外的詳細資料，而不會改善您對資料的深入見解。 但可能會浪費時間。 

例如，下列影像會在檢視前後顯示，示範系統管理員資料夾如何改善工具所訴說的「故事」。 折迭的檢視會顯示 30 HTML <DIV>元素，其記憶體 () MB (MB，且會保留以中斷連結的 DOM 節點。 在許多情況下，瞭解物件的組成並不重要，因為只要知道物件太大或是漏掉 (，尤其是在使用協力廠商文件庫) 時。

DOM 的色彩化、字串&數位常值此功能為 DOM 元素、字串常值及數位常值新增色彩。 除了讓不同 F12 工具中的內容看起來和行為更一樣之外，它讓記憶體分析在視覺上變得更有趣。

根迴圈篩選能夠調查物件的組成，而不會在不知不覺中遺失迴圈參照路徑嗎？ 此功能會偵測到迴圈和「修剪」的子參照，讓您不會因為將它們帶入無限而變得混淆。 此外，它會為這些參照加上批註，以便在參照「已修剪」時清楚說明。

匯入/匯出會話 您不應該每次想要分析所產生的資料，或與同事共用該資料時，都重現您的測試案例。 匯入 (資料夾) 並匯出 (磁片) 記憶體工具圖示列上的圖示可讓您將記憶體快照儲存到稍後可以匯入的檔案。

模擬工具變更

[設定持續性與重設] [持續模擬設定] 圖示會新增至模擬工具。 這會維持您目前的模擬設定，直到特別停用為止。 這可讓您工作、關閉瀏覽器，然後再原封不動地使用模擬設定。 此圖示右側是 [重設模擬設定] 圖示，可將工具快速重設回預設值。