如何调试程序

当你阅览的时候发现图片只加载了一半或是动画都不会动了，这时候一定是出现了错误了，你按F12打开浏览器的开发工具，看看Console是不是有错误提示？如果是一般性的JavaScript语法错误，那么会详细提示哪里出错了，这种错误好处理。

那么没有错误提示的时候，界面也不是你预期的结果呢？

看看是不是加载顺序的问题，

先加载的图片在屏幕下层，后加载的再它之上，一层层叠加。如图所示。

层级关系.png

背景层是最先加载的，处于最底层。第二个加载的月饼处于背景层之上，属于第二层。后来加载的处于第三层，会盖在第二层的月饼之上。

看看精灵的坐标是不是预期的值

这一点也是比较重要的，尤其是你的精灵坐标依赖于其它的精灵，而很可能是被依赖的那个精灵坐标还没有移动到目标位置，你就依据这个来进行计算了，结果自然谬之千里了。或是你的精灵坐标落在了场景外面，这个自然看不到你的精灵了。
官方有个调试工具，就是Debug类。下面详细看看这个类如何使用。

        this.bird = this.add.sprite(0, 0, 'ui', 'bird1.png');
        this.bg = this.add.sprite(0, 0, 'bg');

先加载了小鸟，然后加载场景。运行的时候发现鸟不翼而飞了。使用debug的时候我们先在这个场景里添加一个render方法。

game.states.menu = function() {
    this.create = function() {
        this.bird = this.add.sprite(0, 0, 'ui', 'bird1.png');
        this.bg = this.add.sprite(0, 0, 'bg');
    },
    this.render = function() {
        game.debug.rectangle(this.bird);//在鸟的位置输出一个矩形框
        game.debug.spriteInfo(this.bird, 10, 10);//在场景坐标（10，10）的地方打印鸟的信息
    }
}

debug.png

关于这个精灵的信息已经打印出来了，有坐标、锚点、角度、旋转等信息，visible也是true，bounds是它的矩形框位置信息。
我们看到图上那个浅绿色的框框就是鸟该出现的位置，之所以没有出现就要看看是不是被遮住了。也可以用debug来打印body的信息通过bodyInfo(this.bird, x, y)这个方法，不过前提是对这个bird已经开启了物理引擎。更多的关于debug的功能，大家可以查询它的文档。关于如何查阅文档，之前有教程做过介绍。
祝大家都能快速、精准的定位出现的问题。