JavaScript已經(jīng)發(fā)展成為進行Web客戶端編程的標(biāo)準(zhǔn)語言。它有大量的語言資源,但是對開發(fā)的支持并不完備。大多數(shù)使用JavaScript的開發(fā)人員更傾向于用原來的方法進行調(diào)試,但是現(xiàn)在有很多工具來減輕測試和調(diào)試的負(fù)擔(dān)。
Visual Studio 2008將是一個非常激動人心的版本,包含了成堆的強大的功能。其中一個新特性就是更加完善的支持對JavaScript的調(diào)試及 IntelliSense功能。Visual Studio 2008其實是開發(fā)JavaScript程序最優(yōu)秀的IDE,對JavaScript的代碼誘導(dǎo)能力最強,而且還可以進行斷點跟蹤調(diào)試調(diào)試。在本文中,將 展示的這兩方面的特性,希望為JavaScript的編輯及調(diào)試帶來新開發(fā)方式,但愿讀者能尋找到一款更好的JavaScript開發(fā)工具。
一、 JavaScript 智能感知(Intellisense)功能
Java、C#等各種高級語言的開發(fā)工具琳瑯滿目,爭放異彩。但作為AJAX的主角的JavaScript語言,配套的開發(fā)工具總保持著不相稱的沉 寂。缺乏良好開發(fā)工具的支持,編寫JavaScript程序,特別是超過500行以上的JavaScript程序變得極富挑戰(zhàn)性——沒有代碼誘導(dǎo)功能,沒 有實時錯誤檢查,沒有斷點跟蹤調(diào)試……開發(fā)JavaScript代碼有時就像在黑暗的隧道里靠觸覺摸索著前行。在代碼中不小心增加了一個多余的“(”或 “{”,整段代碼可能馬上像一堵猝然倒塌的城墻,在IE中報出的錯誤往往似是而非,甚至和真實原因往往相差十萬八千里,讓人如墮云里霧里。好事者引用柳傳 志的話,概括編寫JavaScript程序的感受:戰(zhàn)戰(zhàn)兢兢,如履薄冰。
(1) 無處不在的Intellisense功能
開發(fā)人員對Visual Studio 2008中一個殷切期盼的特性是,Visual Studio 2008對客戶端JavaScript Intellisense的支持,當(dāng)然這個特性在免費的Visual Web Developer Express版本中也能正常的工作。
Visual Studio 2008的JavaScript IntelliSense功能類似其他IDE中的Auto-completion,也就是能夠自動補全,不過和VI和Emacs中的Auto- completion不一樣,IntelliSense比較Intelligent,根據(jù)編程語言的語法來談出備選填。
如果讀者以前曾為手工鍵入JavaScript感到煩惱的話,那肯定會為Visual Studio 2008的這個特性感到驚喜。Visual Studio 2008 為所有的.aspx 文件、.htm 文件以及外部的.js 文件中都提供完整的JavaScript Intellisense自動完成功能。它不僅對普通的JavaScript代碼提供了Intellisense ,還對新的ASP.NET AJAX 客戶端JavaScript框架和用它編寫的JavaScript代碼提供了豐富的支持。
(2) 外部JS文件的Intellisense功能
Visual Studio 2008中的JavaScript Intellisense支持之酷處在于,它被設(shè)計成開箱即可用(Just work out of the box)的。這意味著,開發(fā)人員不需要對JavaScript文件運行別的工具來建立Intellisense提示,也不用以某種方式來修飾 JavaScript。如果在外部JavaScript文件中建有一個標(biāo)準(zhǔn)的JavaScript函數(shù)或原型類型,那么Visual Studio 2008中使用它時,就應(yīng)該自動得到Intellisense完成。
很明顯,當(dāng)外部JS文件具在Intellisense功能時,開發(fā)人員就可以像使用內(nèi)部的JavaScript語句塊一樣進行調(diào)用。如此一來,就可以自動調(diào)用外部JS文件中定義的JavaScript函數(shù)及變量。
例如,如下圖所示,在些在文件中引用了兩個.js文件
于是,在MyLibrary.js文件中即可以調(diào)用Util.js文件中定義的方法了。當(dāng)然,也可以讓Visual Studio 2008讓Util.js具有Intellisense功能。只需在MyLibrary.js文件的最頂部加入<reference></reference>注釋即可。
(3) JavaScript文檔注釋
Visual Studio 2008還允許開發(fā)人員可選擇性地在代碼/庫中添加文檔注釋,來進一步幫助Intellisense 引擎,以及允許開發(fā)人員提供文檔注釋,Visual Studio Intellisense引擎可以收集這些注釋,用作摘要注釋和類型描述/驗證檢查。
譬如,如果開發(fā)人員可以把如下的注釋添加到getMessage函數(shù):
當(dāng)在Default.aspx中進行編碼時,Visual Studio 2008會自動的顯示getMessage函數(shù)的相關(guān)信息。Visual Studio 會自動顯示摘要的細(xì)節(jié),以及在健入?yún)?shù)值時提供行內(nèi)的幫助。
除了以上的基本JavaScript注釋功能之外,ASP.NET AJAX也使用文檔摘要注釋的格式。兩者都可以:
給類、方法、參數(shù)添加摘要細(xì)節(jié);本地化JavaScript中的文檔;當(dāng)一個外部JavaScript 文件引用另一個外部JavaScript 文件后,在使用前一個外部JavaScript文件時,讓它的Javascript Intellisense認(rèn)為,另外文件中的方法和類型在當(dāng)前的范圍內(nèi)。
ASP.NET AJAX 控件工具包現(xiàn)在也擁有了內(nèi)置的MSBuild任務(wù),可以將其加到web項目里,該任務(wù)可以在項目以“發(fā)布”模式編譯時,自動從JavaScript 文件中除去這些文檔注釋以及空格和其他不需要的內(nèi)容。這提供了非常有用的功能,它允許在開發(fā)時維護調(diào)試/描述性的Javascript版本,然后允許做個 切換就可生成為運行時高效下載而優(yōu)化的版本。
二、 JavaScript調(diào)試功能
面對一大段的JavaScript腳本,以前總是會很頭疼,找不到調(diào)試這些代碼的方法。如果出現(xiàn)什么錯誤或異常,總是要從頭分析,然后插入很多Alert(),調(diào)試起來很麻煩。
Visual Studio 2008中JavaScript所具有的另外一個特性,是它提供了更加強大的JavaScript調(diào)試功能,這使得JavaScript的使用及構(gòu)建 AJAX應(yīng)用都變得容易很多。同樣,這項功能在免費的Visual Web Developer Express版本中和Visual Studio中都具有。
(1) 在ASP.NET頁面中設(shè)置JavaScript斷點
在Visual Studio 2005中調(diào)試JavaScript有個很讓人頭痛的問題,那就是要先運行ASP.NET頁面才能在調(diào)試器中設(shè)置JavaScript斷點。而這個問題在 Visual Studio 2008有了很好的解決。在服務(wù)器的.asp文件和.master文件中就可以直接為客戶端的JavaScript設(shè)計斷點,從而進行調(diào)試。
如果開發(fā)人員在.aspx文件中設(shè)置了如上所示的斷點,當(dāng)在瀏覽器中運行此頁面并運行此頁面時,Visual Studio 2008將會自動的將斷點位置匹配到所生成的客戶端HTML頁面中去。
如果開發(fā)人員在HTML文檔中對斷點的位置進行了變化,如增加、刪除斷點或是移動斷點的位置,此時,Visual Studio 2008會很聰明的進行反匹配,即根據(jù)客戶端HTML文檔中斷點位置的變化來改變服務(wù)器端原始的.aspx文件或.master文件中斷點的位置。這就為 開發(fā)人員提供了一個非常智能的調(diào)試器,可以進行一整套的編輯—調(diào)試—再編輯—再調(diào)試的可疊加的調(diào)試工作流程。
更加讓人激動的是,開發(fā)人員不僅可以在客戶端的JavaScript中設(shè)置斷點,還可以同時在VB或C#等服務(wù)器端文件中設(shè)置斷點,甚至是在同一頁面 中。然后使用單一調(diào)試模型進行服務(wù)器端與客戶端代碼的調(diào)試(當(dāng)然這必須屬于同一個會話)。這樣的單一調(diào)試模式在AJAX大型應(yīng)用中非常有用的。
請注意,開發(fā)人員所設(shè)置的任何斷點,在關(guān)閉整個項目或是解決方案后,Visual Studio 2008都會默認(rèn)的進行保存。當(dāng)下次再次打開此工程或是項目是,以前設(shè)置的斷點都將會存在代碼中。
(2) 解決方案管理器(Solution Explorer)中的Script Document導(dǎo)航
就一般而言,JavaScript在服務(wù)器端動態(tài)的生成,然后被瀏覽器進行解釋運行(例如,用腳本寫成的服務(wù)器端控件,如ASP.NET AJAX UpdatePanels)。而在調(diào)試時,可以很容易的查看到頁面所正在加載的JavaScript的URLs,以及調(diào)試器下步所要進入的URL。
在Visual Studio 2008中,由于將Script Document功能整合到了Visual Studio 2008的解決方案管理器視圖中來了(在Visual Studio 2005中是作為一個單獨的tool-pane窗口存在的),所以在調(diào)試Web應(yīng)用程序時,這顯得非常的有幫助。
當(dāng)使用Visual Studio 2008來調(diào)試JavaScript時,在Solution explorer pane中可以查看到調(diào)試頁面所加載的script URLs清單,如下圖所示:
開發(fā)人員可以雙擊Script Documents節(jié)點下面的任何script URLs來查看此頁面所加載的JavaScript內(nèi)容,從而開發(fā)人員可以在此打開的JavaScript文檔設(shè)置斷點進行調(diào)試,如下圖所示:
(3) 豐富的查看/定位及可視化支持
當(dāng)然,JavaScript的易于打開及導(dǎo)航當(dāng)然是優(yōu)良調(diào)試器的特征之一。而真正使Visual Studio 2008變成獨特的JavaScript調(diào)試的特點是,它支持對象的執(zhí)行及監(jiān)視功能。當(dāng)開發(fā)人員在Visual Studio 2008中對某一變量進行調(diào)試監(jiān)視時,可以查看到此變量對象非常詳細(xì)有用的信息,如下圖所示:
開發(fā)人員可以查看運行時狀態(tài)對象的所在方法、所有事件。可以獲得更多的關(guān)于此對象的詳細(xì)屬性及屬性類型。當(dāng)然,開發(fā)人員可以在此面的網(wǎng)格中查看對象的相關(guān)信息,還可以在即時窗口中運行代碼來查看相關(guān)信息。
除此之外,Visual Studio 2008還支持可插入可視化調(diào)試。它可以提供一般調(diào)試器之外的額外信息,從而使調(diào)試器對被調(diào)試對象提供更加豐富的可視化視圖。例如,可以使用Visual Studio 2008內(nèi)建的”Text”、”XML”或是”HTML”等可視化工具來加載新窗口,從而為被監(jiān)視的變量提供更加詳細(xì)的信息。
三、 小結(jié)
在調(diào)試AJAX 和JavaScript時,開發(fā)人員可以在服務(wù)器端代碼中設(shè)置客戶端JavaScript斷點,Visual Studio 2008可以自動地在客戶端把它們接連起來(這些斷點也可以在關(guān)閉項目/解決方案時保存起來)。在調(diào)試時,也有完整的監(jiān)視窗口(watch window),intermediate 窗口和其他更多的支持。Visual Studio 2008中的解決方案管理器現(xiàn)在也自動地列出正在運行的JavaScript文檔文件,允許你在任何腳本資源里輕松地設(shè)置斷點。
上面比較簡單的介紹了一些關(guān)于Visual Studio 2008在JavaScript編輯及調(diào)試方面的功能特性。這些功能都將包含在Visual Studio 2008及.NET 3.5中。由于Visual Studio 2008支持多定向功能,因此,開發(fā)人員不僅可以在基于.NET 3.5的ASP.NET中使用上面的JavaScript編輯調(diào)試功能,同樣可以在ASP.NET 2.0中應(yīng)用中調(diào)試JavaScript。筆者相關(guān),如此強大的JavaScript編輯調(diào)試功能,足夠我們開始向Visual Studio 2008遷移
Visual Studio 2008將是一個非常激動人心的版本,包含了成堆的強大的功能。其中一個新特性就是更加完善的支持對JavaScript的調(diào)試及 IntelliSense功能。Visual Studio 2008其實是開發(fā)JavaScript程序最優(yōu)秀的IDE,對JavaScript的代碼誘導(dǎo)能力最強,而且還可以進行斷點跟蹤調(diào)試調(diào)試。在本文中,將 展示的這兩方面的特性,希望為JavaScript的編輯及調(diào)試帶來新開發(fā)方式,但愿讀者能尋找到一款更好的JavaScript開發(fā)工具。
一、 JavaScript 智能感知(Intellisense)功能
Java、C#等各種高級語言的開發(fā)工具琳瑯滿目,爭放異彩。但作為AJAX的主角的JavaScript語言,配套的開發(fā)工具總保持著不相稱的沉 寂。缺乏良好開發(fā)工具的支持,編寫JavaScript程序,特別是超過500行以上的JavaScript程序變得極富挑戰(zhàn)性——沒有代碼誘導(dǎo)功能,沒 有實時錯誤檢查,沒有斷點跟蹤調(diào)試……開發(fā)JavaScript代碼有時就像在黑暗的隧道里靠觸覺摸索著前行。在代碼中不小心增加了一個多余的“(”或 “{”,整段代碼可能馬上像一堵猝然倒塌的城墻,在IE中報出的錯誤往往似是而非,甚至和真實原因往往相差十萬八千里,讓人如墮云里霧里。好事者引用柳傳 志的話,概括編寫JavaScript程序的感受:戰(zhàn)戰(zhàn)兢兢,如履薄冰。
(1) 無處不在的Intellisense功能
開發(fā)人員對Visual Studio 2008中一個殷切期盼的特性是,Visual Studio 2008對客戶端JavaScript Intellisense的支持,當(dāng)然這個特性在免費的Visual Web Developer Express版本中也能正常的工作。
Visual Studio 2008的JavaScript IntelliSense功能類似其他IDE中的Auto-completion,也就是能夠自動補全,不過和VI和Emacs中的Auto- completion不一樣,IntelliSense比較Intelligent,根據(jù)編程語言的語法來談出備選填。
如果讀者以前曾為手工鍵入JavaScript感到煩惱的話,那肯定會為Visual Studio 2008的這個特性感到驚喜。Visual Studio 2008 為所有的.aspx 文件、.htm 文件以及外部的.js 文件中都提供完整的JavaScript Intellisense自動完成功能。它不僅對普通的JavaScript代碼提供了Intellisense ,還對新的ASP.NET AJAX 客戶端JavaScript框架和用它編寫的JavaScript代碼提供了豐富的支持。
(2) 外部JS文件的Intellisense功能
Visual Studio 2008中的JavaScript Intellisense支持之酷處在于,它被設(shè)計成開箱即可用(Just work out of the box)的。這意味著,開發(fā)人員不需要對JavaScript文件運行別的工具來建立Intellisense提示,也不用以某種方式來修飾 JavaScript。如果在外部JavaScript文件中建有一個標(biāo)準(zhǔn)的JavaScript函數(shù)或原型類型,那么Visual Studio 2008中使用它時,就應(yīng)該自動得到Intellisense完成。
很明顯,當(dāng)外部JS文件具在Intellisense功能時,開發(fā)人員就可以像使用內(nèi)部的JavaScript語句塊一樣進行調(diào)用。如此一來,就可以自動調(diào)用外部JS文件中定義的JavaScript函數(shù)及變量。
例如,如下圖所示,在些在文件中引用了兩個.js文件

