簡介： 本文通過一個例子演示，如何使用這些在 IE 中進行 JavaScript 調試所用到的工具。
雖然越來越多的用戶轉向使用 FireFox 等非 IE 內核瀏覽器，但是 Internet Explorer(IE, 6 以及後續版本 ) 仍然有着超過 50% 的市場佔有率，大部分產品產品都需要支持 IE。不過 IE 缺少像 FireFox 上那麼多調試 JavaScript 代碼的插件，使得在 IE 上調試 JavaScript 代碼比較困難，很多開發人員喜歡通過加入 alert 語句來進行調試，很大程度上降低了開發效率。
本文詳細介紹了在 IE 中進行 JavaScript 調試所用到的工具，並通過一個例子演示瞭如何使用這些工具， 可讓讀者掌握在 IE 上調試 JavaScript 的方法和技巧，加快他們在 IE 上開發 Web 應用的速度。
IE 上可選擇的 JavaScript 調試工具不多，主要是 Microsoft 腳本編輯器 (Microsoft Script Editor) 以及 IE Developer Toolbar。
Microsoft 腳本編輯器是 Microsoft Office 中的一個小組件，它是一個很完備的 JavaScript 編輯和調試工具， 提供了豐富的調試功能。
如果未安裝的話，可以運行 Office 的安裝程序，選擇”自定義安裝”類型，然後 在自定義安裝嚮導頁面，選中“選擇應用程序的高級自定義”, 在接下來的高級自定義頁面，依次定位到 Microsoft Office->Office 工具 ->HTML 源文件編輯 ->Web 腳本創作 -> 站點調試，選擇“從本機運行全部程序”。
如下圖所示。然後按照嚮導，完成安裝即可。
圖 1. 安裝 Microsoft 腳本編輯器
如果沒有購買 Office 套件，可以從 參考資料列表中下載安裝 Microsoft Script Debugger。
它是免費的， 比 Microsoft Script Editor 更輕量級，缺點是調試功能，特別是跟蹤變量的功能還比較原始。 所以在這裏我們還是推薦使用 Microsoft 腳本編輯器。
IE Developer Toolbar ，是 IE 上的一個插件，用來探究和理解 Web 頁面的便捷工具。
最主要的功能包括： 查看並修改頁面的 DOM 對象；查看選中元素或者標籤的各種屬性，包括 HTML 和 CSS 屬性以及 JavaScript 事件等。
之所以這裏要用到它，是因爲在一個設計完備的產品中，頁面上的很多元素，包括附加在這些元素上的各種事件， 都是在運行時動態創建的，單純通過查看源代碼，很難找到
我們要調試的 JavaScript 函數。在這種情況下， 使用 IE Developer Toolbar，只需要通過鼠標選中目標元素，就可以立即幫助我們找到那些在運行時附加在它上面 的
JavaSscript 函數或者事件。
可以從 參考資料列表中下載安裝 IE Developer Toolbar。安裝成功後，會看到它的圖標 被加到了 IE 的標準按鈕欄上，如下圖所示。
圖 2. IE Developer Toolbar 圖標
在我們能夠進行 JavaScript 代碼調試之前，需要先啓用 IE 的腳本調試功能。
在 IE 菜單的工具菜單中，依次點擊：Internet 選項 -> 高級 -> 瀏覽，取消選中"禁用腳本調試 (Internet Explorer)"和 "禁用腳本調試 ( 其他 )"，如下圖所示 .
圖 3. 啓用腳本調試功能
被動調試，也可以稱爲自動調試，當 IE 碰到 JavaScript 語法及運行時錯誤，或者選中了查看 -> 腳本調試器 -> 在下一條語句中斷， IE 會自動彈出一個"實時調試"窗口，
讓你選擇調試器進行調試，我們選擇"新實例 Microsoft Script Editor"，然後點擊"是"按鈕， 就可以進行調試了，如下圖所示。不過這種被動調試方式沒有可控性，而且我
們平時多是調試邏輯而不是語法錯誤， 這裏就不做詳細介紹了。
圖 4. 實時調試對話框
我們可以在所要調試的某條語句或者函數中，加入 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. 變量監視窗口
這樣我們就很順利地找到了問題的原因和解決辦法。
隨着在 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 應用的效率。
下載
| 描述 | 名字 | 大小 | 下載方法 |
|---|---|---|---|
| 本文用到的示例代碼 | sample.zip | 2.4KB | HTTP |
學習
- 閱讀並瞭解可以用在 IE 上的 Firebug Lite
- developerWorks Web development 專區：通過專門關於 Web 技術的文章和教程，擴展您在網站開發方面的技能。
- developerWorks Ajax 資源中心：這是有關 Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這裏找到。
- developerWorks Web 2.0 資源中心，這是有關 Web 2.0 相關信息的一站式中心，包括大量 Web 2.0 技術文章、教程、下載和相關技術資源。您還可以通過
Web 2.0 新手入門 欄目，迅速瞭解 Web 2.0 的相關概念。
- 查看
HTML5 專題，瞭解更多和 HTML5 相關的知識和動向。
獲得產品和技術
- 下載
Microsoft Script Debugger，輕量級的 JavaScript 調試工具
- 下載
IE Developer Toolbar，探究和理解 Web 頁面的便捷工具