我討厭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，感受微軟的誠意之作，自己親自體會其中的點滴變化吧。