簡(jiǎn)介

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

回頁首

IE 上的調(diào)試工具

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

Microsoft 腳本編輯器

Microsoft 腳本編輯器是 Microsoft Office 中的一個(gè)小組件，它是一個(gè)很完備的 JavaScript 編輯和調(diào)試工具， 提供了豐富的調(diào)試功能。如果沒有安裝的話，可以運(yùn)行 Office 的安裝程序，選擇”自定義安裝”類型，然后 在自定義安裝向?qū)ы撁妫x中“選擇應(yīng)用程序的高級(jí)自定義”, 在接下來的高級(jí)自定義頁面，依次定位到 Microsoft Office->Office 工具 ->HTML 源文件編輯 ->Web 腳本創(chuàng)作 -> 站點(diǎn)調(diào)試，選擇“從本機(jī)運(yùn)行全部程序”， 如下圖所示。然后按照向?qū)В瓿砂惭b即可。

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

IE Developer Toolbar

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

可以從 參考資料列表中下載安裝 IE Developer Toolbar。安裝成功后，會(huì)看到它的圖標(biāo) 被加到了 IE 的標(biāo)準(zhǔn)按鈕欄上，如下圖所示。

在 IE 中啟用腳本調(diào)試功能

在我們能夠進(jìn)行 JavaScript 代碼調(diào)試之前，需要先啟用 IE 的腳本調(diào)試功能。

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

回頁首

調(diào)試方法

被動(dòng)調(diào)試

被動(dòng)調(diào)試，也可以稱為自動(dòng)調(diào)試，當(dāng) IE 碰到 JavaScript 語法及運(yùn)行時(shí)錯(cuò)誤，或者選中了查看 -> 腳本調(diào)試器 -> 在下一條語句中斷， IE 會(huì)自動(dòng)彈出一個(gè)"實(shí)時(shí)調(diào)試"窗口，讓你選擇調(diào)試器進(jìn)行調(diào)試，我們選擇"新實(shí)例 Microsoft Script Editor"，然后點(diǎn)擊"是"按鈕， 就可以進(jìn)行調(diào)試了，如下圖所示。不過這種被動(dòng)調(diào)試方式?jīng)]有可控性，而且我們平時(shí)多是調(diào)試邏輯而不是語法錯(cuò)誤， 這里就不做詳細(xì)介紹了。

主動(dòng)調(diào)試 - 使用 debugger 語句

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

下面我們將以一個(gè)例子來說明如何使用 IE Developer Toolbar 來定位目標(biāo)函數(shù)，進(jìn)而使用 MS Script Editor 進(jìn)行調(diào)試。

回頁首

應(yīng)用示例

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

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

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

定位目標(biāo)函數(shù)

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

調(diào)試代碼

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

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

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

回頁首

在 IE8 中進(jìn)行調(diào)試

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

定位目標(biāo)函數(shù)

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

調(diào)試代碼

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

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

回頁首

總結(jié)

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