Cocos Creator 调试入门

感谢原作者的辛勤劳作:https://blog.csdn.net/potato47/article/details/79364727

打开 Chrome 开发者工具

Windows:F12 或 Ctrl+Shift+I 
Mac:Cmd+Opt+I 
有些网页可能屏蔽了快捷键,那么右上角手动点 
Cocos Creator 调试入门_第1张图片

Cocos Creator 调试入门_第2张图片

开发者工具常用选项

Elements:

用来查看界面元素,前端开发经常用到,但对于调试游戏来说,基本不会用到 
Cocos Creator 调试入门_第3张图片

Console:

控制台输出,当然也可以输入 
Cocos Creator 调试入门_第4张图片

Ctrl+L 清空控制台

Sources:

网页(游戏)的资源文件 
Cocos Creator 调试入门_第5张图片

Ctrl+P可以搜索文件 
Cocos Creator 调试入门_第6张图片

这里要确保打开了Source Map,这样才能看到原始的代码 
Cocos Creator 调试入门_第7张图片

Cocos Creator 调试入门_第8张图片

Network:

数据的请求信息 
Cocos Creator 调试入门_第9张图片

联网的游戏经常用到,比如查看一些 http 请求

Performance:

运行的实时表现 
Cocos Creator 调试入门_第10张图片

按两下Ctrl+E来得到一段时间内游戏运行实时表现,可以分析各个模块耗时多少,针对性地提高游戏性能

断点调试

Ctrl+P搜索并打开 Game.ts,在gameOver函数下面一行的行号上单击设置一个断点,当游戏运行到这里时就会停下来 
Cocos Creator 调试入门_第11张图片

此时你就拥有了上帝之手,想干嘛干嘛

  • 把鼠标悬停到对应变量就会显示相应的值 
    Cocos Creator 调试入门_第12张图片
  • 查看函数运行堆栈 
    Cocos Creator 调试入门_第13张图片
  • 利用控制台查看变量 
    Cocos Creator 调试入门_第14张图片

  • 单步调试 

这里写图片描述

这几个按钮依次代表

  • 运行到下一个断点
  • 运行到下一行
  • 进入运行的函数体内
  • 跳出运行的函数体
  • 忽略断点,也就是遇到断点不停止程序
  • 程序运行出错时自动断点

至于“道理我都懂,但是我要在哪里下断点”这种问题,就要靠天赋了。

加点料

  • 程序运行到debugger就会自动停止运行 
    Cocos Creator 调试入门_第15张图片
  • console.trace() 会输出函数调用堆栈 
    Cocos Creator 调试入门_第16张图片
  • console.table() 会把一个对象按表格形式输出 
    Cocos Creator 调试入门_第17张图片
  • console.time() 和 console.timeEnd()得到一段代码的执行时间 
    Cocos Creator 调试入门_第18张图片
  • 全局变量随时查看 
    Cocos Creator 调试入门_第19张图片
    Cocos Creator 调试入门_第20张图片
  • 控制台查看Api 
    Cocos Creator 调试入门_第21张图片
  • 输入函数名(不带括号)双击进入源码 感谢原作者的辛勤劳作:https://blog.csdn.net/potato47/article/details/79364727
    Cocos Creator 调试入门_第22张图片

你可能感兴趣的:(CocosCreator)