使用Code IDE调试Cocos2d-x JavaScript游戏
支持的调试环境:
在 Windows 上你可以调试Windows和Android游戏,在 Mac 上你可以调试Mac、iOS和Android游戏。我们以 Mac 作为开发环境来演示 Code IDE 的使用,Windows上的流程和这里所介绍的几乎一样,不再赘述。
{{toc}}
先决条件
如果你还没有安装好 Cocos Code IDE,请先参考Code IDE 入门指南
IDE 配置
基础设置
打开工具的 Preferences 页,切换到 Cocos/JavaScript 子页面,选择你刚刚下载 cocos2d-js 作为 JavaScript Framework。
额外设置
假设你发现我们提供给你的预编译的Android runtime不能满足你的要求,你就需要重新定制,那么你就需要提供给 IDE 几个 Android 编译需要用到的工具。这可以通过打开 Preferences/Cocos 页面进行配置。
运行、测试游戏
- 新建一个名为 CocosJSGame 的 Cocos JavaScript 工程
- 右击 Cocos Explorer 中的工程
- 在弹出菜单中选择 "Debug As->Cocos JSBinding",工具会创建一个与工程名同名的 debug configuration
- 通过 ** Run->Debug Configurations ** 菜单打开 "Debug Configurations" 界面,我们提供的配置界面如下:
- 默认情况下脚本会运行在我们提供的 mac 版本预编译 runtime 上。为了简单起见,我们不对默认值进行任何改动。如果你想要在其他我们支持的目标平台上调试程序,可参考在其它目标平台上调试
如何调试
断点支持
- 可以在 javascript 脚本文件中增加断点,比如下在 app.js 的第25行
- 当屏幕右下角的关闭按钮被点击的时候,断点就会被触发
- 此时选择 “Yes” 打开 Debug Perspective 透视图,可以看到很多与调试相关的视图,调用栈、变量和断点等等
- 支持 Step over, Step into, Step out 等调试方式
代码热更新
想更改右下角的 close 按钮的位置?app.js 中第 27 行 closeItem.attr 方法是控制该按钮的显示位置的。
修改“x”上面的值,把"size.width-20" 改成 ""size.width/2" 然后保持修改, 你会发现,在没有重启的情况下 close 按钮的位置已经改变了,在屏幕底部的中间!
在其它目标平台上调试
- 通过 Run->Debug Configurations 菜单打开 Debug Configurations 页面
- 在页面的左侧,选择之前我们为你创建的名为CocosJSGame的configuration
在 iOS Simulator 上调试
在 iOS 设备上调试
- 通过 Xcode 将 runtime app 安装到你的 iOS 设备上(这种情况下不能使用预编译的 app,因为没有提供 Xcode 工程)
- 在 iOS 设备上启动 runtime
- 在 "Debug Configuration" 界面选择 iOS 单选项
- 取消 Use iOS Simulator 的勾选
- 将设备的 ip 地址填写在 Host 上(设备ip和 mac 机器的ip需要在同一网段,并能相互访问)
- 最后点击 Debug 按钮
在 android 设备上调试
- 手动安装 runtime 到你的设备上,直接使用预编译的 runtime apk 是最好的,被存放在 CocosJSGame/runtime/android 目录中(如果选择了“Use Adb Mode”,IDE 会自动安装runtime apk)
- 在 "Debug Configuration" 界面中,将设备的 ip 地址填写在 Host 上(设备ip和 mac 机器的ip需要在同一网段,并能相互访问, 如果选择了“Use Adb Mode”,可忽略这步)
- 非必要配置:如果系统安装有 adb,可以勾选上 Use Adb Mode,在 Package Name 和 Launch Activity 配置正确的情况下,调试时能通过usb线自动打开设备上的 runtime
- 如果上一条没有配置,或者没有通过usb线连接,那么请手动打开设备上的 runtime
- 最后点击 Debug 按钮