于是,在MyLibrary.js文件中即可以調(diào)用Util.js文件中定義的方法了。當(dāng)然,也可以讓Visual Studio 2008讓Util.js具有Intellisense功能。只需在MyLibrary.js文件的最頂部加入<reference></reference>注釋即可。

(3) JavaScript文檔注釋
Visual Studio 2008還允許開發(fā)人員可選擇性地在代碼/庫中添加文檔注釋,來進一步幫助Intellisense 引擎,以及允許開發(fā)人員提供文檔注釋,Visual Studio Intellisense引擎可以收集這些注釋,用作摘要注釋和類型描述/驗證檢查。
譬如,如果開發(fā)人員可以把如下的注釋添加到getMessage函數(shù):

當(dāng)在Default.aspx中進行編碼時,Visual Studio 2008會自動的顯示getMessage函數(shù)的相關(guān)信息。Visual Studio 會自動顯示摘要的細(xì)節(jié),以及在健入?yún)?shù)值時提供行內(nèi)的幫助。
除了以上的基本JavaScript注釋功能之外,ASP.NET AJAX也使用文檔摘要注釋的格式。兩者都可以:
給類、方法、參數(shù)添加摘要細(xì)節(jié);本地化JavaScript中的文檔;當(dāng)一個外部JavaScript 文件引用另一個外部JavaScript 文件后,在使用前一個外部JavaScript文件時,讓它的Javascript Intellisense認(rèn)為,另外文件中的方法和類型在當(dāng)前的范圍內(nèi)。
ASP.NET AJAX 控件工具包現(xiàn)在也擁有了內(nèi)置的MSBuild任務(wù),可以將其加到web項目里,該任務(wù)可以在項目以“發(fā)布”模式編譯時,自動從JavaScript 文件中除去這些文檔注釋以及空格和其他不需要的內(nèi)容。這提供了非常有用的功能,它允許在開發(fā)時維護調(diào)試/描述性的Javascript版本,然后允許做個 切換就可生成為運行時高效下載而優(yōu)化的版本。
二、 JavaScript調(diào)試功能
面對一大段的JavaScript腳本,以前總是會很頭疼,找不到調(diào)試這些代碼的方法。如果出現(xiàn)什么錯誤或異常,總是要從頭分析,然后插入很多Alert(),調(diào)試起來很麻煩。
Visual Studio 2008中JavaScript所具有的另外一個特性,是它提供了更加強大的JavaScript調(diào)試功能,這使得JavaScript的使用及構(gòu)建 AJAX應(yīng)用都變得容易很多。同樣,這項功能在免費的Visual Web Developer Express版本中和Visual Studio中都具有。
(1) 在ASP.NET頁面中設(shè)置JavaScript斷點
在Visual Studio 2005中調(diào)試JavaScript有個很讓人頭痛的問題,那就是要先運行ASP.NET頁面才能在調(diào)試器中設(shè)置JavaScript斷點。而這個問題在 Visual Studio 2008有了很好的解決。在服務(wù)器的.asp文件和.master文件中就可以直接為客戶端的JavaScript設(shè)計斷點,從而進行調(diào)試。

