本篇博文視訊版請點選這裡，歡迎大家點評訂閱
cocoscreator與cocos2d-js 都是使用 javascript 語言，前一篇《探索cocos H5正确的開發姿勢(一)》講過它們與 cocos2d-x和 cocos2d-lua 在開發理念上有很大的不同，是以他們在開發、調試中使用到的工具上也有很大差別。
代碼編輯器
部落客經曆過三個 cocos2d-js 項目和一個 creator 項目，選擇好的編輯器需要從編寫JavaScript代碼的開發效率、開發體驗上我認為需要滿足下面幾個要求：
1. 代碼補全
2. 斷點調試
3. 定義跳轉
4. 指令終端
5. 代碼校驗
在曾經的項目中先後主要嘗試過：Webstorm、 Sublime、VSCode、Atom等支援Javascript的編輯器，最後嘗試還是集中在 Webstorm 和 VSCode上。
Webstorm是開發 JavaScript 應用的神器這點任何編輯器都難以匹敵，而且 Webstorm 也可以安裝很多有意思的插件。但是因為它過于強大，在開發過程中體驗是很多電腦運作一兩個小時就顯得很卡頓，特别是打開大檔案、調試代碼的時候。Webstorm 在單步調試 Nodejs 程式時也很緩慢，我大多數是使用node-inspector或devtool 調試，為了解決 Webstorm 卡頓我嘗試下面三種方法：
改善Webstorm的性能三種方法
-
修改Webstorm記憶體配置檔案
使用文本編輯器打開檔案：/Applications/WebStorm.app/Contents/bin/webstorm.vmoptions
修改配置參數
-Xms1024m
-Xmx2048m
可以根據自己的電腦組態和 Webstorm 的使用效果調節上面數值
- 在 Webstorm 中排除檢索目錄 如上圖所示，滑鼠選中要排除檢索的目錄->右鍵菜單->Mark Directory As -> Excluded
Cosos H5開發工具箱（上） 在 cocos2d-js 項目中我一般會排除以下目錄，供大家參考：
/frameworks/cocos2d-x //不會在webstorm中編輯 C++檔案
/frameworks/runtime-src //項目原生工程
/publish //release釋出目錄
/simulator //debug釋出目錄
/res //res是項目資源目錄，其中大部分目錄也會排除
- 禁用不需要的插件 如上圖所示進入Preferences->Plugins 中間視窗中顯示有所有已經安裝的插件，根據自己的情況将不需要的插件勾選掉，重新開機 Webstorm即可。
Cosos H5開發工具箱（上）
通過以上設定後可以顯著減少 webstorm 卡頓現象，除了打開大檔案的硬傷以外基本上沒什麼缺點了。
過濾 Creator項目中的.meta 檔案
部落客在剛接觸 CocosCreator 時也是使用的 Webstorm，代碼補全、定義跳轉等都沒問題，唯一不足的就是不能斷點調試。因為 Creator 工程不像 Cocos2d-js 沒有明确的啟動入口檔案（index.html），隻能在 Chrome中的 devtools 中調試。經過本人的反複嘗試終于可以在 Webstorm 中調試 Creatore 工程了，而且 Creator 1.3 和 1.4 的調試方法還不一樣。
在這裡部落客賣個關子，對 Webstrom調試 Creator 感興趣的朋友可以在評論後留下郵箱位址，我會以視訊示範的方式奉獻給大家。
webstrom中過濾.meta檔案
還有一點就是 Creator 工程中有個煩人的 xxx.meta 檔案，很是讓人讨厭，嘗試了好幾次解決這個問題，終于在 Webstorm 的設定選項終于找到了檔案濾選項。
如上圖設定後，你會發現世界清靜了，寫代碼來心情會更好，bug 也會更少了，你們說是不是呢？
在 VSCode 中過濾.meta檔案
在 VSCdoe 同樣可以配置過濾，但沒有像 Webstorm 那樣的可視化選項，而是一個純文字的配置檔案。
1.使用 command + p打開指令控制台
2.編輯工作區配置檔案
VSCode 的所有設定都在這個配置檔案裡編輯，左邊提供了設定參考選項，它是隻讀的。
浏覽器
使用cocos H5與使用 cocos2d-x 或 cocos2d-lua 最大的不同就是，你可以利用浏覽器來預覽、調試、測試你的遊戲，不僅能讓用戶端開發人員快速地看到遊戲效果，還能随時讓服務端、策劃、美術夥伴随時進行體驗遊戲。
主要用到的浏覽器有： Chrome、微信Web開發者工具、FireFox、Safari，下面簡要描述下不同浏覽器的特點和使用場景。
chrome
- chrome 是開發中最常用、最重要的的預覽工具和調試工具（建議項目組的策劃、美術、伺服器開發都使用 chrome 浏覽器。）
- chrome 可以調試JS代碼，還可以調試手機浏覽器和微信用戶端。
- 在遊戲的Canvas 周圍內建一些測試工具，可以提高開發效率，就像 creator 提供的分辨率切換、FPS 顯示等，如下圖： 這裡做的不是很好，最好是能與遊戲界面在同一個頁面。
Cosos H5開發工具箱（上）
微信Web開發者工具
- 快速預覽遊戲在微信用戶端中的适配效果。
- 檢驗你的javascript 代碼是否相容微信内置浏覽器（我曾經遇到Array.find 函數在桌面浏覽器運作正常，但在微信中卻沒有定義）。
- 調試微信jssdk的強力調試工具。
FireFox
FireFox主要用于遠端調試 JSB 上的javascript 代碼，不論是桌面、手機上、Android、iOS 都可以，需要注意的是 FireFox 的版本選擇很重要，不然連接配接不上。
目前最新的cocos2d-x版本為3.14 ,cocoscreator版本是1.4，使用 FireFox 44版本遠端調試都可連接配接的上，而最新版的 FireFox 51 本就不行。這裡建議Cocos引擎官方能有一個對應表那個引擎版本對應那個 FireFox版本，類似如下表格：
| cocos引擎版本 | firefox版本 |
|---|---|
| cocos2d-x 3.14 | firefox 44 |
| cocoscreator 1.4 | firefox 44 |
Safari
很有可能你的代碼在桌面浏覽器、Android微信上都運作的很好，但在 iOS 手機上就有問題，這時就需要Safari浏覽器了。
1. 在 Safari 浏覽器上運作預覽，如果不能通過桌面Safari也不能在iPhone的Safari和微信上運作，通過Safari開發者工具可以定位到出錯的代碼。
2. 在iPhone手機safari上運作遊戲，資料線與Mac電腦相連，可以在Mac 電腦的 Safari 浏覽器中調試iPhone上的Safari應用，是以Safari浏覽器是開發iOS平台H5遊戲的強大工具。需要注意的是要在 iPhone 設定中的 Safari 選項中打開調試開關。
作業系統
Cocos H5的開發主要集中在 Mac 系統和 windows 系統，我們所使用到的工具絕大多數都可以很好的運作在這兩個平台上。
Mac 系統
Mac 系統與 windows 相比在軟體開發上确實有很多的優點，我簡單總結有以下幾點
1. 支援所有開發環境和平台（iOS\Android\Windows\Linux\HTML5）
2. 相容Unix的指令終端（終端必殺工具 zshell）
3. Alfred、XtraFinder、Spotlight效率工具減少滑鼠操作
4. XCode開發調試iOS應用，除了它你别無選擇
Mac 和 Windows 友好協作
但是我在工作中所遇到的大多數遊戲公司隻有一兩台蘋果電腦，主要用于打包、接入SDK，絕大多數開發人員還是在用 windows 系統，而且除了開發人員，策劃、美術、伺服器開發人員也是使用的 windows 系統，是以我這裡不能隻是說Mac系統如何的好，更重要的是如何讓 Mac 系統與 windows 系統可以更多的友好的協作。
- 盡量統一使用跨平台的軟體（包括指令行工具）
- 建議使用nodejs/python等跨平台的腳本語言編寫内部工具，減少shell、批處理和靜态編譯語言
- 善用指令行工具與 Web 技術的組合開發GM工具、打包工具，讓指令行工具可以被策劃、美術等利用
- 所有代碼目錄分隔符統一使用反斜杠 “/”
- 建議使用 Mac 系統作為内網伺服器，開啟SSH服務和VNC遠端管理（VNC可以讓多人同時使用一台 Mac 電腦互不影響，特别有用的是讓美術或策劃使用GlyphDesigner編輯字型）
Mac 電腦組態建議
很多的公司配置的 Mac 電腦并不是為了日常開發準備，隻是用于打包、接入SDK，在硬體性能上可以說大多數都是最低配置。這不僅浪費硬體資源，更重要的是有開發人員使用這台 Mac 電腦工作，那是在浪費開發人員的時間，也是浪費整個項目開發的時間。
要讓Mac電腦開發 Cocos H5能夠發揮出應用的作用，配置至少達到下面這個要求：
1. Mac Mini中等配置以上
2. SDD硬碟，沒有SSD硬碟的Mac電腦隻是個擺設
3. 8G或8G以上記憶體，有條件最好16G
4. 雙顯示器（個人喜好）
其中最為重要的是 SSD 硬碟和記憶體，SSD硬碟也最好弄個大的，有的公司為了節約那點錢系統用個小的 SSD 硬碟，資料放在普通硬碟上，同樣很難用。
本篇博文視訊版請點選這裡，歡迎大家點評訂閱
未完待續，下一篇主要介紹cocos2d-js&creator的調試工具的用法，涉及浏覽器和 JSB 上的調試，以及 Android上 adb catlog的使用。