作爲出色網站開發人員的特徵之一，就是可以利用一些高效的工具來輔助自己，以提高對於整個網站開發及調試的效率。在過去相當長的一段時間裏，很多開發人員對於尋找和使用這樣一位助手都有自己獨到的心得。隨着現代瀏覽器的發展與普及，很多瀏覽器廠商都爲自己的產品設計了一個可以有利於開發人員快速調試並輔助開發的工具，這些功能也被很多開發者接受和使用。
長期以來，通過和一些開發人員的交流，我發現很多開發人員對於IE瀏覽器自帶的F12開發人員工具存在着很多抱怨。在瞭解他們的一些抱怨後，我認爲這也許是一個網絡上普遍的共識——IE瀏覽器很差勁。由於這樣的原因，我對現在一些主流瀏覽器（當然是自主內核的）的開發工具進行了一些比較和分析。其最終結果是，在IE 11之前的IE瀏覽器確實存在着很大的問題，但是IE 11的 F12工具在很多地方都表現優秀，甚至超出了深受好評的FF瀏覽器工具。
下面，我就和大家來共享一下我的研究成果。
|
|
|
|
IE 10的開發人員工具 |
IE 8的開發人員工具 |
首先大家看到的是IE 10的F12開發工具界面，這個界面是什麼時候開始設計並使用的呢？恐怕要追溯到2009年的IE 8。在那個時候，IE 8在IE 7開發者工具欄的基礎上，進行了全面的升級，在當時可謂是先進的開發人員工具。那時候的Chrome還沒有正式發行的PC版，而FF4也沒有這樣的強大的開發工具。
但微軟更新和進步的腳步總是顯得比人家慢許多。當Chrome版本已經到達30的今天，IE 10的開發人員工具居然還是沿用着5年前的版面，爲數不多的區別可能就是它添加了更多的兼容性測試模式和JavaScript格式化功能。我接觸Chrome的開發工具並不是很早，印象中Chrome是在第5代產品的時候就出現了比較成型的開發工具。加上Google一再的鼓勵開發人員進行鍼對Chrome的開發和努力推廣新技術，其開發工具也得到了迅速的發展。
背景就介紹到這裏，接下來我嘗試使用了IE 11 F12工具，這是一個非常現代的工具。不再是以前那種許多功能隱藏在二級甚至三級菜單中的界面，取而代之的是簡潔的界面。這種界面顯然在一定程度上提高了開發者的工作效率。比如之前深藏在菜單中的清除緩存以及清除cookie功能，現在位於網絡選項卡的最上面，並且試用了一個比較大的，更容易點擊到的按鈕，順便一提的是，Chrome也有這樣的功能，只不過它在整個開發工具的最下面，坦白的講頭一回使用的時候，我確實找了一會兒纔看見的。
|
|
|
|
IE 11的網絡加載調試 |
Chrome 30的網絡加載調試 |
打開IE 11 F12工具，左側第一個選項卡叫做DOM資源管理器。這是一個很多開發者都會使用且使用頻率很高的功能。IE 11 F12工具一改以前需要逐級點開的樣式，換成了更加直觀高效的折點顯示樣式，大程度的提高了DOM的可讀性。其中還去掉了舊版開發人員工具中屬性選項卡，因爲在HTML５和CSS樣式逐漸流行的今天，這個選項卡已經日益失去其重要性。但我希望IE 11 F12工具可以像FF 24的工具那樣，在選取元素的時候，可以在元素的周圍或上方出現一個象徵着這個標籤的菜單，並可以直接進行下一步的操作。
|
|
|
|
IE 11的DOM資源管理器 |
FF 24中的查看器 |
在左側的第二個選項卡爲控制檯，控制檯可以接收特定的指令從而調試指定的JavaScript腳本。具體功能我相信大家都很清楚，不多廢話。在IE 11 F12工具中，已經不再像以前的開發工具那樣難以使用。在參照了VisualStudio的聯想輸入之後，我們也可以在IE 11 F12工具的控制檯中以輸入個別字母的形式直接調用出所需的命令。值得一提的是，IE 11 F12工具還對這種聯想輸入做了進一步的改進，也就是你所輸入的不一定非得是這個命令的首字母，只要是其中出現過，IE 11 F12工具控制檯都會將其聯想出來，這一點目前可以說是比較領先的。另外值得說明的一點是，IE 11 F12工具的控制檯輸入框可以點擊右邊的擴展按鈕，使其變成多行輸入，也就是說可以一次性輸入一個完整的腳本，以執行更復雜的操作。我親自測試了一下，在每個命令結束時還是要像很多編程工具一樣，輸入“;”，這個性能有點像PowerShell ISE。
|
|
|
IE 11的控制檯帶有智能填充和多行指令輸入 |
除此之外，IE 11 F12工具具有更多新功能，一個比較創新的功能就是其可以對某個網頁的內存進行快照和比較，注意這個功能不是傳統意義上Chrome的內存Timeline，而是快照比對。在內存快照中，我們可以很輕鬆的比對出每個快照之間所增減的內容，包括其中每個JS變量的內容以及每個HTML標籤的內容對比。我們可以看到不同時刻，變量輸出的結果，這種功能對於含有大量腳本的網站無疑又是一個調試利器。此外，IE 11引入了一個全新監視工具——性能儀表盤。用戶可以通過Ctrl+Shift+U或者工具菜單打開它。該性能儀表盤對頁面影響的CPU、畫圖時間、內存以及FPS進行監控，方便開發者隨時看到網頁對資源的調用以查找出問題。
|
|
|
|
IE 11的內存快照與比較 |
|
|
|
|
|
性能儀表盤 |
|
對於Chrome瀏覽器的Timeline功能，現在IE瀏覽器也有了相關的功能。IE 11 F12工具中，這個功能叫做UI響應。其中我們可以通過收集和分析按鈕，勾勒出需要腳本、GC、CSS樣式、圖像編碼等在階段，時間內對系統的影響，並以詳細信息的方式顯示圖形化的時間線。此外IE 11 F12工具保留了IE F12工具的獨特傳統之一，就是對於JavaScript的良好閱讀性。之前的版本中，這個功能叫做”格式化JavaScript“，新版中這個功能叫做”啓用優質打印“，並在其後添加了自動換行的功能，進一步改進可讀性。在調試選項卡中，IE 11 F12工具還增加了動態JS腳本的監視。對於一些沒有預加載到頁面中的腳本，諸如一些臨時的錯誤警報或者未能運行的腳本，從而更加方便我們在Debug中的效率。
|
|
|
|
IE 11的UI響應也具有時間線 |
未優化的視圖 |
|
|
|
|
優化後的視圖 |
IE 11可查看動態腳本 |
IE 11 F12工具還引入了一些高效的小功能，雖然這些功能可能對開發者們並不陌生，但在IE中卻是首次出現，而且十分方便。比如我們在DOM資源管理器中更改CSS樣式或調整屬性等，網頁會像其他瀏覽器那樣直接顯示更改的樣式，無需再繁瑣的按下回車。而且在DOM管理器中，用戶可以直接用鼠標拖拽代碼的位置，使網頁中的元素直接改變位置。另外，在調試JavaScript時，IE 11 F12工具也使用了在打開開發工具的同時，JavaScript調試就啓動的方式，並且可以直接不刷新的情況下直接對代碼進行查驗。這一功能也在某種情況下改善了調試的效率。
|
|
|
IE 11可以直接進行調試而無需重複刷新頁面 |
隨着更多移動設備、平板電腦的普及，新的問題考驗着開發者們。現在的設備可謂是五花八門，形形色色。也許他們都是同樣的操作系統，但屏幕尺寸的範圍卻可以從4寸到27寸。如此種類繁多的分辨率，無疑增加了開發者，尤其是前端開發人員工作了。我這裏所指的分辨率，不單單是顯示分辨率，還有實際DPI的問題。如果你的UI設計的過大或過小，都會讓用戶在閱讀網站時很不舒服。雖然現在的HTML5規範中允許我們在不同的分辨率大小下使用不同的圖片和版式以達到縮放的效果，但很少有開發工具可以方針這一點，而且對於一個同樣是1920*1080分辨率的設備而言，它可能是僅有9寸的平板，但也許是27寸的一體機。IE 11 F12工具加強了對不同DPI（現實中每英寸上顯示分辨率的大小）顯示的調試功能，並且針對移動設備屏幕可能翻轉的這一特性設計了相關的方針功能。如果你所設計網站同時擁有定位功能，那麼也可以IE 11 F12工具中虛擬一個GPS經緯度，以測試該功能是否正常。
|
|
|
IE 11的控制檯帶有智能填充和多行指令輸入 |
在這裏，我只是草草的對IE 11 F12工具做個介紹。更多網頁開發中的功能和訣竅還需要和大家共同的使用中測試和發現。希望我的研究可以對廣大開發者朋友有幫助。