本篇博文视频版请点击这里，欢迎大家点评订阅

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的性能三种方法

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 卡顿现象，除了打开大文件的硬伤以外基本上没什么缺点了。

过滤 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

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版本，类似如下表格：

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 系统可以更多的友好的协作。

1. 尽量统一使用跨平台的软件（包括命令行工具）
2. 建议使用nodejs/python等跨平台的脚本语言编写内部工具，减少shell、批处理和静态编译语言
3. 善用命令行工具与 Web 技术的组合开发GM工具、打包工具，让命令行工具可以被策划、美术等利用
4. 所有代码目录分隔符统一使用反斜杠 “/”
5. 建议使用 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的使用。