如果開發(fā)人員在.aspx文件中設(shè)置了如上所示的斷點,當(dāng)在瀏覽器中運行此頁面并運行此頁面時,Visual Studio 2008將會自動的將斷點位置匹配到所生成的客戶端HTML頁面中去。

如果開發(fā)人員在HTML文檔中對斷點的位置進行了變化,如增加、刪除斷點或是移動斷點的位置,此時,Visual Studio 2008會很聰明的進行反匹配,即根據(jù)客戶端HTML文檔中斷點位置的變化來改變服務(wù)器端原始的.aspx文件或.master文件中斷點的位置。這就為 開發(fā)人員提供了一個非常智能的調(diào)試器,可以進行一整套的編輯—調(diào)試—再編輯—再調(diào)試的可疊加的調(diào)試工作流程。
更加讓人激動的是,開發(fā)人員不僅可以在客戶端的JavaScript中設(shè)置斷點,還可以同時在VB或C#等服務(wù)器端文件中設(shè)置斷點,甚至是在同一頁面 中。然后使用單一調(diào)試模型進行服務(wù)器端與客戶端代碼的調(diào)試(當(dāng)然這必須屬于同一個會話)。這樣的單一調(diào)試模式在AJAX大型應(yīng)用中非常有用的。
請注意,開發(fā)人員所設(shè)置的任何斷點,在關(guān)閉整個項目或是解決方案后,Visual Studio 2008都會默認(rèn)的進行保存。當(dāng)下次再次打開此工程或是項目是,以前設(shè)置的斷點都將會存在代碼中。
(2) 解決方案管理器(Solution Explorer)中的Script Document導(dǎo)航
就一般而言,JavaScript在服務(wù)器端動態(tài)的生成,然后被瀏覽器進行解釋運行(例如,用腳本寫成的服務(wù)器端控件,如ASP.NET AJAX UpdatePanels)。而在調(diào)試時,可以很容易的查看到頁面所正在加載的JavaScript的URLs,以及調(diào)試器下步所要進入的URL。
在Visual Studio 2008中,由于將Script Document功能整合到了Visual Studio 2008的解決方案管理器視圖中來了(在Visual Studio 2005中是作為一個單獨的tool-pane窗口存在的),所以在調(diào)試Web應(yīng)用程序時,這顯得非常的有幫助。
當(dāng)使用Visual Studio 2008來調(diào)試JavaScript時,在Solution explorer pane中可以查看到調(diào)試頁面所加載的script URLs清單,如下圖所示:

