使用Visual Studio 2010开发和调试Html5项目
2010-12-04 16:14
441 查看
上周有幸参加微软技术大会(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
![](http://blog.51cto.com/attachment/201111/095503444.gif)
这是微软Visual Studio的官方网站的一个页面,按照信息,2010年上半年已经发布HTML 5 Intellisense for Visual Studio,可能信息在什么地方慢了半拍,我们没有得到,下载完成之后安装,如果你是内行,到此应知道下面的内容了:)。
现在打开Visual Studio新建一个网站项目:
![](http://blog.51cto.com/attachment/201111/095517470.gif)
这里各位自行选择,为了方便说明,我仅仅建立了一个空的Web项目。
现在为功能添加一个.htm,如果你需要其他的页面形式,可以参考这个静态页面的后续流程。
![](http://blog.51cto.com/attachment/201111/095534603.gif)
在目标框架的选项栏内,已经拥有了Html5框架。
![](http://blog.51cto.com/attachment/201111/095546147.gif)
我们选定之后就可以使用html5的标签,后续的请参考有关Html5标签的说明教程,在这里不做太多的讲解,下面通过一个例子来表述一下Canvas这个标签,和简单的调试演示。
首先放一张图片到目录中(具体看你的需求),然后编写一个简单的Js代码,这段代码在很多的html5教程中有详细说明。
![](http://blog.51cto.com/attachment/201111/095601316.gif)
将上面的js加入到页面中,输入Canvas标签,此时你会发现已经有了canvas的标签,先写页面还是先写JS取决于你的习惯,他们之间没有先后关系。为了方便演示,我们加一个按钮在页面方便后面的调试演示。
![](http://blog.51cto.com/attachment/201111/095611643.gif)
当我们点击按钮的时候就会执行刚才的js绘制代码,好了,我们点击一下看看效果。
![](http://blog.51cto.com/attachment/201111/095621445.gif)
非常好,现在断一下点看看,启动调试,点击按钮就能激活断点了:
![](http://blog.51cto.com/attachment/201111/095632766.gif)
是不是非常不错呢:)现在可以使用我们熟悉的环境进行Html5的项目开发,
如果你不能调试的话,可能会一些错误来自IE设置,打开IE设置做一下调整。
![](http://blog.51cto.com/attachment/201111/095642565.gif)
随着IE9的来临,Html5将成为开发者的关注焦点,可能至今没有任何一项能引起全体开发者的聚焦,即便是微软也将其作为跨平台的重要战略,还举办了IE9开发大赛,可是现今Html5的开发工具少之又少,使得我们开发者只能驻足徘徊,简单以教程的方式讲述如何在Visual Studio 2010和Visual Studio Express 2010上开发和调试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
![](http://blog.51cto.com/attachment/201111/095503444.gif)
这是微软Visual Studio的官方网站的一个页面,按照信息,2010年上半年已经发布HTML 5 Intellisense for Visual Studio,可能信息在什么地方慢了半拍,我们没有得到,下载完成之后安装,如果你是内行,到此应知道下面的内容了:)。
现在打开Visual Studio新建一个网站项目:
![](http://blog.51cto.com/attachment/201111/095517470.gif)
这里各位自行选择,为了方便说明,我仅仅建立了一个空的Web项目。
现在为功能添加一个.htm,如果你需要其他的页面形式,可以参考这个静态页面的后续流程。
![](http://blog.51cto.com/attachment/201111/095534603.gif)
在目标框架的选项栏内,已经拥有了Html5框架。
![](http://blog.51cto.com/attachment/201111/095546147.gif)
我们选定之后就可以使用html5的标签,后续的请参考有关Html5标签的说明教程,在这里不做太多的讲解,下面通过一个例子来表述一下Canvas这个标签,和简单的调试演示。
首先放一张图片到目录中(具体看你的需求),然后编写一个简单的Js代码,这段代码在很多的html5教程中有详细说明。
![](http://blog.51cto.com/attachment/201111/095601316.gif)
将上面的js加入到页面中,输入Canvas标签,此时你会发现已经有了canvas的标签,先写页面还是先写JS取决于你的习惯,他们之间没有先后关系。为了方便演示,我们加一个按钮在页面方便后面的调试演示。
![](http://blog.51cto.com/attachment/201111/095611643.gif)
当我们点击按钮的时候就会执行刚才的js绘制代码,好了,我们点击一下看看效果。
![](http://blog.51cto.com/attachment/201111/095621445.gif)
非常好,现在断一下点看看,启动调试,点击按钮就能激活断点了:
![](http://blog.51cto.com/attachment/201111/095632766.gif)
是不是非常不错呢:)现在可以使用我们熟悉的环境进行Html5的项目开发,
如果你不能调试的话,可能会一些错误来自IE设置,打开IE设置做一下调整。
![](http://blog.51cto.com/attachment/201111/095642565.gif)
随着IE9的来临,Html5将成为开发者的关注焦点,可能至今没有任何一项能引起全体开发者的聚焦,即便是微软也将其作为跨平台的重要战略,还举办了IE9开发大赛,可是现今Html5的开发工具少之又少,使得我们开发者只能驻足徘徊,简单以教程的方式讲述如何在Visual Studio 2010和Visual Studio Express 2010上开发和调试Html5的项目,希望能给各位带来便利。
相关文章推荐
- 使用Visual Studio 2010开发和调试Html5项目
- 使用Egret开发的HTML5项目,使用本地电脑作为服务器进行移动端调试流程
- 使用VB.net Express 2010开发AutoCAD.net插件调试时出现很多错误的解决办法
- 【转载】使用Visual Studio 2010调试断点不起作用的问题解决办法(AutoCAD)
- 使用Visual Studio 2010调试断点不起作用的问题解决办法
- 使用Visual Studio 2010调试断点不起作用的问题解决办法
- Visual Studio 2010起始页中不显示最近使用的项目的解决办法
- VS 2010 WebSite网站 使用CodeBehide 方式开发[Web应用程序项目转Web网站]
- Visual Studio 2010开发AutoCAD 2012 .net 应用程序调试时断点不起作用
- visual studio 2010 开发net 2.0 3.5项目
- Visual Studio 2010 开发与调试IronPython脚本 为你的ERP/MIS 应用程序添加脚本功能
- 在Visual Studio 2010/2012/2013/2015上使用C#开发Android/IOS安装包和操作步骤
- MOSS 2010:Visual Studio 2010开发体验(20)——使用ADO.NET Data Service快速访问SharePoint列表数据
- 使用VS Code开发调试.NET Core 多项目
- MOSS 2010:Visual Studio 2010开发体验(21)——使用Business Connectivity Service(BCS)集成业务系统
- visual studio 2008/2010安装在vm中时,打开项目或者调试完成后会假死一段时间
- 提高你开发效率的十五个Visual Studio 2010使用技巧
- 使用IntelliTrace在Visual Studio 2010中调试.NET应用程序
- 使用Visual Studio 2012 开发 Html5 应用
- 提高你开发效率的十五个Visual Studio 2010使用技巧