本文詳細介紹了在 IE 中進行 JavaScript 調試所用到的工具，并通過一個例子演示了 如何使用這些工具,，可以讓讀者掌握在 IE 上調試 JavaScript 的方法和技巧,，加快他們在 IE 上 開發(fā) Web 應用的速度。

簡介

雖然越來越多的用戶轉向使用 FireFox 等非 IE 內核瀏覽器,，但是 Internet Explorer(IE, 6 以及后續(xù)版本 ) 仍然有著超過 50% 的市場占有率,，大部分產品產品都需要支持 IE。不過 IE 缺少像 FireFox 上那么多調試 JavaScript 代碼的插件,，使得在 IE 上調試 JavaScript 代碼比較困難,，很多開發(fā)人員喜歡通過加入 alert 語句來進行調試，很大程度上降低了開發(fā)效率,。 本文詳細介紹了在 IE 中進行 JavaScript 調試所用到的工具,，并通過一個例子演示了如何使用這些工具， 可以讓讀者掌握在 IE 上調試 JavaScript 的方法和技巧,，加快他們在 IE 上開發(fā) Web 應用的速度,。

IE 上的調試工具

IE 上可選擇的 JavaScript 調試工具不多，主要是 Microsoft 腳本編輯器 (Microsoft Script Editor) 以及 IE Developer Toolbar,。

Microsoft 腳本編輯器

Microsoft 腳本編輯器是 Microsoft Office 中的一個小組件,，它是一個很完備的 JavaScript 編輯和調試工具， 提供了豐富的調試功能,。如果沒有安裝的話,，可以運行 Office 的安裝程序，選擇”自定義安裝”類型,，然后 在自定義安裝向導頁面,，選中“選擇應用程序的高級自定義”, 在接下來的高級自定義頁面，依次定位到 Microsoft Office->Office 工具 ->HTML 源文件編輯 ->Web 腳本創(chuàng)作 -> 站點調試,，選擇“從本機運行全部程序”,， 如下圖所示。然后按照向導,，完成安裝即可,。

如果沒有購買 Office 套件，可以從 參考資料列表中下載安裝 Microsoft Script Debugger,。它是免費的,， 比 Microsoft Script Editor 更輕量級，缺點是調試功能，特別是跟蹤變量的功能還比較原始,。 所以在這里我們還是推薦使用 Microsoft 腳本編輯器,。

IE Developer Toolbar

IE Developer Toolbar ，是 IE 上的一個插件,，用來探究和理解 Web 頁面的便捷工具,，最主要的功能包括： 查看并修改頁面的 DOM 對象；查看選中元素或者標簽的各種屬性,，包括 HTML 和 CSS 屬性以及 JavaScript 事件等,。 之所以這里要用到它，是因為在一個設計完備的產品中,，頁面上的很多元素,，包括附加在這些元素上的各種事件， 都是在運行時動態(tài)創(chuàng)建的,，單純通過查看源代碼,，很難找到我們要調試的 JavaScript 函數(shù)。在這種情況下,， 使用 IE Developer Toolbar,，只需要通過鼠標選中目標元素，就可以立即幫助我們找到那些在運行時附加在它上面 的 JavaSscript 函數(shù)或者事件,。

可以從 參考資料列表中下載安裝 IE Developer Toolbar,。安裝成功后，會看到它的圖標 被加到了 IE 的標準按鈕欄上,，如下圖所示,。

在 IE 中啟用腳本調試功能

在我們能夠進行 JavaScript 代碼調試之前，需要先啟用 IE 的腳本調試功能,。

在 IE 菜單的工具菜單中,，依次點擊：Internet 選項 -> 高級 -> 瀏覽，取消選中"禁用腳本調試 (Internet Explorer)"和 "禁用腳本調試 ( 其他 )",，如下圖所示 .

圖 3. 啟用腳本調試功能

調試方法

被動調試

被動調試，也可以稱為自動調試,，當 IE 碰到 JavaScript 語法及運行時錯誤,，或者選中了查看 -> 腳本調試器 -> 在下一條語句中斷， IE 會自動彈出一個"實時調試"窗口,，讓你選擇調試器進行調試,，我們選擇"新實例 Microsoft Script Editor"，然后點擊"是"按鈕,， 就可以進行調試了,，如下圖所示。不過這種被動調試方式沒有可控性，而且我們平時多是調試邏輯而不是語法錯誤,， 這里就不做詳細介紹了,。

主動調試 - 使用 debugger 語句

我們可以在所要調試的某條語句或者函數(shù)中，加入 debugger 語句,，這樣當 IE 執(zhí)行到這個 debugger; 語句時,，就會彈出實時調試窗口， 讓我們進行調試,。使用這種調試方法,，需要我們知道要在什么地方加入 debugger 語句。我們上面提到,，有時候并不是很好確定應該 在哪個函數(shù)中加入,，這就需要使用 IE Developer Toolbar 來幫助我們進行定位。

下面我們將以一個例子來說明如何使用 IE Developer Toolbar 來定位目標函數(shù),，進而使用 MS Script Editor 進行調試,。

應用示例

如下圖所示，main.htm( 所有的代碼都可以在 下載部分中獲得 ) 是一個用來顯示個人信息的頁面,。 這些信息存儲在一個 XML 文件 (data.xml) 中,， 使用 JavaScript(main.js) 進行 XSLT 轉換 (data.xsl)，來生成頁面內容 .

