IE8″開發人員工具”使用詳解下(瀏覽器模式、文字模式、JavaScript調試、探查器)

文章目錄

• 瀏覽器模式
• 文字模式
• 利用IE8開發人員工具調試JavaScript指令碼
• IE8開發人員工具的探查器
• 結束了？其實才剛剛開始

在上一篇文章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的開發人員工具，現在就試試吧。它一定可以帶給你驚喜的。