隨著網(wǎng)站復(fù)雜程度不斷增加和全新開(kāi)發(fā)技 術(shù)的加入，一款功能強(qiáng)大的瀏覽器開(kāi)發(fā)者工具，對(duì)于所有的前端開(kāi)發(fā)者來(lái)說(shuō)至關(guān)重要。為了幫助開(kāi)發(fā)者們提高開(kāi)發(fā)效率，微軟對(duì)IE11上的F12開(kāi)發(fā)者工具進(jìn)行 了全方位的大修訂，用更加現(xiàn)代、簡(jiǎn)潔的界面和全新完善的功能，滿足開(kāi)發(fā)者們的各類使用需求。

對(duì)于所有開(kāi)發(fā)者來(lái)說(shuō)，使用IE11自帶的F12開(kāi)發(fā)者工具，可以讓你以***的效率調(diào)試當(dāng)前開(kāi)發(fā)的網(wǎng)頁(yè)。無(wú)論是需要調(diào)整CSS布局還是查找內(nèi)存泄漏，你都能在F12開(kāi)發(fā)者工具中找到相應(yīng)的幫助工具。

全新的界面與功能改進(jìn)

開(kāi)發(fā)者在開(kāi)發(fā)的過(guò)程中，可以直接通過(guò)鍵盤上的F12按鍵打開(kāi)IE11上自帶的開(kāi)發(fā)者工具。使用了全新的UI設(shè)計(jì)是IE11上F12開(kāi)發(fā)者工具的一大 變化，全新的開(kāi)發(fā)者工具把更大的窗口空間留給了代碼，利用側(cè)邊欄和Windows 8 Modern UI的設(shè)計(jì)風(fēng)格，讓開(kāi)發(fā)者們?cè)谶M(jìn)行網(wǎng)頁(yè)測(cè)試和調(diào)整的過(guò)程中能更加方便。同時(shí)，與Windows 8的扁平風(fēng)格設(shè)計(jì)統(tǒng)一之后，讓IE11開(kāi)發(fā)者工具看上去與操作系統(tǒng)和瀏覽器更加協(xié)調(diào)，沒(méi)有了多余的圖標(biāo)和陰影效果，并且將上方的導(dǎo)航菜單統(tǒng)一起來(lái)，一切內(nèi) 容都一目了然。

比起界面的變化，對(duì)于開(kāi)發(fā)者來(lái)說(shuō)更重要的是全新的F12開(kāi)發(fā)者工具中加入了更為實(shí)用的功能性改進(jìn)。在IE11開(kāi)發(fā)者工具中，有“控制臺(tái)”工具、 DOM資源管理器工具等八個(gè)改進(jìn)之后的實(shí)用性工具，每個(gè)工具在 F12 工具界面中都有自己的選項(xiàng)卡。它們將幫助你簡(jiǎn)化網(wǎng)頁(yè)調(diào)試過(guò)程，提高你的開(kāi)發(fā)效率。

如何幫助開(kāi)發(fā)者提高開(kāi)發(fā)效率

全新的F12開(kāi)發(fā)者工具由Visual Studio 團(tuán)隊(duì)和 IE 團(tuán)隊(duì)密切合作構(gòu)建而成，并對(duì)這些工具進(jìn)行了顛覆性的重新設(shè)計(jì)和增強(qiáng)。一些升級(jí)后和新添加的功能可以幫助開(kāi)發(fā)人員跨多種設(shè)備來(lái)構(gòu)建、診斷和優(yōu)化網(wǎng)站和應(yīng)用，讓開(kāi)發(fā)調(diào)試更快，更容易。

• DOM資源管理器工具

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

另外對(duì)于前端開(kāi)發(fā)，處理 JavaScript的問(wèn)題是必不可少的。找到附加事件需要不少瀏覽器端的debug代碼以及反復(fù)的嘗試，最終才能確定需要的響應(yīng)事件或者方法組合。正如 下面的截圖，開(kāi)發(fā)者在點(diǎn)擊登錄后就可以直接在DOM Explorer的事件窗口下找到對(duì)應(yīng)的jQuery函數(shù)，包括具體的路徑和函數(shù)位置。對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，這真的是可以省下不少時(shí)間，而在之前的IE瀏 覽器中這些都是無(wú)法實(shí)現(xiàn)的。

IE11的開(kāi)發(fā)者工具還對(duì)樣式審查功能進(jìn)行了一次內(nèi)在的更新，它會(huì)首先顯示那些更加重用的元素類型，從開(kāi)發(fā)的角度來(lái)說(shuō)這是非常合理和人性的改動(dòng)；此 外，現(xiàn)在你還可以直接在頁(yè)面上右鍵審查元素，右鍵審查元素的加入無(wú)疑讓IE11開(kāi)發(fā)者工具增加了***印象分，因?yàn)橹叭绻阆胍榭茨骋粋€(gè)div或者圖片 的代碼，需要先F12打開(kāi)開(kāi)發(fā)者工具，接著再使用選擇箭頭選中要看到的對(duì)象。而現(xiàn)在，你只需要在查看的對(duì)象上右鍵審查元素就可以直接打開(kāi)發(fā)者工具了。

