IE11全新的F12開發(fā)人員工具詳解

隨著Windows 8.1正式發(fā)布，之前網(wǎng)上已曝光該版本將包含全新Bing語音識(shí)別、Fresh Paint，包含更多動(dòng)態(tài)磁貼外觀設(shè)定、重新調(diào)整的多任務(wù)操作界面等，但I(xiàn)E11的出現(xiàn)還是讓不少網(wǎng)友喜出望外。其中IE11的F12 開發(fā)人員工具更是讓開發(fā)者大快人心。下面我們一起來看看F12開發(fā)者工具到底帶來了哪些與眾不同的改變。

1.UI響應(yīng)工具(CTRL + 5)

初瞥下新的F12開發(fā)人員工具，發(fā)現(xiàn)界面整體升級(jí)成了Windows8 metro風(fēng)格，和操作系統(tǒng)界面更搭配，操作按鈕，數(shù)據(jù)顯示，統(tǒng)計(jì)圖表 操作更直觀方便。

2.功能升級(jí)

IE11的F12開發(fā)者工具具有顛覆性設(shè)計(jì)和增強(qiáng)，可以幫助開發(fā)人員跨多種設(shè)備來構(gòu)建、診斷和優(yōu)化現(xiàn)代網(wǎng)站和應(yīng)用。F12開發(fā)者工具可幫助Web開發(fā)人員快速、高效地完成各項(xiàng)工作。

F12由Visual Studio團(tuán)隊(duì)和IE團(tuán)隊(duì)密切合作構(gòu)建而成，旨在為開發(fā)人員提供可操作的數(shù)據(jù)，幫助開發(fā)人員快速找出并解決問題。全新的F12包含用于診斷和修復(fù)性能問題的工具以及幫助您深入了解IE 如何布局和呈現(xiàn)您的應(yīng)用的工具，可以幫助您提供快速而流暢的Web體驗(yàn)。F12支持現(xiàn)代Web開發(fā)人員所使用的快速、迭代工作流。

F12最重要的一些新功能：

• ?  新且更干凈的用戶界面。
• ?  新的響應(yīng)、內(nèi)存以及模擬工具。
• ?  常見工具中新的、改進(jìn)的功能。
• ?  更快、更簡(jiǎn)單的工作流。

下面我們對(duì)F12的一些新功能重點(diǎn)介紹一下：

（1）使用UI響應(yīng)工具加快網(wǎng)頁速度

當(dāng)頁面運(yùn)行時(shí)，新的UI響應(yīng)工具為其提供配置文件，從而標(biāo)識(shí)頁面速度減慢的位置以及花費(fèi)時(shí)間過長(zhǎng)的進(jìn)程。開發(fā)人員可以觀察CPU使用率、幀速率與頁面行為之間的關(guān)系。

要點(diǎn)： 當(dāng)Windows 7并非處于最新狀態(tài)時(shí)，在Windows 7上的IE11中可能會(huì)禁用F12開發(fā)人員工具中的UI響應(yīng)工具。如果 UI 響應(yīng)工具無法在Windows 7上安裝的IE11中正常工作，請(qǐng)確保已經(jīng)安裝 Windows更新中的所有可用更新。

（2）CSS、HTML以及JavaScript自動(dòng)完成

鍵入JavaScript、HTML 或 CSS代碼時(shí)， 控制臺(tái)和DOM資源管理器工具會(huì)提供自動(dòng)完成建議。自動(dòng)完成有助于實(shí)現(xiàn)以下操作：

• 使API更容易被發(fā)現(xiàn)；例如控制臺(tái)API方法；
• 減少鍵入錯(cuò)誤；
• 加速工作流；

（3）屏幕和GPS模擬

使用模擬工具，你可以在小至240像素寬的移動(dòng)屏幕上，大至4k家庭影院屏幕的所有屏幕上預(yù)覽站點(diǎn)外觀。GPS模擬測(cè)試移動(dòng)網(wǎng)頁如何在世界任何位置進(jìn)行響應(yīng)。

（4）有意義的內(nèi)存分析

隨著時(shí)間的推移跟蹤內(nèi)存使用情況是一個(gè)重要工具，用于調(diào)試頁面速度緩慢和崩潰情況。新的內(nèi)存工具提供了以下內(nèi)容：

• 整體內(nèi)存使用情況的時(shí)間線視圖。
• 內(nèi)存使用情況快照，顯示某個(gè)給定時(shí)間點(diǎn)網(wǎng)頁的內(nèi)存使用情況。
• 快照比較，查明兩個(gè)快照之間更改內(nèi)存使用情況的源。這有助于標(biāo)識(shí)網(wǎng)頁運(yùn)行時(shí)和用戶與網(wǎng)頁交互時(shí)顯露的內(nèi)存問題。
• 高亮顯示的孤立元素，顯示可以回收元素的位置。

（5）右鍵單擊以檢查

使用IE11在DOM資源管理器工具中選擇頁面元素非常輕松。右鍵單擊頁面上的元素，然后單擊上下文菜單中的“檢查元素”，以在DOM資源管理器工具中突出顯示元素。

3.切換回以前的IEOldF12模式

很多朋友安裝IE11后發(fā)現(xiàn)無法像舊版那樣切換兼容模式了，于是很快就卸載了，其實(shí)IE11預(yù)覽版實(shí)際上有兩個(gè)開發(fā)工具，一個(gè)是新版（F12工具），另一個(gè)是舊版（IE Devtool工具）。新版很誘惑，舊版也不能少啊，那怎么辦呢？

下載：https://github.com/Linrstudio/IEOldF12/

這里有一個(gè)小工具，可以方便切換新舊版開發(fā)工具：

切換到舊版F12工具后，那些不兼容IE11的網(wǎng)站，用IE7模式都可以工作了。

微軟全新的F12工具允許開發(fā)者對(duì)網(wǎng)站進(jìn)行迭代、可視化調(diào)試和調(diào)優(yōu)。Modern.ie則允許跨瀏覽器測(cè)試。IE11支持開發(fā)人員使用最多的最新標(biāo)準(zhǔn)和框架，這一切都使得現(xiàn)代網(wǎng)絡(luò)的開發(fā)更加容易。開發(fā)人員可在IE11平臺(tái)上利用專業(yè)品質(zhì)的網(wǎng)絡(luò)視頻、超快速的2D和3D網(wǎng)絡(luò)技術(shù)來充分利用硬件、打造新體驗(yàn)。微軟演示的Lawn Mark可以為開發(fā)者提供新一代網(wǎng)站和應(yīng)用所需的高性能HTML5技術(shù)。這一切都讓開發(fā)者感受到了微軟的貼心和進(jìn)步。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)