IE良心工具：提高開發(fā)效率的F12開發(fā)者工具
隨著網(wǎng)站復(fù)雜程度不斷增加和全新開發(fā)技 術(shù)的加入，一款功能強(qiáng)大的瀏覽器開發(fā)者工具，對于所有的前端開發(fā)者來說至關(guān)重要。為了幫助開發(fā)者們提高開發(fā)效率，微軟對IE11上的F12開發(fā)者工具進(jìn)行 了全方位的大修訂，用更加現(xiàn)代、簡潔的界面和全新完善的功能，滿足開發(fā)者們的各類使用需求。
對于所有開發(fā)者來說，使用IE11自帶的F12開發(fā)者工具，可以讓你以***的效率調(diào)試當(dāng)前開發(fā)的網(wǎng)頁。無論是需要調(diào)整CSS布局還是查找內(nèi)存泄漏，你都能在F12開發(fā)者工具中找到相應(yīng)的幫助工具。
全新的界面與功能改進(jìn)
開發(fā)者在開發(fā)的過程中，可以直接通過鍵盤上的F12按鍵打開IE11上自帶的開發(fā)者工具。使用了全新的UI設(shè)計是IE11上F12開發(fā)者工具的一大 變化，全新的開發(fā)者工具把更大的窗口空間留給了代碼，利用側(cè)邊欄和Windows 8 Modern UI的設(shè)計風(fēng)格，讓開發(fā)者們在進(jìn)行網(wǎng)頁測試和調(diào)整的過程中能更加方便。同時，與Windows 8的扁平風(fēng)格設(shè)計統(tǒng)一之后，讓IE11開發(fā)者工具看上去與操作系統(tǒng)和瀏覽器更加協(xié)調(diào)，沒有了多余的圖標(biāo)和陰影效果，并且將上方的導(dǎo)航菜單統(tǒng)一起來，一切內(nèi) 容都一目了然。
比起界面的變化，對于開發(fā)者來說更重要的是全新的F12開發(fā)者工具中加入了更為實用的功能性改進(jìn)。在IE11開發(fā)者工具中，有“控制臺”工具、 DOM資源管理器工具等八個改進(jìn)之后的實用性工具，每個工具在 F12 工具界面中都有自己的選項卡。它們將幫助你簡化網(wǎng)頁調(diào)試過程，提高你的開發(fā)效率。
如何幫助開發(fā)者提高開發(fā)效率
全新的F12開發(fā)者工具由Visual Studio 團(tuán)隊和 IE 團(tuán)隊密切合作構(gòu)建而成，并對這些工具進(jìn)行了顛覆性的重新設(shè)計和增強(qiáng)。一些升級后和新添加的功能可以幫助開發(fā)人員跨多種設(shè)備來構(gòu)建、診斷和優(yōu)化網(wǎng)站和應(yīng)用，讓開發(fā)調(diào)試更快，更容易。
-
DOM資源管理器工具
就拿開發(fā)者們常用的DOM資源管理器工具來說，IE10及之前的開發(fā)者工具中也有DOM 資源管理器，但是開發(fā)者們卻并與不愿意用它。缺乏實時的DOM更新是造成這種情況的主要原因，開發(fā)者們沒法用它來查看CSS樣式更新和附加的DOM元素。 但在IE11的開發(fā)者工具中，IE就添加上了實時更新的功能。
另外對于前端開發(fā)，處理 JavaScript的問題是必不可少的。找到附加事件需要不少瀏覽器端的debug代碼以及反復(fù)的嘗試，最終才能確定需要的響應(yīng)事件或者方法組合。正如 下面的截圖，開發(fā)者在點擊登錄后就可以直接在DOM Explorer的事件窗口下找到對應(yīng)的jQuery函數(shù)，包括具體的路徑和函數(shù)位置。對于前端開發(fā)者來說，這真的是可以省下不少時間，而在之前的IE瀏 覽器中這些都是無法實現(xiàn)的。
IE11的開發(fā)者工具還對樣式審查功能進(jìn)行了一次內(nèi)在的更新，它會首先顯示那些更加重用的元素類型，從開發(fā)的角度來說這是非常合理和人性的改動；此 外，現(xiàn)在你還可以直接在頁面上右鍵審查元素，右鍵審查元素的加入無疑讓IE11開發(fā)者工具增加了***印象分，因為之前如果你想要查看某一個div或者圖片 的代碼，需要先F12打開開發(fā)者工具，接著再使用選擇箭頭選中要看到的對象。而現(xiàn)在，你只需要在查看的對象上右鍵審查元素就可以直接打開發(fā)者工具了。
-
UI響應(yīng)工具
UI響應(yīng)工具是另一個開發(fā)者在網(wǎng)頁開發(fā)過程中常用的測試工具，顧名思義就是查看UI響應(yīng)時間的工具，具體來說就是幫助開發(fā)者確定應(yīng)用中的哪些組件占用了多少CPU時間，之后可以更有針對性的進(jìn)行優(yōu)化，從而***限度地改善應(yīng)用性能，同時提高開發(fā)的效率。
現(xiàn)在在IE11中的UI響應(yīng)工具用了最為直觀的可視化的形式顯示HTML、CSS 和 JavaScript 的執(zhí)行情況以及對布局和垃圾回收等方面的影響，通過樹狀圖表示了每個時間點對CPU的占用率。
下面的圖形就展示了頁面的FPS，也就是每秒鐘的幀數(shù)，這是我們判斷頁面丟不丟幀最直觀的方法，也就是看頁面“卡不卡”。你可以從統(tǒng)計數(shù)據(jù)中準(zhǔn)確了 解應(yīng)用的響應(yīng)性以及呈現(xiàn)的流暢度，從而識別出影響應(yīng)用性能的具體因素，更加有針對性地對應(yīng)用進(jìn)行優(yōu)化。而下方還有詳細(xì)的時間使用情況，這些只要我們打開 UI響應(yīng)工具再加載頁面，IE11就會幫我們自動收集完成。
在測試的過程中，開發(fā)者可以打開網(wǎng)頁之后F12啟用開發(fā)者工具，在點擊UI響應(yīng)工具的按鈕開始一個檢測，等待頁面載入完畢之后停止。展現(xiàn)在你面前的 將是一個根據(jù)網(wǎng)站載入情況生成的彩色柱形圖，按時間的推移呈現(xiàn)出跌宕起伏的變化。時間軸上顯示了Loading加載時間等7個主要的事件類別。開發(fā)者可以 在選定上面某個時間段后，此時間段加載的包含、引導(dǎo)、加載網(wǎng)頁相關(guān)資源就會分解出現(xiàn)在時間線詳細(xì)信息區(qū)塊。通過這些數(shù)據(jù)，你可以準(zhǔn)確的了解當(dāng)前應(yīng)用的響應(yīng) 性以及呈現(xiàn)的流暢性。從而識別出影響應(yīng)用性能的具體原因，更加有針對性地對應(yīng)用進(jìn)行優(yōu)化。
DOM資源管理器和UI響應(yīng)工具作為眾多更新中的個例，讓IE11的開發(fā)者工具變得更加友好和先進(jìn)。同時，通過這些實用的工具變化，能夠讓開發(fā)者在調(diào)試網(wǎng)頁的過程更加高效。
探索其他IE11開發(fā)者工具
除了F12開發(fā)者工具， 微軟還推出了modern.IE網(wǎng)站，旨在幫助開發(fā)者們減少在測試瀏覽器兼容性上所用的時間，讓他們能夠?qū)⒏嗟木Ψ旁趧?chuàng)新上。modern.IE 是提供免費開發(fā)工具和資源的開發(fā)人員中心，因為仍有大量用戶停留在老版本的IE瀏覽器上，所以對于開發(fā)者來說針對老版本進(jìn)行適配就是一個不小的挑戰(zhàn)，而借 助modern.IE，開發(fā)者們能夠快速地完成各種版本的測試，從根本上提高開發(fā)效率。
伴隨著眾多的改進(jìn)和新功能，F(xiàn)12開發(fā)者工具已經(jīng)從曾經(jīng)的“小樹苗”成長為開發(fā)者必備的開發(fā)“利器”了。IE11一直在為開發(fā)者們創(chuàng)造***的開發(fā)條件，現(xiàn)在就升級到IE11，感受微軟的誠意之作，親自體會其中的點滴變化吧！
