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