posts - 21, comments - 42, trackbacks - 0

今天，我想向大家介紹一下 IE 的調(diào)試工具，因為經(jīng)常聽到一些剛?cè)腴T的 JavaScript 開發(fā)人員抱怨說，沒有好的 JavaScript 開發(fā)環(huán)境，沒有好用的調(diào)試器，沒有集成的 IDE 工具。2005 年，一個被稱做 Aptana 的免費(fèi)開源項目啟動了，但是直到 2006 年底，才為人們所知。新年伊始，對于開發(fā)人員來說，這個 Ajax 開發(fā)環(huán)境無疑是個好消息。

本篇不想介紹這個新生兒，我只是想介紹一個被微軟藏著掖著，總也不放到明面兒上，讓大家都知道的工具—“Microsoft 腳本編輯器”。當(dāng) IE 被升級到 5.5 以上之后，那個所謂的“Windows Script Debugger”其實已經(jīng)與 IE 的 JavaScript 開發(fā)不兼容了，許多對象的屬性值根本無法被正確的監(jiān)視。但是做為替代品，“Microsoft 腳本編輯器”恰恰可以彌補(bǔ)這個不足，它的強(qiáng)大，足以應(yīng)付 IE 下網(wǎng)頁腳本的開發(fā)。這個工具被捆綁在“Microsoft Development Environment”環(huán)境中，如果你安裝有“Microsoft Visual Studio .NET”，或者“Microsoft Office XP(10.0)”以上的版本，你都可以使用這個腳本調(diào)試工具。由于這個工具是微軟自己開發(fā)的，所以運(yùn)行效率很高，并且與 IE 的兼容性也是最好的。

因為“Microsoft Visual Studio .NET”太大了，所以通過 Office 來安裝這個工具，就顯得特別有意義。安裝此工具的方法比較特殊，因為它是通過“Office Word”來引導(dǎo)安裝的。下面，通過安裝過程的截圖，你可以了解到如何安裝這個工具。

完成上面那個的“Internet 選項”設(shè)置之后，關(guān)閉所有已經(jīng)打開的 IE 窗口，然后再運(yùn)行 IE。你會發(fā)現(xiàn)在 IE 的“查看”菜單下，多了一個“腳本調(diào)試程序”項，如下圖所示

至此，“Microsoft 腳本編輯器”便安裝完畢了。當(dāng)你瀏覽的網(wǎng)頁出現(xiàn)腳本語法錯誤或?qū)崟r運(yùn)行錯誤時，瀏覽器將自動彈出如下的窗口，提示你是否調(diào)試此錯誤。

而當(dāng)你沒有安裝此工具前，所有的腳本錯誤只能通過點(diǎn)擊瀏覽器狀態(tài)欄的左下角，彈出錯誤提示窗口來查看，而這顯然是“幼稚”的方法，起到的作用也如“盲人摸象”一般。

雖然這個工具可以用來解決腳本運(yùn)行時的錯誤，但有時我們只想跟蹤程序的邏輯，或者熟悉 DOM 對象的 API。也許被跟蹤的代碼任何錯誤也沒有，或者我們只想看看在某一時刻，某個 DOM 對象的某個屬性是否能被訪問。在所有的語言調(diào)試環(huán)境中，通用的方法就是設(shè)置“斷點(diǎn)”，而這個工具對于“斷點(diǎn)”的支持不像 Firebug 或 JavaScrip Debugger 那樣好，可以調(diào)出已經(jīng)裝載在當(dāng)前網(wǎng)頁中的任何腳本，以便隨時的添加斷點(diǎn)。所以，利用“Microsoft 腳本編輯器”動態(tài)地設(shè)置腳本斷點(diǎn)，來進(jìn)行跟蹤調(diào)試是非常不方便的。對于這種情況，我們需要在代碼中人為地制造一些斷點(diǎn)，達(dá)到方便調(diào)試的目的。比如，有如下的代碼片段

     var person = {name: "Lewis", gender: "male", blogURL: "http://www.lewislv.org"};     var years = [2000, 2001, 2002, 2004, 2005, 2006];     person.employmentYears = years;

以上是一段語法正確的 JavaScript 代碼。然而，初學(xué)者可能只是想了解對象是如何被實例化，代碼是如何被運(yùn)行的。IE 的 JavaScript 解釋器提供了一個保留的 debugger 語句（VBScript 調(diào)試的等價關(guān)鍵字是 stop），它可以告訴瀏覽器調(diào)出調(diào)試程序，以此達(dá)到設(shè)置斷點(diǎn)的目的。對于上面的代碼，假設(shè)我想了解一下 person 對象和 years 數(shù)組的存儲結(jié)構(gòu)，那么我可以在代碼的入口處添加一條 debugger 語句，更改后的代碼片段如下

     debugger     var person = {name: “Lewis”, gender: “male”, blogURL: “http://www.lewislv.org”};     var years = [2000, 2001, 2002, 2004, 2005, 2006];     person.employmentYears = years;

當(dāng)代碼在瀏覽器中被裝載并運(yùn)行時，它會解釋 debugger 語句，彈出是否調(diào)試的窗口。同樣，我做了一些截圖，用來演示如何達(dá)到查看變量存儲結(jié)構(gòu)的目的