在這篇文章中，你将學會如何快速搭建 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 =====