VS2008 對 Javascript 的支援
MSN Space、Google Doc 、Google Blog
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 註解：
函數參數
![]()
![]()
<param
name="參數名稱"
mayBeNull="true|false"
optional="true|false"
type="參數型別"
parameterArray="true|false"
integer="true|false"
domElement="true|false"
elementType="陣列元素型別"
elementInteger="true|false"
elementDomElement="true|false"
elementMayBeNull="true|false">
參數說明文字
</param> |
在定義數值說明時，可以使用 type, integer, domElement 和 mayBeNull。由於 JavaScript 沒有 integer 型別，只有 number 型別，所以可以將 type 設成 Number，integer 設成 true，來表示整數型別。可省略參數用 optional ="true"。參數如果可以重覆出現可將 parameterArray 設為 "true"。
陣列說明 ="_x0000_s1026">
因為 JavaScript 並沒有類似 int[] 這樣的陣列宣告，因此在定義說明時，可以使用 elementType, elementInteger, elementDomElement 和 elementMayBeNull 來定義陣列的說明。
函數回傳值 <returns
type="傳回值型別"
integer="true|false"
domElement="true|false"
mayBeNull="true|false"
elementType="陣列元素型別"
elementInteger="true|false"
elementDomElement="true|false"
elementMayBeNull="true|false">
傳回值說明文字
</returns>
元素和函數參數相同不贅述。
屬性 <value
type="數值型別"
integer="true|false"
domElement="true|false"
mayBeNull="true|false"
elementType="陣列元素型別"
elementInteger="true|false"
elementDomElement="true|false"
elementMayBeNull="true|false"
locid="descriptionID">
屬性說明文字
</value>
元素和函數參數相同不贅述。
欄位
<field
name="欄位名稱"
type="欄位型別"
integer="true|false"
domElement="true|false"
mayBeNull="true|false"
elementType="陣列元素型別"
elementInteger="true|false"
elementDomElement="true|false"
elementMayBeNull="true|false"
locid="descriptionID">欄位說明文字
</field>
元素和函數參數相同不贅述。
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 相同)。如未關閉可能出現如下提示訊息：
圖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 上的偵錯嗎？ 否
參考資料
[1] 曹祖聖, "
深入 Visual Studio 2008 Javascript 偵錯技術投影片 "
[2] "Debug JavaScript in JSP or PHP Pages with Visual Studio 2008"
發表文章
