VS2008 對 Javascript 的支援

Chui-Wen Chiu
2007.10.24
關鍵字：debug, visual studio, javascript, intellisense

前言

今天參加高雄場次的微軟研討會，第一場由曹祖聖主講 VS2008 對 Javascript 的支援，內容提到一些不錯和有待改進的部份整理成本篇文章，由於目前 VS2008 還處於 Beta2 版本，所以未來可能還會進行修改或強化。

Javascript Intellisense

VS2008 採用型別推測(type inference)方式來支援 Javascript 的 Intellisense，透過此一方式可以讓開發人員更容易找到變數/物件的成員，這個方法的缺點是如果無法正常推測初結果，則必須手動輸入，且此一方式需要花額外時間進行推測，所以，Intenllisense 需要一段時間才能夠呈現。除此之外，VS2008 也支援 HTML 中部引入外部的 js 檔，即使外部檔案位在其他網站，也仍然能夠使用(但是需要花一些時間)。如下圖：

圖1、Javascript Intellisense[1]

如果 HTML 中引入多個 js 檔案，為了 js 檔可以顯示其他 js 的 intellisense，必須在 js 檔的最開頭加上下面的相依宣告：

/// <reference
/// path="~/scripts/mylib.js"
/// assembly="System.Web"
/// name="ScriptResourceName.js"
/// />

其中 path 屬性用來定義引用的 js 檔案路徑，如果你使用 .NET 的組件，可透過 assembly 和 name 屬性指定 .NET 組件。如果忽略 assembly 屬性，預設為 System.Web.Extensions。

為了讓 Intellisense 支援說明，必須在定義的函數、物件或欄位中定義 XML 說明註解(註：註解說明位置和 C# 不同)。如：

function getWelcomeMessage(name){
/// <summary>
/// 這個函數是用來根據使用者姓名，自動產生歡迎文字
/// </summary>
/// <param name="name">使用者姓名</name>
/// <return>string</return>

return "歡迎 " + name;
}

執行結果：

圖2、函數說明提示[1]

圖3、參數說明提示[1]

以下是常用的 XML 註解：
函數參數

在定義數值說明時，可以使用 type, integer, domElement 和 mayBeNull。由於 JavaScript 沒有 integer 型別，只有 number 型別，所以可以將 type 設成 Number，integer 設成 true，來表示整數型別。可省略參數用 optional ="true"。參數如果可以重覆出現可將 parameterArray 設為 "true"。

陣列說明

="_x0000_s1026">

因為 JavaScript 並沒有類似 int[] 這樣的陣列宣告，因此在定義說明時，可以使用 elementType, elementInteger, elementDomElement 和 elementMayBeNull 來定義陣列的說明。

AJAX, ASP.NET, Web Service 對 Javascript Intellisense 支援

雖然 ASP.NET 也可直接印入 js 檔，但官方建議透過 ScriptManager 引用，引入之後即可獲得相同支援。如下：

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/MyLib.js" />
<asp:ScriptReference Path="~/jQuery.js" />
</Scripts>
</asp:ScriptManager>

如果想在引入 Web Services 中的 js，首先，在 Web Service 中必須加入 System.Web.Script.Services.ScriptService Attribute，如下：

[System.Web.Script.Services.ScriptServie()]
[WebService(Namespace="http://tempuri.org")]
public class WebService: System.Web.Services.WebService{
[WebMethod()]
public String Hello(){
return "Hello World";
}
}

接著在 ASP.NET 的 ScriptManager 中加入 Services 即可獲得支援，如下：

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ScriptReference Path="~/MyLib.asmx" />
</Services>
</asp:ScriptManager>

在 AJAX 上，AJAX Client Behavior, AJAX Client Control 和 AJAX Client Library 使用上也支援 Javascript Intenllisense。

圖4、AJAX 的支援[1]

Javascript 偵錯

VS2008 要對 IE 進行偵錯，必須在 IE 上關閉"停用程式碼除錯"選項(VS2005 或 Visual Script Debugger 相同)。如未關閉可能出現如下提示訊息：

圖5、除錯關閉提示[1]

關閉方式如下圖所示：

圖6、關閉除錯停用選項[1]

語法錯誤提示

當你透過 Visual Studio 編輯 Javascript 時，會即時檢查語法的正確性，如果你用 VS2005 編輯 C# 就會相當熟悉這個通能，他會在語法錯誤之處會標示提醒符號，如下圖：

圖7、語法檢查[1]

中斷點

可在程式中設定中斷點，如同 C# 程式一般，像是條件式中斷、hit count 中斷等，也可在中斷時，透過 Call Stack, 區域視窗, 即時監看視窗, Visualizer 等檢查相關的參數狀態，如下圖：

圖8、中斷點[1]

圖9、各種除錯視窗[1]

圖10、Visualizer [1]

偵測外部網頁

這個功能我覺得是這個主題中相當重要的一部分，這個主要用來偵錯已經在運作中的網頁 Javascript 功能，雖然 VS2005 也有類似的功能，但不像 VS2008 這麼強大，他可將指定的網址相關檔案下載下來，並在 VS 中呈現目前的內容，並且會依據實際情況變更。所以，如果你要研究某個網站的 Javascript 如何撰寫，只要透過這個方式將網頁資料透過 VS 偵測，並利用剛剛說的中斷點和其他除錯視窗，就是一個強大的 Hack 工具。唯一美中不足的是無法動態修改程式碼。希望未來能夠提供此功能。

由於沒有 VS2008 可抓圖展示，就以投影片的內容整理如下：

啟動外部偵錯
1. 使用 IE 瀏覽網頁
2. 使用 Visual Studio 2008 將 IE 的行程 (iexplorer.exe) 附加到偵錯模式下

圖11、VS 附加到指定 IE 行程 [1]

3. VS 會下載相關檔案到 Script Document

圖12、Script document [1]

4. 開啓檔案
4. 設定中斷點
5. 進行偵錯

圖13、Script document [1]

常見問題

1. 是否支援物件的 Intellisense?
是

2. 是否支援物件的程式碼註解格式？
是

3. 是否支援 Reference To 到函數或物件的功能？
否，尚未支援

4. VS2008 的 Javascript 註解格式是否可以產生文件？
目前尚未支援

5. 是否可關閉 Intellisense 功能？
否，沒有提供選項設定。

6. 可偵錯 Silverlight 嗎？
是

7. 現有的 javaDoc 註解格式是否支援 Intellisense 或提供轉換工具？
否，可透過 Open Source 尋找看看

8. 可支援 Firefox 上的偵錯嗎？
否