利用IE8開發人員工具調試JavaScript指令碼

很多朋友夢寐以求的功能呀——JavaScript指令碼調試。一直擺脫不掉FireFox，就是因為Firebug實在太好用。雖然 利用VS這樣航母級的軟體也能進行JavaScript指令碼的調試 。但是，很多前台開發人員並不會為了一個JavaScript調試功能而去安裝那種大傢伙。所以對JavaScript的調試，IE的使用者一直耿耿於懷。但是，現在終於可以平息了。因為IE8開發人員工具終於也有了小巧，卻功能強大的JavaScript調試功能。

 

<button onclick="test();">Button</button>
<script type="text/javascript">
 function test(){
     test2();
 }
 function test2(){
     var _obj=document.getElementById("divTest");
     var str=_obj.id;
     alert(str); 
}
</script>

 

 

控制台

在控制台會顯示指令碼調試中的一些資訊，例如錯誤資訊、警告資訊一類的。

恩，其實也可以當成是一個微型JavaScript運行環境。你可以在這裡直接鍵入指令碼並運行。如果一行不夠的話，可以切換到多行模式。輸入完畢後，點擊“運行指令碼”，就可以看到運行結果了。

斷點

是一個顯示你設定的所有斷點的列表。方便你統一管理：統一刪除、統一使用或者統一禁用。

局部變數

我非常喜歡的視圖之一。可以詳細的顯示各個變數的所有方法、事件和屬性。我最喜歡乾的事情，就是一個個的看下去，看到不知道的就去查資料，絕對是個學習JavaScript的好方法。例如，下面途中這就發現了一些IE8特有的方法。

 

監視

我非常喜歡的視圖之一。可以顯示任意你需要的變數的方法、事件和屬性。可以添加多個。整體來說和局部變數視圖差不多，只是可以更靈活的顯示你需要的而已。

 

 

 

呼叫堆疊

可以直觀地顯示函數呼叫堆疊情況，以及現在執行到那個函數情況。對於理順指令碼的運行順序和嵌套很有協助。 

 

IE8開發人員工具的探查器

IE8 的探查器(Profiler)，探測的是JavaScript指令碼。

先點擊【開始設定檔】按鈕，然後運行指令碼或者重新整理頁面。等指令碼執行完了，或者頁面重新整理完畢後點擊【停止設定檔】按鈕，就會產生探查報告了。

它提供兩種視圖，一種是“函數”，另一種是“調用樹”。無論何種視圖，都可以清晰且忠實的展現出各個函數的執行所用時間。從而，方便你分析出“為啥我的頁面那麼慢呢？”

函數視圖

函數視圖可以方便的按照各個參數進行排序，從而方便的找出類似“誰用的時間最長”這樣的答案。

 

 

調用樹

調用樹視圖可以方便的看出各個函數之間的調用關係。