使用Visual Studio 2010開發和調試Html5項目

上周有幸參加微軟技術大會（TechED2010），身臨其境領略微軟這樣的國際化公司大家風範，雲加端的概念将技術思維提到的一個新的檔次，此行收獲很大，在第一天謝恩偉提到正在進行的IE9開發大賽讓我很是關注，一心好奇外加腦瓜一熱開始研究Html5——畢竟這個IE9大賽比的還隻是html5開發大賽而已。

我覺得Visual Studio是現今最好的開發工具之一，尤其是調試功能，使得我們非常容易的完成複雜項目的Debug，當然了還有其他的功能，無論是程式設計老鳥還是初學者，從易用性和學習性的方面上講選擇Visual Studio比較好，尤其是Express面向學生版本更加貼近初學者。

可是經過一番查找，發現這方面的中文資料并不多，甚至沒有明确的如何搭建Html5的開發環境，難道隻能使用很笨拙的方法開發Js代碼嗎？我覺得可能還未到真正的時機，Visual Studio 2010未必支援Html5的開發，不過最終找到了有關資訊，簡單配置就可以建立和開發html5項目，在這裡和大家分享一下。

首先，開發環境直接使用Visual Studio 2008、Visual Studio 2010和Visual Studio Express 2010。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/095503444.gif"></a>

這是微軟Visual Studio的官方網站的一個頁面，按照資訊，2010年上半年已經釋出HTML 5 Intellisense for Visual Studio，可能資訊在什麼地方慢了半拍，我們沒有得到，下載下傳完成之後安裝，如果你是内行，到此應知道下面的内容了：）。

現在打開Visual Studio建立一個網站項目：

<a target="_blank" href="http://blog.51cto.com/attachment/201111/095517470.gif"></a>

這裡各位自行選擇，為了友善說明，我僅僅建立了一個空的Web項目。

現在為功能添加一個.htm，如果你需要其他的頁面形式，可以參考這個靜态頁面的後續流程。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/095534603.gif"></a>

在目标架構的選項欄内，已經擁有了Html5架構。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/095546147.gif"></a>

我們標明之後就可以使用html5的标簽，後續的請參考有關Html5标簽的說明教程，在這裡不做太多的講解，下面通過一個例子來表述一下Canvas這個标簽，和簡單的調試示範。

首先放一張圖檔到目錄中（具體看你的需求），然後編寫一個簡單的Js代碼，這段代碼在很多的html5教程中有詳細說明。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/095601316.gif"></a>

将上面的js加入到頁面中，輸入Canvas标簽，此時你會發現已經有了canvas的标簽，先寫頁面還是先寫JS取決于你的習慣，他們之間沒有先後關系。為了友善示範，我們加一個按鈕在頁面友善後面的調試示範。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/095611643.gif"></a>

當我們點選按鈕的時候就會執行剛才的js繪制代碼，好了，我們點選一下看看效果。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/095621445.gif"></a>

非常好，現在斷一下點看看，啟動調試，點選按鈕就能激活斷點了：

<a target="_blank" href="http://blog.51cto.com/attachment/201111/095632766.gif"></a>

是不是非常不錯呢：）現在可以使用我們熟悉的環境進行Html5的項目開發，

如果你不能調試的話，可能會一些錯誤來自IE設定，打開IE設定做一下調整。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/095642565.gif"></a>

随着IE9的來臨，Html5将成為開發者的關注焦點，可能至今沒有任何一項能引起全體開發者的聚焦，即便是微軟也将其作為跨平台的重要戰略，還舉辦了IE9開發大賽，可是現今Html5的開發工具少之又少，使得我們開發者隻能駐足徘徊，簡單以教程的方式講述如何在Visual Studio 2010和Visual Studio Express 2010上開發和調試Html5的項目，希望能給各位帶來便利。

本文轉自nowpaper 51CTO部落格，原文連結:http://blog.51cto.com/nowpaper/712172