• UI響應(yīng)工具

UI響應(yīng)工具是另一個(gè)開(kāi)發(fā)者在網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程中常用的測(cè)試工具，顧名思義就是查看UI響應(yīng)時(shí)間的工具，具體來(lái)說(shuō)就是幫助開(kāi)發(fā)者確定應(yīng)用中的哪些組件占用了多少CPU時(shí)間，之后可以更有針對(duì)性的進(jìn)行優(yōu)化，從而***限度地改善應(yīng)用性能，同時(shí)提高開(kāi)發(fā)的效率。

現(xiàn)在在IE11中的UI響應(yīng)工具用了最為直觀的可視化的形式顯示HTML、CSS 和 JavaScript 的執(zhí)行情況以及對(duì)布局和垃圾回收等方面的影響，通過(guò)樹狀圖表示了每個(gè)時(shí)間點(diǎn)對(duì)CPU的占用率。

下面的圖形就展示了頁(yè)面的FPS，也就是每秒鐘的幀數(shù)，這是我們判斷頁(yè)面丟不丟幀最直觀的方法，也就是看頁(yè)面“卡不卡”。你可以從統(tǒng)計(jì)數(shù)據(jù)中準(zhǔn)確了 解應(yīng)用的響應(yīng)性以及呈現(xiàn)的流暢度，從而識(shí)別出影響應(yīng)用性能的具體因素，更加有針對(duì)性地對(duì)應(yīng)用進(jìn)行優(yōu)化。而下方還有詳細(xì)的時(shí)間使用情況，這些只要我們打開(kāi) UI響應(yīng)工具再加載頁(yè)面，IE11就會(huì)幫我們自動(dòng)收集完成。

在測(cè)試的過(guò)程中，開(kāi)發(fā)者可以打開(kāi)網(wǎng)頁(yè)之后F12啟用開(kāi)發(fā)者工具，在點(diǎn)擊UI響應(yīng)工具的按鈕開(kāi)始一個(gè)檢測(cè)，等待頁(yè)面載入完畢之后停止。展現(xiàn)在你面前的 將是一個(gè)根據(jù)網(wǎng)站載入情況生成的彩色柱形圖，按時(shí)間的推移呈現(xiàn)出跌宕起伏的變化。時(shí)間軸上顯示了Loading加載時(shí)間等7個(gè)主要的事件類別。開(kāi)發(fā)者可以 在選定上面某個(gè)時(shí)間段后，此時(shí)間段加載的包含、引導(dǎo)、加載網(wǎng)頁(yè)相關(guān)資源就會(huì)分解出現(xiàn)在時(shí)間線詳細(xì)信息區(qū)塊。通過(guò)這些數(shù)據(jù)，你可以準(zhǔn)確的了解當(dāng)前應(yīng)用的響應(yīng) 性以及呈現(xiàn)的流暢性。從而識(shí)別出影響應(yīng)用性能的具體原因，更加有針對(duì)性地對(duì)應(yīng)用進(jìn)行優(yōu)化。

DOM資源管理器和UI響應(yīng)工具作為眾多更新中的個(gè)例，讓IE11的開(kāi)發(fā)者工具變得更加友好和先進(jìn)。同時(shí)，通過(guò)這些實(shí)用的工具變化，能夠讓開(kāi)發(fā)者在調(diào)試網(wǎng)頁(yè)的過(guò)程更加高效。

探索其他IE11開(kāi)發(fā)者工具

除了F12開(kāi)發(fā)者工具， 微軟還推出了modern.IE網(wǎng)站，旨在幫助開(kāi)發(fā)者們減少在測(cè)試瀏覽器兼容性上所用的時(shí)間，讓他們能夠?qū)⒏嗟木Ψ旁趧?chuàng)新上。modern.IE 是提供免費(fèi)開(kāi)發(fā)工具和資源的開(kāi)發(fā)人員中心，因?yàn)槿杂写罅坑脩敉Ａ粼诶习姹镜腎E瀏覽器上，所以對(duì)于開(kāi)發(fā)者來(lái)說(shuō)針對(duì)老版本進(jìn)行適配就是一個(gè)不小的挑戰(zhàn)，而借 助modern.IE，開(kāi)發(fā)者們能夠快速地完成各種版本的測(cè)試，從根本上提高開(kāi)發(fā)效率。

伴隨著眾多的改進(jìn)和新功能，F(xiàn)12開(kāi)發(fā)者工具已經(jīng)從曾經(jīng)的“小樹苗”成長(zhǎng)為開(kāi)發(fā)者必備的開(kāi)發(fā)“利器”了。IE11一直在為開(kāi)發(fā)者們創(chuàng)造***的開(kāi)發(fā)條件，現(xiàn)在就升級(jí)到IE11，感受微軟的誠(chéng)意之作，親自體會(huì)其中的點(diǎn)滴變化吧！

本文出自：http://www.wpdang.com/archives/112645.html