IE11 全新的F12開發者工具

 

我討厭debug，相信也沒多少開發者會喜歡。可是當代碼出錯以後確定是要找出問題出在哪裏的。不過網頁開發的時候遇到 BUG 是一件再正常不過的事情了，咱們不能保證本身的代碼萬無一失，因而使用瀏覽器的開發者工具調試是咱們解決問題最快捷的方法了。微軟在 Windows 8.1 預覽版中帶來了全新的 IE11 瀏覽器，不光加入了諸如 WebGL 支持等功能，還將F12開發者工具進行了從新設計，這是IE有史以來開發者工具最大的的更新。

隨着網站複雜程度的增長，原有的IE開發者工具已經漸漸不能知足開發者的需求，因此微軟此次推出的IE11開發者工具更新主要是如下幾點：

· 更加現代、簡潔的界面更新

· 新的UI響應、內存檢測和仿真工具

· 已有工具和功能的增強

· 更加簡單快速的流程

如今 Windows 8.1正式版發佈，修復了預覽版中的錯誤後，新的開發者工具更加實用和高效了，下面就讓咱們一塊兒來認識下此次的主要更新：

從新構建的UI

和如今其餘瀏覽器的開發者工具同樣，IE11以前的開發者工具採用的也是基於下拉菜單和標籤頁的佈局，不過橫向的菜單佔據了寶貴了網頁空間，尤爲是在debug的時候，咱們但願改完一個參數就能夠看到總體的變化。而IE11 的開發者工具將菜單導航放到了左側，而且採用了簡潔易用的圖標，對於開發者們來講花點時間認識新的圖標比不停的上下拖動菜單輕鬆多了。

 

新的菜單和 Windows 8 簡潔現代的風格更加貼近。欸有多餘的圖標和陰影效果，新的開發者工具把更大的可用空間留給了代碼，和前代相比，顯而易見，界面上的變化是顯而易見的。

除了佈局和圖標的變化外，選中後頁面高亮顯示的功能讓咱們的查看對應元素也變得很是方便。

對於沒有的功能，此次更新都給加上了，而對於已經有的功能的改進主要是界面和流程上的簡化。以網絡資源檢測爲例，雖說功能上沒有任何硬傷，可是UI設計和現代的Windows 8 界面很不搭調。

再看更新後的界面， 和Windows 8同樣的扁平風格設計，去掉了多餘的樣式和設計，而且將上方的導航菜單統一塊兒來，對於我來講，在這樣的界面下就算看到花10秒才能加載完的文件也要比用以前的開發者工具來的舒服啊，固然啦，這樣的文件仍是不要看到的好。

界面的改變一目瞭然，可是有些須要更加實用的功能性改進是須要咱們使用後才能發現的，而我在用了 IE11的開發者工具才幾天以後就已經徹底喜歡上了。尤爲是但願網站能夠在IE 下表現更好的時候。下面咱們就看看最經常使用的一些功能改進。

DOM Explorer

IE10和以前的開發者工具也有DOM Explorer，可是你們都不想用它。對不少人來講缺少實時的DOM更新是不想用它的主要緣由，咱們無法用它來查看CSS樣式更新和附加的DOM元素。終於，在IE11的開發者工具上實時更新的功能終於加上了。

另外對於前端開發，處理 Javascript的問題是必不可少的。找到附加事件須要很多瀏覽器端的debug代碼以及反覆的嘗試，最終才能肯定須要的響應事件或者方法組合。下面的截圖就是我在點擊登陸後就能夠直接在DOM Explorer下的事件窗口下找到對應的jQuery函數，包括具體的路徑和函數位置。對於前端開發者來講這真的是能夠省下很多時間而在以前的IE瀏覽器中這些都是沒法實現的。

定位Javascript事件是從無到有的變化，而樣式審查則是更加實用性的升級。以前IE的開發者工具在審查元素的時候它將全部的樣式樣式一一列出，咱們想要修改一些經常使用樣式還須要往下滾動找到它們。

而IE11的開發者工具對樣式審查功能進行了一次內在的更新，它會首先顯示那些更加劇用的元素類型，從開發的角度來講這是很是合理和人性的改動。

另外如今也能夠直接在頁面上右鍵審查元素了，又是一處提升實用效率的改進，提升效果的改進還不只如此:

· 在DOM Explorer內拖拽移動元素位置

· 下方的元素面包屑導航讓查找元素和代碼更加便捷

· 智能感知功能，能夠更快更輕鬆的定位樣式規則

右鍵審查元素的加入讓IE11的開發者工具和其餘瀏覽器的開發者工具擁有同樣好的第一印象，要知道以前咱們想要查看某一個div或者圖片的代碼，咱們須要先F12打開開發者工具，接着再使用選擇箭頭選中要看到的對象。而如今只須要在你要查看的對象上右鍵審查元素就能夠直接打開發者工具了。

新的麪包屑導航會直觀的顯示出當前查看元素的位置和層級關係，咱們可以輕鬆的點擊當前元素的上級，直接修改。

說到修改，IE11開發者工具擁有自動補全功能，在輸入首字母以後就可以看到響應規則的代碼，你可使用鼠標或者上下箭頭來選擇，回車或者Tab來肯定。更好用的是，即便你只是選擇了某個規則以後，頁面會馬上使用你選擇的規則。因此若是你不想輸入那一個個規則名來調試的話，IE11可讓你省下很多時間。

DOM Explorer 的更新，讓IE11的開發者工具變得更加友好和先進。而這只是此次 IE11開發者工具更新中的一項。和前輩們的F12開發者工具相比，IE11的開發者工具翻天覆地的界面改動一會兒很難說清楚，可是這些改變又都是很是天然的，因此使用的時候徹底不會以爲彆扭和難以適應。因此如今就升級到IE11，感覺微軟的誠意之做，本身親自體會其中的點滴變化吧。