本文视频，欢迎点评及订阅，感谢你的支持

cocos H5开发工具箱（上）

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 上。

Javascript编码神器

Webstorm是开发 JavaScript 应用的神器这点任何编辑器都难以匹敌，而且 Webstorm 也可以安装很多有意思的插件。但是因为它过于强大，在开发体验是很多电脑运行一两个小时就显得很卡顿，特别是打开大文件、调试代码的时候。Webstorm 在单步调试 Nodejs 程序时也很缓慢，我大多数是使用node-inspector或devtool 调试，为了解决 Webstorm 卡顿我尝试下面三种方法：

改善Webstorm的性能三种方法

1. 修改Webstorm内存配置文件

使用文本编辑器打开文件：/Applications/WebStorm.app/Contents/bin/webstorm.vmoptions

修改配置参数

-Xms1024m

-Xmx2048m

可以根据自己的电脑配置和 Webstorm 的使用效果调节上面数值

2. 在 Webstorm 中排除检索目录

排除检索目录

如上图所示，鼠标选中要排除检索的目录->右键菜单->Mark Directory As -> Excluded

在 cocos2d-js 项目中我一般会排除以下目录，供大家参考：

/frameworks/cocos2d-x   //不会在webstorm中编辑 C++文件

/frameworks/runtime-src //项目原生工程

/publish //release发布目录

/simulator //debug发布目录

/res    //res是项目资源目录，其中大部分目录也会排除

3. 禁用不需要的插件

禁用不需要的插件

如上图所示进入Preferences->Plugins 中间窗口中显示有所有已经安装的插件，根据自己的情况将不需要的插件勾选掉，重启Webstorm即可。

通过以上设置后可以显著减少 webstorm 卡顿现象，除了打开大文件和 Nodejs的调试以外基本上没什么缺点了，而这两点 VSCode 正好可以弥补。

###过滤 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打开命令控制台

从 VSCode 命令控制台进入工作区设置

2.编辑工作区配置文件

编辑 VSCode 的配置，排除文件

VSCode 的所有设置都在这个配置文件里编辑，左边提供了设置参考选项，它是只读的。

浏览器

使用cocos H5与使用 cocos2d-x 或 cocos2d-lua 最大的不同就是，你可以利用浏览器来预览、调试、测试你的游戏，不仅能让客户端开发人员快速地看到游戏效果，还能随时让服务端、策划、美术伙伴随时进行体验游戏。

主要用到的浏览器有： Chrome、微信Web开发者工具、FireFox、Safari，下面简要描述下不同浏览器的特点和使用场景。

chrome

1. chrome 是开发中最常用、最重要的的预览工具和调试工具（建议项目组的策划、美术、服务器开发都使用 chrome 浏览器）。

2. chrome 不仅可以调试桌面浏览器的JS代码，还可以调试手机浏览器和微信客户端。

3. 在游戏的Canvas元素周围集成一些测试工具，可以提高开发效率，就像 creator 提供的分辨率切换、FPS 显示等，如下图：

曾经项目中制作的系列测试工具

这里做的不是很好，最好是能与游戏界面在同一个页面上。

微信Web开发者工具

1. 快速预览游戏在微信客户端中的适配效果。

2. 检验你的javascript 代码是否兼容微信内置浏览器（我曾经遇到Array.find 函数在桌面浏览器运行正常，但在微信中却没有定义）。

3. 调试微信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 系统可以更多的友好的协作更为重要。

mac&windows 强强联手

1. 尽量统一使用跨平台的软件（包括命令行工具）

2. 建议使用nodejs/python等跨平台的脚本语言编写内部工具，减少shell、批处理和静态编译语言

3. 善用命令行工具与前端Web技术的组合开发GM工具、打包工具，让命令行工具可以被策划、美术等利用

4. 所有代码目录分隔符统一使用反斜杠 “/”

5. 建议使用 Mac 系统作为内网服务器，开启SSH服务和VNC远程管理（VNC可以让多人同时使用一台 Mac 电脑互不影响，特别有用的是让美术或策划使用GlyphDesigner编辑字体）

Mac 电脑配置建议

Mac Mini 电脑

很多的公司配置的 Mac 电脑并不是为了日常开发准备，只是用于打包、接入SDK，在硬件性能上可以说大多数都是最低配置，这不仅浪费硬件资源，更重要的是有开发人员使用这台 Mac 电脑工作，那是在浪费开发人员的时间，也是浪费整个项目开发的时间。

要让Mac电脑开发 Cocos H5 能够发挥出应用的作用，配置至少达到下面这个要求：

1. Mac Mini中等配置以上

2. SDD硬盘，没有SSD硬盘的Mac电脑只是个摆设

3. 8G或8G以上内存，有条件最好16G

4. 双显示器（个人喜好）

其中最为重要的是 SSD 硬盘和内存，SSD硬盘也最好弄个大的，有的公司为了节约那点钱系统用个小的 SSD 硬盘，数据放在普通硬盘上，同样很难用。

作者：张晓衡
链接：https://www.jianshu.com/p/45fde765ee28