IE 良心工具：提高開發效率的 F12 開發者工具

隨著網站復雜程度不斷增加和全新開發技 術的加入，一款功能強大的瀏覽器開發者工具，對于所有的前端開發者來說至關重要。為了幫助開發者們提高開發效率，微軟對IE11上的F12開發者工具進行 了全方位的大修訂，用更加現代、簡潔的界面和全新完善的功能，滿足開發者們的各類使用需求。

對于所有開發者來說，使用IE11自帶的F12開發者工具，可以讓你以最高的效率調試當前開發的網頁。無論是需要調整CSS布局還是查找內存泄漏，你都能在F12開發者工具中找到相應的幫助工具。

全新的界面與功能改進

開發者在開發的過程中，可以直接通過鍵盤上的F12按鍵打開IE11上自帶的開發者工具。使用了全新的UI設計是IE11上F12開發者工具的一大 變化，全新的開發者工具把更大的窗口空間留給了代碼，利用側邊欄和Windows 8 Modern UI的設計風格，讓開發者們在進行網頁測試和調整的過程中能更加方便。同時，與Windows 8的扁平風格設計統一之后，讓IE11開發者工具看上去與操作系統和瀏覽器更加協調，沒有了多余的圖標和陰影效果，并且將上方的導航菜單統一起來，一切內 容都一目了然。

比起界面的變化，對于開發者來說更重要的是全新的F12開發者工具中加入了更為實用的功能性改進。在IE11開發者工具中，有“控制臺”工具、 DOM資源管理器工具等八個改進之后的實用性工具，每個工具在 F12 工具界面中都有自己的選項卡。它們將幫助你簡化網頁調試過程，提高你的開發效率。

如何幫助開發者提高開發效率

全新的F12開發者工具由Visual Studio 團隊和 IE 團隊密切合作構建而成，并對這些工具進行了顛覆性的重新設計和增強。一些升級后和新添加的功能可以幫助開發人員跨多種設備來構建、診斷和優化網站和應用，讓開發調試更快，更容易。

• DOM資源管理器工具

就拿開發者們常用的DOM資源管理器工具來說，IE10及之前的開發者工具中也有DOM 資源管理器，但是開發者們卻并與不愿意用它。缺乏實時的DOM更新是造成這種情況的主要原因，開發者們沒法用它來查看CSS樣式更新和附加的DOM元素。 但在IE11的開發者工具中，IE就添加上了實時更新的功能。

另外對于前端開發，處理 JavaScript的問題是必不可少的。找到附加事件需要不少瀏覽器端的debug代碼以及反復的嘗試，最終才能確定需要的響應事件或者方法組合。正如 下面的截圖，開發者在點擊登錄后就可以直接在DOM Explorer的事件窗口下找到對應的jQuery函數，包括具體的路徑和函數位置。對于前端開發者來說，這真的是可以省下不少時間，而在之前的IE瀏 覽器中這些都是無法實現的。

IE11的開發者工具還對樣式審查功能進行了一次內在的更新，它會首先顯示那些更加重用的元素類型，從開發的角度來說這是非常合理和人性的改動；此 外，現在你還可以直接在頁面上右鍵審查元素，右鍵審查元素的加入無疑讓IE11開發者工具增加了第一印象分，因為之前如果你想要查看某一個div或者圖片 的代碼，需要先F12打開開發者工具，接著再使用選擇箭頭選中要看到的對象。而現在，你只需要在查看的對象上右鍵審查元素就可以直接打開發者工具了。

• UI響應工具

UI響應工具是另一個開發者在網頁開發過程中常用的測試工具，顧名思義就是查看UI響應時間的工具，具體來說就是幫助開發者確定應用中的哪些組件占用了多少CPU時間，之后可以更有針對性的進行優化，從而最大限度地改善應用性能，同時提高開發的效率。

現在在IE11中的UI響應工具用了最為直觀的可視化的形式顯示HTML、CSS 和 JavaScript 的執行情況以及對布局和垃圾回收等方面的影響，通過樹狀圖表示了每個時間點對CPU的占用率。

下面的圖形就展示了頁面的FPS，也就是每秒鐘的幀數，這是我們判斷頁面丟不丟幀最直觀的方法，也就是看頁面“卡不卡”。你可以從統計數據中準確了 解應用的響應性以及呈現的流暢度，從而識別出影響應用性能的具體因素，更加有針對性地對應用進行優化。而下方還有詳細的時間使用情況，這些只要我們打開 UI響應工具再加載頁面，IE11就會幫我們自動收集完成。

在測試的過程中，開發者可以打開網頁之后F12啟用開發者工具，在點擊UI響應工具的按鈕開始一個檢測，等待頁面載入完畢之后停止。展現在你面前的 將是一個根據網站載入情況生成的彩色柱形圖，按時間的推移呈現出跌宕起伏的變化。時間軸上顯示了Loading加載時間等7個主要的事件類別。開發者可以 在選定上面某個時間段后，此時間段加載的包含、引導、加載網頁相關資源就會分解出現在時間線詳細信息區塊。通過這些數據，你可以準確的了解當前應用的響應 性以及呈現的流暢性。從而識別出影響應用性能的具體原因，更加有針對性地對應用進行優化。

DOM資源管理器和UI響應工具作為眾多更新中的個例，讓IE11的開發者工具變得更加友好和先進。同時，通過這些實用的工具變化，能夠讓開發者在調試網頁的過程更加高效。

探索其他IE11開發者工具

除了F12開發者工具， 微軟還推出了modern.IE網站，旨在幫助開發者們減少在測試瀏覽器兼容性上所用的時間，讓他們能夠將更多的精力放在創新上。modern.IE 是提供免費開發工具和資源的開發人員中心，因為仍有大量用戶停留在老版本的IE瀏覽器上，所以對于開發者來說針對老版本進行適配就是一個不小的挑戰，而借 助modern.IE，開發者們能夠快速地完成各種版本的測試，從根本上提高開發效率。

伴隨著眾多的改進和新功能，F12開發者工具已經從曾經的“小樹苗”成長為開發者必備的開發“利器”了。IE11一直在為開發者們創造最好的開發條件，現在就升級到IE11，感受微軟的誠意之作，親自體會其中的點滴變化吧！