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