簡介
雖然越來越多的使用者轉向使用 FireFox 等非 IE 核心浏覽器，但是 Internet Explorer(IE, 6 以及後續版本 ) 仍然有着超過 50% 的市場占有率，大部分産品産品都需要支援 IE。不過 IE 缺少像 FireFox 上那麼多調試 JavaScript 代碼的插件，使得在 IE 上調試 JavaScript 代碼比較困難，很多開發人員喜歡通過加入 alert 語句來進行調試，很大程度上降低了開發效率。 本文詳細介紹了在 IE 中進行 JavaScript 調試所用到的工具，并通過一個例子示範了如何使用這些工具， 可以讓讀者掌握在 IE 上調試 JavaScript 的方法和技巧，加快他們在 IE 上開發 Web 應用的速度。
回頁首
IE 上的調試工具
IE 上可選擇的 JavaScript 調試工具不多，主要是 Microsoft 腳本編輯器 (Microsoft Script Editor) 以及 IE Developer Toolbar。
Microsoft 腳本編輯器
Microsoft 腳本編輯器是 Microsoft Office 中的一個小元件，它是一個很完備的 JavaScript 編輯和調試工具， 提供了豐富的調試功能。如果沒有安裝的話，可以運作 Office 的安裝程式，選擇”自定義安裝”類型，然後 在自定義安裝向導頁面，選中“選擇應用程式的進階自定義”, 在接下來的進階自定義頁面，依次定位到 Microsoft Office->Office 工具 ->HTML 源檔案編輯 ->Web 腳本創作 -> 站點調試，選擇“從本機運作全部程式”， 如下圖所示。然後按照向導，完成安裝即可。
圖 1. 安裝 Microsoft 腳本編輯器
如果沒有購買 Office 套件，可以從 參考資料 清單中下載下傳安裝 Microsoft Script Debugger。它是免費的， 比 Microsoft Script Editor 更輕量級，缺點是調試功能，特别是跟蹤變量的功能還比較原始。 是以在這裡我們還是推薦使用 Microsoft 腳本編輯器。
IE Developer Toolbar
IE Developer Toolbar ，是 IE 上的一個插件，用來探究和了解 Web 頁面的便捷工具，最主要的功能包括： 檢視并修改頁面的 DOM 對象；檢視選中元素或者标簽的各種屬性，包括 HTML 和 CSS 屬性以及 JavaScript 事件等。 之是以這裡要用到它，是因為在一個設計完備的産品中，頁面上的很多元素，包括附加在這些元素上的各種事件， 都是在運作時動态建立的，單純通過檢視源代碼，很難找到我們要調試的 JavaScript 函數。在這種情況下， 使用 IE Developer Toolbar，隻需要通過滑鼠選中目标元素，就可以立即幫助我們找到那些在運作時附加在它上面 的 JavaSscript 函數或者事件。
可以從 參考資料 清單中下載下傳安裝 IE Developer Toolbar。安裝成功後，會看到它的圖示 被加到了 IE 的标準按鈕欄上，如下圖所示。
圖 2. IE Developer Toolbar 圖示
在 IE 中啟用腳本調試功能
在我們能夠進行 JavaScript 代碼調試之前，需要先啟用 IE 的腳本調試功能。
在 IE 菜單的工具菜單中，依次點選：Internet 選項 -> 進階 -> 浏覽，取消選中"禁用腳本調試 (Internet Explorer)"和 "禁用腳本調試 ( 其他 )"，如下圖所示 .
圖 3. 啟用腳本調試功能
回頁首
調試方法
被動調試
被動調試，也可以稱為自動調試，當 IE 碰到 JavaScript 文法及運作時錯誤，或者選中了檢視 -> 腳本調試器 -> 在下一條語句中斷， IE 會自動彈出一個"實時調試"視窗，讓你選擇調試器進行調試，我們選擇"新執行個體 Microsoft Script Editor"，然後點選"是"按鈕， 就可以進行調試了，如下圖所示。不過這種被動調試方式沒有可控性，而且我們平時多是調試邏輯而不是文法錯誤， 這裡就不做詳細介紹了。
圖 4. 實時調試對話框
主動調試 - 使用 debugger 語句
我們可以在所要調試的某條語句或者函數中，加入 debugger 語句，這樣當 IE 執行到這個 debugger; 語句時，就會彈出實時調試視窗， 讓我們進行調試。使用這種調試方法，需要我們知道要在什麼地方加入 debugger 語句。我們上面提到，有時候并不是很好确定應該 在哪個函數中加入，這就需要使用 IE Developer Toolbar 來幫助我們進行定位。
下面我們将以一個例子來說明如何使用 IE Developer Toolbar 來定位目标函數，進而使用 MS Script Editor 進行調試。
回頁首
應用示例
如下圖所示，main.htm( 所有的代碼都可以在 下載下傳 部分中獲得 ) 是一個用來顯示個人資訊的頁面。 這些資訊存儲在一個 XML 檔案 (data.xml) 中， 使用 JavaScript(main.js) 進行 XSLT 轉換 (data.xsl)，來生成頁面内容 .
圖 5. 應用示例
在“年齡”字段的輸入框裡面，我們隻允許輸入 0-9 的數字。但是我們可以發現，如果輸入 025，在焦點從輸入框移出後， 數字會變成 21，這種行為是不正确的，我們可以想到問題應該出在該輸入框的 onblur 事件的代碼裡面。
那麼 onblur 事件對應到哪個函數裡面呢？頁面上的大部分元素，包括年齡輸入框，都是在頁面加載後，由 JavaScript 動态生成的， 檢視頁面的源檔案并不能幫我們找到這個函數。這時候就用到 IE Developer Toolbar 了。
定位目标函數
點選 IE 标準按鈕工具欄上 IE Developer Toolbar 的圖示，IE Developer Toolbar 的界面就出現在頁面的底部。 點選 IE Developer Toolbar 界面左上角的“單擊選擇元素”圖示 , 然後點選年齡輸入框， 在 IE Developer Toolbar 的屬性 (Attribute) 面闆，就可以看到 onblur 對應的函數了，如下圖所示。
圖 6. 使用 IE Developer Toolbar 定位目标函數
調試代碼
通過查找，我們在 main.js 裡面找到 fieldBlur 函數，在這個函數的第一行，我們加入 debugger; 語句。然後重新整理頁面，在年齡輸入框輸入 025， 然後用滑鼠點選輸入框以外的頁面，IE 會彈出“實時調試”對話框，選擇“新執行個體 Microsoft Script Editor”。在打開的視窗中，我們可以看到 腳本在 debugger; 語句處暫停執行，如下圖所示。
圖 7. 使用 Microsoft Script Editor 進行調試
按兩次 F10 鍵 ( 逐過程單步執行 )，代碼将執行到 element.value = parseInt(element.value); 語句。分别選中 element.value 和 parseInt(element.value)， 然後點選右鍵菜單中的“添加監視”項，通過對比它們的值，可以看到問題出在 parseInt 函數：字元串“025”被轉換成了 21。通過查詢函數手冊， 發現我們沒有給 parseInt 函數指定轉換的基數 10，這樣“025”被當作八進制數處理了。為了驗證，我們可以在“監視 %1”面闆， 手動加入 parsetInt(element.value, 10)，可以看到轉換後是正确的了。
圖 8. 變量監視視窗
這樣我們就很順利地找到了問題的原因和解決辦法。
回頁首
在 IE8 中進行調試
随着在 Web 開發中 JavaScript 重要性的日益增加，微軟在 IE8 中直接内置了“開發人員工具”(Developer Tools)。 我們可以把它看作是 IE Developer Toolbar 的加強版，除了我們上面介紹到的 IE Developer Toolbar 的功能， 它還内置了腳本調試和探查器 (Profiler，性能監控器 ) 的功能。是以如果你的産品隻需要在 IE8 上進行調試， 那麼就不需要在額外安裝其他插件和工具了。下面我們就簡單介紹一下調試過程。
定位目标函數
在用 IE8 打開 main.htm 頁面後，選擇“工具”菜單中的“開發人員工具”，或者直接按 F12 鍵，将彈出“開發人員工具”的視窗。 為了友善選取頁面上的元素，可以點選視窗右上角的“固定”圖示，來讓 “開發人員工具”嵌入到頁面的下部。然後點選 左上角的“單擊選擇元素”圖示，接着點選年齡輸入框，同使用 IE Developer Toolbar 一樣，在“開發人員工具”的屬性面闆， 就可以看到 onblur 對應的函數了，如下圖所示。
圖 9. 在 IE8 中定位目标函數
調試代碼
與使用“Microsoft Script Editor”一樣，我們找到 fieldBlur 函數，在這個函數的第一行，加入 debugger; 語句。然後點選 “開發人員工具”視窗的“腳本”标簽，切換到調試面闆，點選“啟動調試”按鈕，在彈出的對話框選擇 “确定”後，“開發人員工具” 視窗會自動彈出，變成獨立的視窗。切換到 main.htm 頁面，在年齡輸入框輸入 025，然後用滑鼠點選輸入框以外的頁面， “開發人員工具”視窗會自動跳出，我們同樣可以監視 element.value 和 parseInt(element.value) 的值，以及手動把 parseInt(element.value,10) 加入監視清單，如下圖所示。
圖 10. 在 IE8 中使用 debugger 語句調試
另外我們可以通過設定斷點，而不加入 debugger; 語句來進行調試。在“腳本”面闆上“開始調試”按鈕右邊的檔案下拉框， 選擇“main.js"，然後第 83 行代碼前面單擊滑鼠，就在 fieldBlur 函數的第一行設定了斷點，然後點選“開始調試”按鈕， 如下圖所示。當我們把滑鼠移出年齡輸入框後， JavaScript 代碼會自動在我們設定的斷點處停止執行。
圖 11. 在 IE8 中使用斷點調試
回頁首
總結
本文以 IE6 為主，介紹了 IE 浏覽器上調試 JavaScript 所用到的工具以及調試方法，并在最後介紹了 IE8 在調試腳本方面的改進。 通過閱讀本文，讀者可以掌握在 IE 上調試 JavaScript 的方法和技巧，提高他們在 IE 上開發 Web 應用的效率。