在“年齡”字段的輸入框里面,，我們只允許輸入 0-9 的數(shù)字,。但是我們可以發(fā)現(xiàn)，如果輸入 025,，在焦點從輸入框移出后,， 數(shù)字會變成 21，這種行為是不正確的,，我們可以想到問題應該出在該輸入框的 onblur 事件的代碼里面,。

那么 onblur 事件對應到哪個函數(shù)里面呢？頁面上的大部分元素,，包括年齡輸入框,，都是在頁面加載后，由 JavaScript 動態(tài)生成的,， 查看頁面的源文件并不能幫我們找到這個函數(shù),。這時候就用到 IE Developer Toolbar 了。

定位目標函數(shù)

點擊 IE 標準按鈕工具欄上 IE Developer Toolbar 的圖標,，IE Developer Toolbar 的界面就出現(xiàn)在頁面的底部,。 點擊 IE Developer Toolbar 界面左上角的“單擊選擇元素”圖標 , 然后點擊年齡輸入框， 在 IE Developer Toolbar 的屬性 (Attribute) 面板,，就可以看到 onblur 對應的函數(shù)了,，如下圖所示,。

調試代碼

通過查找，我們在 main.js 里面找到 fieldBlur 函數(shù),，在這個函數(shù)的第一行,，我們加入 debugger; 語句。然后刷新頁面,，在年齡輸入框輸入 025,， 然后用鼠標點擊輸入框以外的頁面，IE 會彈出“實時調試”對話框,，選擇“新實例 Microsoft Script Editor”,。在打開的窗口中，我們可以看到 腳本在 debugger; 語句處暫停執(zhí)行,，如下圖所示,。

按兩次 F10 鍵 ( 逐過程單步執(zhí)行 )，代碼將執(zhí)行到 element.value = parseInt(element.value); 語句,。分別選中 element.value 和 parseInt(element.value),， 然后點擊右鍵菜單中的“添加監(jiān)視”項，通過對比它們的值,，可以看到問題出在 parseInt 函數(shù)：字符串“025”被轉換成了 21,。通過查詢函數(shù)手冊， 發(fā)現(xiàn)我們沒有給 parseInt 函數(shù)指定轉換的基數(shù) 10,，這樣“025”被當作八進制數(shù)處理了,。為了驗證，我們可以在“監(jiān)視 %1”面板,， 手動加入 parsetInt(element.value, 10),，可以看到轉換后是正確的了。

這樣我們就很順利地找到了問題的原因和解決辦法,。

在 IE8 中進行調試

隨著在 Web 開發(fā)中 JavaScript 重要性的日益增加,，微軟在 IE8 中直接內置了“開發(fā)人員工具”(Developer Tools)。 我們可以把它看作是 IE Developer Toolbar 的加強版,，除了我們上面介紹到的 IE Developer Toolbar 的功能,， 它還內置了腳本調試和探查器 (Profiler，性能監(jiān)控器 ) 的功能,。所以如果你的產品只需要在 IE8 上進行調試,， 那么就不需要在額外安裝其他插件和工具了。下面我們就簡單介紹一下調試過程,。

定位目標函數(shù)

在用 IE8 打開 main.htm 頁面后，選擇“工具”菜單中的“開發(fā)人員工具”,，或者直接按 F12 鍵,，將彈出“開發(fā)人員工具”的窗口,。 為了方便選取頁面上的元素，可以點擊窗口右上角的“固定”圖標,，來讓 “開發(fā)人員工具”嵌入到頁面的下部,。然后點擊 左上角的“單擊選擇元素”圖標，接著點擊年齡輸入框,，同使用 IE Developer Toolbar 一樣,，在“開發(fā)人員工具”的屬性面板， 就可以看到 onblur 對應的函數(shù)了,，如下圖所示,。

調試代碼

與使用“Microsoft Script Editor”一樣，我們找到 fieldBlur 函數(shù),，在這個函數(shù)的第一行,，加入 debugger; 語句。然后點擊 “開發(fā)人員工具”窗口的“腳本”標簽,，切換到調試面板,，點擊“啟動調試”按鈕，在彈出的對話框選擇 “確定”后,，“開發(fā)人員工具” 窗口會自動彈出,，變成獨立的窗口。切換到 main.htm 頁面,，在年齡輸入框輸入 025,，然后用鼠標點擊輸入框以外的頁面， “開發(fā)人員工具”窗口會自動跳出,，我們同樣可以監(jiān)視 element.value 和 parseInt(element.value) 的值,，以及手動把 parseInt(element.value,10) 加入監(jiān)視列表，如下圖所示,。

另外我們可以通過設置斷點,，而不加入 debugger; 語句來進行調試。在“腳本”面板上“開始調試”按鈕右邊的文件下拉框,， 選擇“main.js",，然后第 83 行代碼前面單擊鼠標，就在 fieldBlur 函數(shù)的第一行設置了斷點,，然后點擊“開始調試”按鈕,， 如下圖所示。當我們把鼠標移出年齡輸入框后,， JavaScript 代碼會自動在我們設置的斷點處停止執(zhí)行,。

圖 11. 在 IE8 中使用斷點調試

總結

  本文以 IE6 為主，介紹了 IE 瀏覽器上調試 JavaScript 所用到的工具以及調試方法,，并在最后介紹了 IE8 在調試腳本方面的改進,。 通過閱讀本文,，讀者可以掌握在 IE 上調試 JavaScript 的方法和技巧，提高他們在 IE 上開發(fā) Web 應用的效率,。