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，感受微軟的誠意之作，親自體會其中的點滴變化吧！
稿源：WPDang

相關連結

• Internet Explorer 的詳細介紹：請點這裡

• Internet Explorer 的下載地址：請點這裡

本文轉載自：OSCHINA