在这篇文章中，你将学会如何快速搭建 Cocos2d-HTML5 的开发和运行环境，对于脚本来说，大多编辑器提供语法高亮显示，而没有语义补全，虽然有些开发环境提供了自动补全功能，但都不大好用。这里推荐使用 WebStorm，作为一个 IDE（集成开发环境），它有非常强大的代码补全，而且其补全相当智能，提高了开发效率。还能与 Google Chrome 浏览器配合，完成实时编辑和调试功能。当然你可以有其它选择。下面详细介绍它的详细配置步骤。
在开始开发之前，第一步需要将 Cocos2d-html5 导入 WebStorm 项目工程。
首先解压缩 Cocos2d-html5-v2.1.5.zip 压缩包。
打开 WebStorm 进入欢迎界面，选择又侧 <code>Create New Project from Existing Files</code> 项
<code>Select scenario</code> 选择最后一项一项“Source files are in
a local directory …”，点击下一步
浏览文件夹到 Cocos2d-html5-v2.1.5 目录，然后点击 <code>Project Root</code> 设定跟目录
点击 “Finish” 完成项目导入。
完成以上步骤，便已经能够在 WebStorm 里面打开所有内容，编辑 <code>HelloHTML5World/src/myApp.js</code> 已经能够完成自动补全功能，这是因为当前整个项目包含了所有
js 源码。
如果是其它位置的项目没有包含 js 库完成自动补全的需要手动添加库（根据实际需要）。完成对 Cocos2d-html5 的补全，使用以下方式添加 js 库：
点击菜单 WebStorm <code>Preferences</code> 进入 <code>Settings</code> 界面
定位到 <code>Project Settings</code> 中 <code>JavaScript</code> 的 <code>Libraries</code> 选购项
点击 <code>Add</code> 按钮，进入 库 添加配置界面
如图所示，填写库名称，然后 <code>Attach</code> 浏览添加目录，其中根据需要包含库目录，OK！
以上是在其它独立的项目，使用 Cocos2d-html5 库时的环境配置。能够以如此的方式在任何项目添加 Cocos2d-html5 的库，可以在项目的 “External Libraries” 看到所有的依赖库。
以上是使用 WebStorm 开发环境的步骤，但同样需要浏览运行，查看效果。
右击项目主目录的 index.html 选择 调试 index.html 后，将以 Chrome 打开此页面（系统默认浏览器），而打开的方式，我们看到是系统文件路径，如 ：
<code>url = “file:///Users/leafsoar/Cocos2d-html5-v2.1.5/index.html”</code>
需要注意的是，以此方式所打开的页面，静态页面正常浏览，但选择 Hello World 运行，会加载不了，这是由于 cocos2d-html5 的处理机制与浏览器的兼容问题造成的（在其它浏览器会有不同的结果），官方推荐以服务的方式运行，如<code>http://localhost</code> 的方式。
在这里我们在浏览器中输入 <code>http://localhost:63342/Cocos2d-html5-v2.1.5/</code> 来访问当前项目，在
Chrome 我们也同样安装了 JetBrains 插件，以此协同工作。这样在修改项目中静态页面的时候，将会自动更新至页面，看到实时效果。<code>http://localhost:63342</code> 是由
WebStorm 提供了服务，后面跟项目名称，以服务的方式访问页面，查看效果。
调试步骤，我们需要修改 右击 调试 index.html 的 url 地址。点击工具条，调试配置，index.html 右侧下拉 Edit
Configurations，将默认的 Path 地址由：
<code>“/Users/leafsoar/Cocos2d-html5-v2.1.5/index.html”</code> 修改为 <code>“http://localhost:63342/Cocos2d-html5-v2.1.5/”</code> 如图：
完成以上配置后，我们在如 “HelloHTML5World/src/myApp.js” 中的代码设置以断点，后调试运行项目，测试 Hello World 便可以单步调试了：
我们可以修改 <code>HelloHTML5World</code> 来快速学习它们，其中 <code>template</code> 提供了一个项目模板，如果需要建立自己的项目，可以将它拷贝，然后基于它编写自己的代码程序。
附加：
<a target="_blank" href="http://karidyang.iteye.com/blog/925902">WebStorm注册码</a>
User Name:
EMBRACE
License Key:
===== LICENSE BEGIN =====
24718-12042010
00001h6wzKLpfo3gmjJ8xoTPw5mQvY
YA8vwka9tH!vibaUKS4FIDIkUfy!!f
3C"rQCIRbShpSlDcFT1xmJi5h0yQS6
===== LICENSE END =====