在上一篇文章IE8“開發人員工具”使用詳解上(各級菜單詳解) 中，我們詳細地講解了IE8開發人員工具中各個菜單中命令的使用方法，相信很多朋友應該已經使用上了。而IE8開發人員工具更強勁的功能例如：如何測試版本兼容性、如何利用開發人員工具調試JavaScript腳本，以及如何利用探查器檢測頁面腳本函數效率等，我們將在本篇文章中講解。小弟拙笨，此處僅爲拋磚。
瀏覽器模式
應了《無間道》的那句話——“出來混，遲早是要還的！”。IE6種下的苦果，現在果然到了要嚥下的時候了。當IE8發佈的時候，他不得不面對着世界上成千上萬“只有在IE6中才能正常顯示”的頁面。不發佈IE8了吧，FireFox和Chrome又跟着後面搶蛋糕；不管那些“IE6 only”的頁面吧，那瀏覽器出來還不被人罵死；讓所有的站長都把頁面重構吧，想想自己都要笑。唉，這可咋整呀。
唉，有了，咱採取一個手段，讓用戶自己去處理，如果他碰到了“IE6 only”頁面，就讓他自己手動處理一下，讓瀏覽器還用老的渲染模式渲染頁面，這雖然麻煩了一點用戶，但是也不失是個辦法。於是“瀏覽器模式”出來了。說白了，就是讓用戶選擇當前頁面用何種IE版本去渲染。
舉個例子吧，順便練習一下《IE的有條件註釋詳解》，核心代碼如下——
<div id="divTest">
<!--[if IE 7]>
瀏覽器是IE7
<![endif]-->
<!--[if IE 8]>
瀏覽器是IE8
<![endif]-->
</div>
讓我們來試試這個頁面，在不同的瀏覽器模式下的顯示效果吧——
IE8開發人員工具之瀏覽器模式
對於普通用戶，微軟官方推薦的是這個玩意——兼容性視圖按鈕。
當然，對前端開發人員來說，這個工具主要用來測試頁面多瀏覽器兼容性而已。但是非常遺憾的是：沒有IE6模式。沒有IE6的世界，雖然是一個美好的願望，但是可惜的是：我們生活在現實之中，或許說生活在地獄中更確切。所以，我還是不得不提下面的兩個工具——
IE多版本共存的解決方案——IETester微軟網頁開發調試利器SuperPreview（附下載）
文本模式
說起“文本模式”這個名詞，這又要回到渲染頁面的3種模式了：詭異模式（Quirks mode，也有翻譯爲兼容模式、怪異模式的），標準模式（Standards mode），和幾乎標準模式（Almost standards mode）。這是一個非常重要、但是很多人卻比較模糊的概念。一兩句話不太能說清楚，這樣說吧——“頁面的不同渲染模式，將直接影響頁面的最終呈現效果”，也就是說，一個頁面如果在這種模式下顯示完美，但是在另外一種模式下可能就顯示的一塌糊塗。而決定頁面模式的是頁面的!DOCTYPE屬性。
乖乖，這玩意太繞人了，還是直接上例子吧。最經典的就是對盒裝模型的解釋差異了。下面兩個圖，是相同頁面，採用不同頁面渲染模式的最終顯示效果。
頁面很簡單，只要一個div元素，然後隨便設置一點高度、寬度、padding、margin就可以了。核心代碼如下——
<style type="text/css">
#divTest{
background-color:red;
padding:10px;
margin:10px;
width:100px;
height:100px;
}
</style>
<div id="divTest">
<!--[if IE 7]>
瀏覽器是IE7
<![endif]-->
<!--[if IE 8]>
瀏覽器是IE8
<![endif]-->
</div>
IE8開發人員工具之文本模式
從圖片中，我們可以清楚的看到，紅色div塊的大小和位置，在不同的文本模式下，發生了明顯的變化。
關於文本模式的詳細資料，我建議你看這篇文章《Quirks mode、Almost standards mode、Standards mode》。雖然是英文原版的資料，也絕對值得翻着字典看完。還有這篇視頻教程中，我也有較爲詳細的介紹到，《“阿一web標準學堂”第4課》
利用IE8開發人員工具調試JavaScript腳本
重頭戲來了。很多朋友夢寐以求的功能呀——JavaScript腳本調試。一直襬脫不掉FireFox，就是因爲Firebug實在太好用。雖然利用VS這樣航母級的軟件也能進行JavaScript腳本的調試。但是，很多前臺開發人員並不會爲了一個JavaScript調試功能而去安裝那種大傢伙。所以對JavaScript的調試，IE的用戶一直耿耿於懷。但是，現在終於可以平息了。因爲IE8開發人員工具終於也有了小巧，卻功能強大的JavaScript調試功能。
不多說，直接上例子，這裏就舉一個簡單到弱智的例子吧。核心代碼如下：
<button onclick="test();">Button</button>
<script type="text/javascript">
1: function test(){
2: test2(); 3: }4: function test2(){
5: var _obj=document.getElementById("divTest");
6: var str=_obj.id;
7: alert(str); 8: }</script>
還是讓我們先看看腳本調試界面吧
利用IE8開發人員工具調試JavaScript腳本
圖上的說明已經很清楚了，下面就詳細講一下“控制檯”、“斷點”、“局部變量”、“監視”、“調用堆棧”這些視圖吧。
控制檯
在控制檯會顯示腳本調試中的一些信息，例如錯誤信息、警告信息一類的。
恩，其實也可以當成是一個微型JavaScript運行環境。你可以在這裏直接鍵入腳本並運行。如果一行不夠的話，可以切換到多行模式。輸入完畢後，點擊“運行腳本”，就可以看到運行結果了。
斷點
是一個顯示你設定的所有斷點的列表。方便你統一管理：統一刪除、統一使用或者統一禁用。
局部變量
我非常喜歡的視圖之一。可以詳細的顯示各個變量的所有方法、事件和屬性。我最喜歡乾的事情，就是一個個的看下去，看到不知道的就去查資料，絕對是個學習JavaScript的好方法。例如，下面途中這就發現了一些IE8特有的方法。
監視
我非常喜歡的視圖之一。可以顯示任意你需要的變量的方法、事件和屬性。可以添加多個。整體來說和局部變量視圖差不多，只是可以更靈活的顯示你需要的而已。
調用堆棧
可以直觀地顯示函數調用堆棧情況，以及現在執行到哪個函數的情況。對於理順腳本的運行順序和嵌套很有幫助。
IE8開發人員工具的探查器
“探查器”這玩意一開始還真的讓我摸不到頭腦，還以爲是類似那些國產的，用在馬桶或者世界之窗上的插件，用來分析出網頁中的flash或者視頻、音頻地址的呢。到後來，看到的英文原版的才知道，其實就是——“Profiler”。
用過微軟SQL數據庫中的Profiler的朋友都知道，那個一個幫助SQL分析效率的工具。它會記錄所有的執行以及他們的執行時間，從而提供一份報表。這樣，就可以知道到底是什麼在效率上拖l了後腿。
IE8 的探查器(Profiler)，也引入了這個概念，只是它探測的是JavaScript腳本而已。
先點擊【開始配置文件】按鈕，然後運行腳本或者刷新頁面。等腳本執行完了，或者頁面刷新完畢後點擊【停止配置文件】按鈕，就會生成探查報告了。
它提供兩種視圖，一種是“函數”，另一種是“調用樹”。無論何種視圖，都可以清晰且忠實的展現出各個函數的執行所用時間。從而，方便你分析出“爲啥我的頁面那麼慢呢？”
函數視圖
函數視圖可以方便的按照各個參數進行排序，從而方便的找出類似“誰用的時間最長”這樣的答案。
調用樹
調用樹視圖可以方便的看出各個函數之間的調用關係。
一些關於IE8開發人員工具探查器(Profiler)的資料
如果，你還沒有過癮的話，可以看看下面這篇文章，絕對權威。《Introducing the IE8 Developer Tools JScript Profiler》
結束了？其實才剛剛開始
雖然貌似很多地、洋洋灑灑地、圖文並茂地講了兩篇文章。其實回頭看看也沒講什麼東西。只是截圖濫竽充數比較多而已。好在，文章中不時地，還丟出幾個相關文章的鏈接出來，所以，應該還不至於讓人感到“看完以後完全不知所云”的樣子。
其實工具，僅僅是個工具，再詳解、再舉例、再截圖都是白搭。如果真的想用來提高你自己的工作效率，最終還是需要你自己的動手摸索，用在自己的頁面上。所以，看完文章的你，趕緊打開IE8的開發人員工具，現在就試試吧。它一定可以帶給你驚喜的。