開發(fā)人員可以雙擊Script Documents節(jié)點下面的任何script URLs來查看此頁面所加載的JavaScript內(nèi)容,從而開發(fā)人員可以在此打開的JavaScript文檔設(shè)置斷點進行調(diào)試,如下圖所示:

(3) 豐富的查看/定位及可視化支持
當(dāng)然,JavaScript的易于打開及導(dǎo)航當(dāng)然是優(yōu)良調(diào)試器的特征之一。而真正使Visual Studio 2008變成獨特的JavaScript調(diào)試的特點是,它支持對象的執(zhí)行及監(jiān)視功能。當(dāng)開發(fā)人員在Visual Studio 2008中對某一變量進行調(diào)試監(jiān)視時,可以查看到此變量對象非常詳細(xì)有用的信息,如下圖所示:

開發(fā)人員可以查看運行時狀態(tài)對象的所在方法、所有事件。可以獲得更多的關(guān)于此對象的詳細(xì)屬性及屬性類型。當(dāng)然,開發(fā)人員可以在此面的網(wǎng)格中查看對象的相關(guān)信息,還可以在即時窗口中運行代碼來查看相關(guān)信息。
除此之外,Visual Studio 2008還支持可插入可視化調(diào)試。它可以提供一般調(diào)試器之外的額外信息,從而使調(diào)試器對被調(diào)試對象提供更加豐富的可視化視圖。例如,可以使用Visual Studio 2008內(nèi)建的”Text”、”XML”或是”HTML”等可視化工具來加載新窗口,從而為被監(jiān)視的變量提供更加詳細(xì)的信息。
三、 小結(jié)
在調(diào)試AJAX 和JavaScript時,開發(fā)人員可以在服務(wù)器端代碼中設(shè)置客戶端JavaScript斷點,Visual Studio 2008可以自動地在客戶端把它們接連起來(這些斷點也可以在關(guān)閉項目/解決方案時保存起來)。在調(diào)試時,也有完整的監(jiān)視窗口(watch window),intermediate 窗口和其他更多的支持。Visual Studio 2008中的解決方案管理器現(xiàn)在也自動地列出正在運行的JavaScript文檔文件,允許你在任何腳本資源里輕松地設(shè)置斷點。
上面比較簡單的介紹了一些關(guān)于Visual Studio 2008在JavaScript編輯及調(diào)試方面的功能特性。這些功能都將包含在Visual Studio 2008及.NET 3.5中。由于Visual Studio 2008支持多定向功能,因此,開發(fā)人員不僅可以在基于.NET 3.5的ASP.NET中使用上面的JavaScript編輯調(diào)試功能,同樣可以在ASP.NET 2.0中應(yīng)用中調(diào)試JavaScript。筆者相關(guān),如此強大的JavaScript編輯調(diào)試功能,足夠我們開始向Visual Studio 2008遷移
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯(lián)系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
