使用VisualStudio2010開發和除錯Html5專案

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

關於IE9開發大賽請瀏覽這裡：http://ie9.onlinevoc.cn/contest/Cintro.html

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

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

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

需要安裝IE9才能正常的除錯，IE9官方主頁如下：http://windows.microsoft.com/zh-CN/internet-explorer/products/ie-9/home

其次，需要下載一個HTML 5 Intellisense，下載地址：http://visualstudiogallery.msdn.microsoft.com/en-us/d771cbc8-d60a-40b0-a1d8-f19fc393127d

 

 

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

現在開啟Visual Studio新建一個網站專案：

 

 

這裡各位自行選擇，為了方便說明，我僅僅建立了一個空的Web專案。

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

 

在目標框架的選項欄內，已經擁有了Html5框架。

 

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

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

 

將上面的js加入到頁面中，輸入Canvas標籤，此時你會發現已經有了canvas的標籤，先寫頁面還是先寫JS取決於你的習慣，他們之間沒有先後關係。為了方便演示，我們加一個按鈕在頁面方便後面的除錯演示。

 

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

 

非常好，現在斷一下點看看，啟動除錯，點選按鈕就能啟用斷點了：

 

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

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

 

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

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