快捷導(dǎo)航

調(diào)試JavaScript/VBScript腳本程序（IE篇）

更新時間：2009年09月13日 21:12:48 作者：

JavaScript/VB Script腳本程序一般有兩種執(zhí)行方式，一種是嵌入在宿主程序里面執(zhí)行，比如在IE瀏覽器里面執(zhí)行；另外一種，在資源管理器里面雙擊執(zhí)行（雖然還是通過另外一個程序解釋執(zhí)行，但是給人的感覺畢竟是直接運行）。

這兩種方式，都可以使用Visual Studio來進(jìn)行調(diào)試，先看大家用得比較頻繁的網(wǎng)頁腳本程序的調(diào)試：
1. 要調(diào)試網(wǎng)頁里面的腳本程序，調(diào)試器需要宿主程序—這里也就是IE的支持，實際上所有的腳本程序解釋器都實現(xiàn)了一個COM的調(diào)試接口。調(diào)試器通過查詢解釋器的這個接口，可以設(shè)置斷點，查詢變量以及捕捉異常，當(dāng)然，查詢到這個接口，需要宿主程序同意……至于如何實現(xiàn)這個接口，我們會在以后的文章里面講到。
2. 默認(rèn)情況下，IE是將腳本調(diào)試支持功能關(guān)閉的，因此你需要顯示地打開它。打開IE，點擊“工具”—“Internet 選項”，在“Internet 選項”里面選擇高級頁簽，在“設(shè)置”列表里面，找到“禁用腳本調(diào)試（Internet Explorer）”選項，它默認(rèn)是勾選上的—將它勾掉。

3. 使用IE打開一個新的網(wǎng)頁，無論是一個遠(yuǎn)程的，或者本地的（從本地硬盤打開）網(wǎng)頁。例如下面一個網(wǎng)頁，另存為test.html：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>JavaScript調(diào)試</title> 
<script language=javascript> 
function onload() { 
var test = unescape("http://www.google.com"); 
alert(test); 
} 
</script> 
</head> 
<body onload="onload()"> 
</body> 
</html> 

4. 啟動Visual Studio，點擊VS菜單里面的“工具”—“附加到進(jìn)程”菜單，打開“附加到進(jìn)程”窗口里面。Visual Studio其實支持很多種調(diào)試模式，調(diào)試C++（native）程序，調(diào)試.NET（托管）程序，調(diào)試腳本程序，調(diào)試Silverlight程序以及調(diào)試SQL存儲過程。默認(rèn)情況下，Visual Studio會根據(jù)附加的進(jìn)程類型來選擇最合適的調(diào)試模式，但是有的時候，你需要手工設(shè)置一下。例如Internet Explorer這種程序，IE可以同時運行多種子程序，IE本身和ActiveX控件是C++/C寫成的，IE可以運行Winform/WPF程序，IE可以運行Silverlight程序，當(dāng)然，IE最多的還是運行JavaScript/VB Script腳本程序。Visual Studio在附加到Internet Explorer進(jìn)程的時候，總是會被IE弄糊涂，所以我們需要手工告知Visual Studio我們希望采用什么調(diào)試模式。
在“附加到進(jìn)程”窗口里面，在“附加到…”（英文是Attach To…）文本框旁邊點擊“選擇”按鈕，在彈出的“選擇代碼類型”窗口里面，勾選“調(diào)試下列類型”，并選擇“腳本”。如下圖所示：

5. 接著你需要在“附加到進(jìn)程”窗口里面選擇要附加的進(jìn)程，在“可用進(jìn)程”（Available Processes）列表里面，有一個“類型”（Type）列，里面列舉了對應(yīng)進(jìn)程支持的調(diào)試模式，比如你可以看到在上圖里，好幾個iexplore.exe支持腳本和C++調(diào)試模式（Script, x86）。因此你所需要做的就是找到執(zhí)行網(wǎng)頁的進(jìn)程，這里我選擇了ID為3732的iexplore.exe，因為那個是運行第三步網(wǎng)頁的進(jìn)程。最后點擊“附加”（Attach）按鈕使用腳本調(diào)試模式調(diào)試指定的IE進(jìn)程。
注：細(xì)心的網(wǎng)友可能會看到，ID為1692的iexplore.exe的標(biāo)題是“JavaScript調(diào)試”—對應(yīng)的就是我們執(zhí)行網(wǎng)頁的瀏覽器進(jìn)程ID。其實在IE 8以前，選擇執(zhí)行網(wǎng)頁的瀏覽器進(jìn)程一般都是根據(jù)瀏覽器的標(biāo)題做的，但是IE 8里面有一些改變，這個變化以后的文章里會講到。
6. 附加上去以后，在網(wǎng)頁的第7行（網(wǎng)頁源碼在第三步里面）設(shè)置一個斷點—就跟平常調(diào)試C#和C++代碼一樣，設(shè)置好了以后，返回到IE進(jìn)程里面，刷新網(wǎng)頁。這個時候，Visual Studio應(yīng)該會在網(wǎng)頁的第7行中斷IE的執(zhí)行，你可以在“監(jiān)視”（Watch）窗口里面查看腳本變量的值：