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